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
    Permalink

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

    //ENEMY FUNCTION CONSTRUCTOR
    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;
    }
    //ENEMIES
    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);

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

    //THIS IS MY DRAW FUNCTION USING YOUR METHOD WITH LOOPING OVER THE OBJECT
    function drawEnemy() {
    for (var enemyID in enemyList) {
    ctx.fillStyle = 'red';
    ctx.fillRect(enemyList[enemyID].x, enemyList[enemyID].y, enemyList[enemyID].width, enemyList[enemyID].height);
    }
    }

    //MY GENERATE RANDOM ENEMY FUNCTION
    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
    Permalink

    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
    Permalink

    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
    Permalink

    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
    Permalink

    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
    Permalink

    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
    Permalink

    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;
    Enemy(id,x,y,spdX,spdY,width,height);
    };

    //using enemy() to make our enemys
    randomEnemy();
    randomEnemy();
    randomEnemy();

  • February 16, 2020 at 17:47
    Permalink

    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
    Permalink

    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
    Permalink

    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)
    {
        randomlyGenerateEnemy();
        frameCount = 0;
    }

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

Leave a Reply