8- Making HTML5 Game: Enemy Respawn. Javascript Tutorial Guide

Episode 8 about making a video game in HTML5. In this video, we will randomly generate enemies as the time goes to increase the difficulty.

Last Episode: https://www.youtube.com/watch?v=7gdtg-KiXEQ
Next Episode: http://youtu.be/TnhlOmb2Gxw
First Episode: https://www.youtube.com/watch?v=XgK4YaMqQFg

If you have any question, feel free to post a comment below or send me a Youtube PM.

Start Code: http://pastebin.com/bsxxhLJY
End Code: http://pastebin.com/2JV14HBH

Original source

14 thoughts on “8- Making HTML5 Game: Enemy Respawn. Javascript Tutorial Guide

  • February 16, 2020 at 17:47

    raining chain can you please show me how to create all these generateRandom functions for the objects using THIS function Constructor format

    var Enemy = function(id, x, y, spdX, spdY, width, height) {
    this.id = id;
    this.x = x;
    this.y = y;
    this.spdX = spdX;
    this.spdY = spdY;
    this.width = width;
    this.height = height;
    var enemy1 = new Enemy('E1', 150, 220, 5, 10, 30, 30);
    var enemy2 = new Enemy('E2', 250, 320, 10, 15, 30, 30);
    var enemy3 = new Enemy('E3', 350, 420, 15, 20, 30, 30);

    var enemyList = {};
    enemyList['E1'] = enemy1;
    enemyList['E2'] = enemy2;
    enemyList['E3'] = enemy3;

    function drawEnemy() {
    for (var enemyID in enemyList) {
    ctx.fillStyle = 'red';
    ctx.fillRect(enemyList[enemyID].x, enemyList[enemyID].y, enemyList[enemyID].width, enemyList[enemyID].height);

    function generateRandomEnemy() {
    var id = Math.random();
    var x = Math.random() * canvasWidth;
    var y = Math.random() * canvasHeight;
    var spdX = Math.random() * 30;
    var spdY = Math.random() * 30;
    var width = Math.random() * 30;
    var height = Math.random() * 30;

    new Enemy(id, x, y, spdX, spdY, width, height); <——— What do I do here to add it to the new randomly generated enemy to the enemy list enemyList

    My main problem here is, I don't know how to add the new enemy created to the enemyList which then is processed by the drawEnemy() function to print the enemies onto the canvas. How do I do that?

  • February 16, 2020 at 17:47

    First, I would like to say that this tutorial series is so good I would pay money for it if I had to! I've learned so much already! Second, just out of curiosity, why create a new function instead of using document.location.reload() to start the game over?

  • February 16, 2020 at 17:47

    I have done everything up to the randomly generate enemy function. The function doesn't trigger any errors and the game runs fine. Yet no matter where I put randomlyGenerateEnemy() in the code, no enemy spawns and the game screen is left with just the player. Any idea what may be wrong?

  • February 16, 2020 at 17:47

    Hi RC! ive a problem with clearing my enemies..
    if I put enemyList = {}; JSLint says that enemyList is undefined. Please help me master!

  • February 16, 2020 at 17:47

    You can add:
    var isColliding = testCollisionEntity(i,player);
    if (isColliding){
    i.spdX = -i.spdX;
    i.spdY = -i.spdY;

    to updateEntityPosition to add a bounce when you colliden with an enemy also! 🙂

  • February 16, 2020 at 17:47

    Whenever I start a new game I get the following error: Uncaught TypeError: Cannot read property 'x' of undefined. Then it lists the offending line from the updateEntityPosition function: something.x += something.spdX;
    I don't understand why I'm getting this error

  • February 16, 2020 at 17:47

    ive tryed this and it hasn't worked and i've tried to write in other places and alot of stiff and writing again here it is

    var randomEnemy = function(){
    var x = Math.random()*width;
    var y = Math.random()*height;
    var height = 10 + Math.random()*30;
    var width = 10 + Math.random()*30;
    var id = Math.random();
    var spdX = 5 + Math.random() * 5;
    var spdY = 5 + Math.random() * 5;

    //using enemy() to make our enemys

  • February 16, 2020 at 17:47

    I didn't get one thing
    you put id as random then if it generates lets say 0.123456 once and then when the player was surviving and when the function again does random id after the given time interval what will happen ?

  • February 16, 2020 at 17:47

    An issue I commonly find is that sometimes, when the new entty hits a wall, it doesn't immeadiately turn around, it goes in the line of the  boundary and leaves the preset borders

  • February 16, 2020 at 17:47

    Great video its nice seeing something be built step by step. i do have a question however,

    at 9:45 you use modulus

    but couldnt you also

    f(frameCount === 100)
        frameCount = 0;

    and what would be the benefit of using modulus over that, thanks again for the informative videos

Leave a Reply