Web-Dev-For-Beginners/translations/en/6-space-game/3-moving-elements-around/README.md

Build a Space Game Part 3: Adding Motion

Pre-Lecture Quiz

Pre-lecture quiz

Games become much more engaging when you have aliens moving around on the screen! In this lesson, we’ll explore two types of movement:

• Keyboard/Mouse movement: When the user interacts with the keyboard or mouse to move an object on the screen.
• Game-induced movement: When the game itself moves an object at specific time intervals.

So, how do we make objects move on the screen? It all comes down to cartesian coordinates: we change the object's location (x, y) and then redraw the screen.

To achieve movement on the screen, you typically follow these steps:

1. Set a new location for the object. This is necessary to make it appear as though the object has moved.
2. Clear the screen. The screen must be cleared between draws. This can be done by drawing a rectangle filled with the background color.
3. Redraw the object at its new location. This step completes the process of moving the object from one position to another.

Here’s an example of what this might look like in code:

//set the hero's location
hero.x += 5;
// clear the rectangle that hosts the hero
ctx.clearRect(0, 0, canvas.width, canvas.height);
// redraw the game background and hero
ctx.fillRect(0, 0, canvas.width, canvas.height)
ctx.fillStyle = "black";
ctx.drawImage(heroImg, hero.x, hero.y);

✅ Can you think of why redrawing your hero many times per second might lead to performance issues? Check out alternatives to this pattern.

Handle keyboard events

You can handle events by attaching specific events to your code. Keyboard events are triggered on the entire window, while mouse events like click can be tied to specific elements. In this project, we’ll use keyboard events.

To handle an event, you use the window's addEventListener() method, which takes two input parameters. The first parameter is the event name, such as keyup. The second parameter is the function to be executed when the event occurs.

Here’s an example:

window.addEventListener('keyup', (evt) => {
  // `evt.key` = string representation of the key
  if (evt.key === 'ArrowUp') {
    // do something
  }
})

For key events, you can use two properties on the event object to determine which key was pressed:

• key: A string representation of the pressed key, such as ArrowUp.
• keyCode: A numeric representation, such as 37, which corresponds to ArrowLeft.

✅ Key event handling is useful beyond game development. Can you think of other applications for this technique?

Special keys: a caveat

Some special keys affect the browser window. For example, if you’re listening for a keyup event and use these special keys to move your hero, the browser might also perform horizontal scrolling. To prevent this, you can disable the browser's default behavior with the following code:

let onKeyDown = function (e) {
  console.log(e.keyCode);
  switch (e.keyCode) {
    case 37:
    case 39:
    case 38:
    case 40: // Arrow keys
    case 32:
      e.preventDefault();
      break; // Space
    default:
      break; // do not block other keys
  }
};

window.addEventListener('keydown', onKeyDown);

This code ensures that the arrow keys and the spacebar have their default behavior disabled. The disabling happens when we call e.preventDefault().

Game-induced movement

Objects can move on their own using timers like setTimeout() or setInterval(). These functions update the object's location at regular intervals. Here’s an example:

let id = setInterval(() => {
  //move the enemy on the y axis
  enemy.y += 10;
})

The game loop

The game loop is a fundamental concept in game development. It’s essentially a function that runs at regular intervals, drawing everything that should be visible to the player. The game loop processes all game objects, drawing them unless they’re no longer part of the game (e.g., an enemy destroyed by a laser).

Here’s an example of a typical game loop in code:

let gameLoopId = setInterval(() =>
  function gameLoop() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = "black";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    drawHero();
    drawEnemies();
    drawStaticObjects();
}, 200);

This loop runs every 200 milliseconds to redraw the canvas. You can adjust the interval to suit your game’s needs.

Continuing the Space Game

You’ll build on the existing code. Start with the code you completed in Part I, or use the code provided in Part II - starter.

• Move the hero: Add code to allow the hero to move using the arrow keys.
• Move enemies: Add code to make the enemies move from top to bottom at a set speed.

Recommended steps

Locate the files in the your-work folder. It should contain the following:

-| assets
  -| enemyShip.png
  -| player.png
-| index.html
-| app.js
-| package.json

Start your project by navigating to the your_work folder and typing:

cd your-work
npm start

This will start an HTTP server at http://localhost:5000. Open a browser and navigate to that address. At this point, you should see the hero and enemies on the screen, but nothing is moving—yet!

Add code

1. Create dedicated objects for hero, enemy, and game object. These should have x and y properties. (Refer to the section on Inheritance or composition).

   HINT: The game object should include x and y properties and the ability to draw itself on the canvas.

   Tip: Start by creating a GameObject class with the following constructor, and then draw it on the canvas:

   
    class GameObject {
      constructor(x, y) {
        this.x = x;
        this.y = y;
        this.dead = false;
        this.type = "";
        this.width = 0;
        this.height = 0;
        this.img = undefined;
      }
   
      draw(ctx) {
        ctx.drawImage(this.img, this.x, this.y, this.width, this.height);
      }
    }
   

   Next, extend the GameObject class to create the Hero and Enemy classes:

    class Hero extends GameObject {
      constructor(x, y) {
        ...it needs an x, y, type, and speed
      }
    }
   

    class Enemy extends GameObject {
      constructor(x, y) {
        super(x, y);
        (this.width = 98), (this.height = 50);
        this.type = "Enemy";
        let id = setInterval(() => {
          if (this.y < canvas.height - this.height) {
            this.y += 5;
          } else {
            console.log('Stopped at', this.y)
            clearInterval(id);
          }
        }, 300)
      }
    }
   

2. Add key-event handlers to handle navigation (move the hero up, down, left, and right).

   REMEMBER: The coordinate system starts at the top-left corner, which is (0, 0). Also, don’t forget to disable the default browser behavior.

   Tip: Create an onKeyDown function and attach it to the window:

    let onKeyDown = function (e) {
          console.log(e.keyCode);
            ...add the code from the lesson above to stop default behavior
          }
    };
   
    window.addEventListener("keydown", onKeyDown);
   

   Check your browser console to see the keystrokes being logged.

3. Implement the Pub-Sub pattern to keep your code clean as you continue building the game.

   To do this, follow these steps:

   1. Add an event listener to the window:

       window.addEventListener("keyup", (evt) => {
         if (evt.key === "ArrowUp") {
           eventEmitter.emit(Messages.KEY_EVENT_UP);
         } else if (evt.key === "ArrowDown") {
           eventEmitter.emit(Messages.KEY_EVENT_DOWN);
         } else if (evt.key === "ArrowLeft") {
           eventEmitter.emit(Messages.KEY_EVENT_LEFT);
         } else if (evt.key === "ArrowRight") {
           eventEmitter.emit(Messages.KEY_EVENT_RIGHT);
         }
       });
      

   2. Create an EventEmitter class to manage publishing and subscribing to messages:

       class EventEmitter {
         constructor() {
           this.listeners = {};
         }
      
         on(message, listener) {
           if (!this.listeners[message]) {
             this.listeners[message] = [];
           }
           this.listeners[message].push(listener);
         }
      
         emit(message, payload = null) {
           if (this.listeners[message]) {
             this.listeners[message].forEach((l) => l(message, payload));
           }
         }
       }
      

   3. Add constants and set up the EventEmitter:

       const Messages = {
         KEY_EVENT_UP: "KEY_EVENT_UP",
         KEY_EVENT_DOWN: "KEY_EVENT_DOWN",
         KEY_EVENT_LEFT: "KEY_EVENT_LEFT",
         KEY_EVENT_RIGHT: "KEY_EVENT_RIGHT",
       };
      
       let heroImg, 
           enemyImg, 
           laserImg,
           canvas, ctx, 
           gameObjects = [], 
           hero, 
           eventEmitter = new EventEmitter();
      

   4. Initialize the game:

   function initGame() { gameObjects = []; createEnemies(); createHero();

   eventEmitter.on(Messages.KEY_EVENT_UP, () => { hero.y -=5 ; })

   eventEmitter.on(Messages.KEY_EVENT_DOWN, () => { hero.y += 5; });

   eventEmitter.on(Messages.KEY_EVENT_LEFT, () => { hero.x -= 5; });

   eventEmitter.on(Messages.KEY_EVENT_RIGHT, () => { hero.x += 5; }); }

4. Set up the game loop

   Refactor the window.onload function to initialize the game and set up a game loop with an appropriate interval. Add a laser beam as well:

    window.onload = async () => {
      canvas = document.getElementById("canvas");
      ctx = canvas.getContext("2d");
      heroImg = await loadTexture("assets/player.png");
      enemyImg = await loadTexture("assets/enemyShip.png");
      laserImg = await loadTexture("assets/laserRed.png");
   
      initGame();
      let gameLoopId = setInterval(() => {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = "black";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        drawGameObjects(ctx);
      }, 100)
   
    };
   

5. Move enemies at intervals

   Refactor the createEnemies() function to generate enemies and add them to the new gameObjects class:

    function createEnemies() {
      const MONSTER_TOTAL = 5;
      const MONSTER_WIDTH = MONSTER_TOTAL * 98;
      const START_X = (canvas.width - MONSTER_WIDTH) / 2;
      const STOP_X = START_X + MONSTER_WIDTH;
   
      for (let x = START_X; x < STOP_X; x += 98) {
        for (let y = 0; y < 50 * 5; y += 50) {
          const enemy = new Enemy(x, y);
          enemy.img = enemyImg;
          gameObjects.push(enemy);
        }
      }
    }
   

   Create a createHero() function to do the same for the hero:

    function createHero() {
      hero = new Hero(
        canvas.width / 2 - 45,
        canvas.height - canvas.height / 4
      );
      hero.img = heroImg;
      gameObjects.push(hero);
    }
   

   Finally, add a drawGameObjects() function to start drawing:

    function drawGameObjects(ctx) {
      gameObjects.forEach(go => go.draw(ctx));
    }
   

   Your enemies should now begin advancing toward your hero spaceship!

---

🚀 Challenge

As you’ve seen, adding more functions, variables, and classes can lead to 'spaghetti code.' How can you better organize your code to make it more readable? Sketch out a system for organizing your code, even if it’s still in a single file.

Post-Lecture Quiz

Post-lecture quiz

Review & Self Study

While we’re building this game without frameworks, there are many JavaScript-based canvas frameworks for game development. Take some time to read about these.

Assignment

Comment your code

---

Disclaimer:
This document has been translated using the AI translation service Co-op Translator. While we strive for accuracy, please note that automated translations may contain errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is recommended. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.