Little help explaining me closures in js anyone... I suck a bit in math

Question

Hi! This is something I've learned from a different site, but I don't want to make it look like a commercial. Because the html part is really small, I did it in one file:

<html>
<head>
    <title></title>
    <style type="text/css">
        canvas {
            border: 1px solid black;
            width: 100%;
        }
    </style>
</head>
<body>

    <canvas id="myCanvas" width="640" height="360"></canvas>

    <script type="text/javascript">
        window.addEventListener('load', function(){

            //constants
            var GAME_WIDTH = 640;
            var GAME_HEIGHT = 360;

            //enemies array
            var enemies = [
                {
                    x: 100,
                    y: 100,
                    speedY: 1,
                    w: 40,
                    h: 40
                },
                {
                    x: 260,
                    y: 100,
                    speedY: 3,
                    w: 40,
                    h: 40
                },
                {
                    x: 380,
                    y: 100,
                    speedY: 5,
                    w: 40,
                    h: 40
                },
                {
                    x: 480,
                    y: 100,
                    speedY: 7,
                    w: 40,
                    h: 40
                }
            ];

            //player
            var player = {
                x: 10,
                y: 160,
                speedX: 2,
                w: 40,
                h: 40,
                isMoving: false
            };

            //make the player move
            var movePlayer = function(){
                player.isMoving = true;
            };

            //make the player stop
            var stopPlayer = function(){
                player.isMoving = false;
            };

            //get the canvas and the context
            var canvas = document.getElementById("myCanvas");
            var ctx = canvas.getContext("2d");

            //event listeners to move player
            canvas.addEventListener("mousedown", movePlayer);

            canvas.addEventListener("mouseup", stopPlayer);


            //update

            var update = function(){
                //update player
                if(player.isMoving){
                    player.x += player.speedX;
                };

                //update enemies
                enemies.forEach(function(element){
                    element.y += element.speedY;

                    //check borders
                    if(element.y <= 0){
                        element.y = 0;
                        element.speedY *= -1;
                    }else if(element.y >= GAME_HEIGHT - 40){
                        element.y = GAME_HEIGHT - 40;
                        element.speedY *= -1;
                    };
                });
            };

            //draw
            var draw = function(){
                //clear the canvas
                ctx.clearRect(0, 0, GAME_WIDTH, GAME_HEIGHT);

                //draw player
                ctx.fillStyle = "green";

                ctx.fillRect(player.x, player.y, player.w, player.h);

                //draw enemies
                ctx.fillStyle = "blue";
                enemies.forEach(function(element){
                    ctx.fillRect(element.x, element.y, element.w, element.h);
                });
            };


            // check collision
            var collision = false;

            var checkCollision = function(obj1, obj2){
                 if((obj1.x + obj1.w <= obj2.x) || (obj1.y + obj1.h <= obj2.y)){
                    collision = true; //game over
                    console.log(collision);
                }
            };


            //step up
            var step = function(){
                update();
                draw();

                for(var i = 0; i < enemies.length; i++){
                    checkCollision(player, enemies[i]);
                };

                window.requestAnimationFrame(step);
            };

            step();
        });
    </script>
</body>
</html>

Now, I know that if we start from top left corner of the canvas and the player object starts from position x and y, let's say 10 and 160, it has something to do with the fact that if the width of the player is 40 and it's height is also 40, if the enemy objects hits players x + 40 and y + 40 on the coordinate system, than I have a collision aka if enemy hits x = 50 and y = 200. But tell me how to get it working inside a let's call it checkCollision function?? Can someone give me a hint how to do it, because with my code it doesn't work as I think it should and I'm a bit stuck...for the last week or something no ideas at all. In my head it works but not in the browser. I haven't added the goal yet because I know that if I get it working for the enemies, I'll do it for the goal as well. My code keeps hitting "true" on the console and I know I'm doing something wrong with the math, because it gives me that result even if I don't move the player at all ... :( Any ideas? Thanks a lot!!!

Answer 1 · 2018-06-01T23:19:58Z

June 1, 2018 11:19pm

Try this:

  var checkCollision = (obj1, obj2) => {
       if(!(obj1.x + obj1.w < obj2.x || obj1.x > obj2.x + obj2.w ||
            obj1.y + obj1.h < obj2.y || obj1.y > obj2.y + obj2.h)) {
          collision = true; //game over
      }
  };

Also, I didn't calculate it, but I suspect it's not possible to get past the last block given the current speeds.

Welcome to the Treehouse Community

Looking to learn something new?

Tsenko Aleksiev

Tsenko Aleksiev

Little help explaining me closures in js anyone... I suck a bit in math

1 Answer

Steven Parker

Steven Parker

Tsenko Aleksiev

Tsenko Aleksiev

Steven Parker

Steven Parker

Steven Parker

Steven Parker