# Chapter 10: Collisions

**URL:** <https://talk.code3dgames.com/t/chapter-10-collisions/543>\
**Category:** Uncategorized\
**Created:** [August 25, 2022, 6:55pm UTC](https://talk.code3dgames.com/t/chapter-10-collisions/543 "2022-08-25T18:55:25Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Charly007](https://talk.code3dgames.com/letter_avatar_proxy/v4/letter/c/5f9b8f/32.png) [@Charly007](https://talk.code3dgames.com/u/Charly007)\
**Post date:** [August 25, 2022, 6:55pm UTC](https://talk.code3dgames.com/t/chapter-10-collisions/543/1 "2022-08-25T18:55:25Z")

</div>

Hi,  
I have a problem with the code and a question. My problem is that the avatar is still running through the trees. I compared my code with the one in the book and the console dosen´t show any mistakes, except for “Uncaught TypeError: Cannot read properties of undefined (reading ‘addEventListener’) at appcache.js:4:27”.  
Could you help me to solve the issue with the avatar still running through the trees?  
And my question is: what is appcache.js?

My code:  
[https://is.gd/vqxrUC](https://is.gd/vqxrUC)

Hope you can help and thx in advance  
Charly

---

<div class="post-metadata">

**Author:** ![chris](https://talk.code3dgames.com/user_avatar/talk.code3dgames.com/chris/32/5_2.png) [@chris](https://talk.code3dgames.com/u/chris)\
**Post date:** [August 25, 2022, 7:12pm UTC](https://talk.code3dgames.com/t/chapter-10-collisions/543/2 "2022-08-25T19:12:06Z")

</div>

You’re going to hate to learn the answer here 🙂

There is just a little typo in the code. In the `isColliding()` function on line 165, we want to check the length of the list of intersecting objects:

```auto
  function isColliding() {
    var vector = new THREE.Vector3(0, -1, 0);
    var raycaster = new THREE.Raycaster(marker.position, vector);
    
    var intersects = raycaster.intersectObjects(notAllowed);
    if (intersects.lenght > 0) return true;
    
    return false;
  }

```

Instead of checking `intersects.length`, the code is checking `intersects.lenght`. If you fix just that, the collision detection will work.

For what it’s worth, I make that mistake constantly. To track down the issue, I put debugging lines in the code a various places. For instance, I put `console.log('message')` in the `isColliding()` function:

```auto
  function isColliding() {
    console.log('start isColliding')
    var vector = new THREE.Vector3(0, -1, 0);
    var raycaster = new THREE.Raycaster(marker.position, vector);
    
    var intersects = raycaster.intersectObjects(notAllowed);
    if (intersects.lenght > 0) return true;

    console.log('end isColliding')    
    return false;
  }

```

Once I had those lines in place, I could look in the JavaScript console to see that the `start isColliding` message was being reached, but the `end isColliding` message never showed – even when the avatar was in the middle of the tree. At that point I knew what code was causing the problem, then I looked closer and saw the typo.

Hope that helps. Nice work on the rest of the code!

-Chris

---

<div class="post-metadata">

**Author:** ![Charly007](https://talk.code3dgames.com/letter_avatar_proxy/v4/letter/c/5f9b8f/32.png) [@Charly007](https://talk.code3dgames.com/u/Charly007)\
**Post date:** [August 27, 2022, 3:01am UTC](https://talk.code3dgames.com/t/chapter-10-collisions/543/3 "2022-08-27T03:01:52Z")

</div>

Hi Chris,  
Thank you very much!! -\> You were right I did hate the mistake 😂 😂  
Eventhough you detected my “spelling strengths” (😂) there was another point I would be happy to understand. What is appcache.js?  
Thanks again  
Charly