Deprecated: Function create_function() is deprecated in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/plugins/wp-automatic/wp-automatic.php on line 70
8- Making HTML5 Game: Enemy Respawn. Javascript Tutorial Guide | D4mations.com
  • Saturday , 24 October 2020

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

Code Canyon



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

3d Ocean

Related Posts

14 Comments

  1. Jose Gonzalez
    February 16, 2020 at 17:47

    Ik this is old, but when I do this, only the latest enemy does damage, can you help me please?

  2. antonio young
    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

    //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?

  3. King yao
    February 16, 2020 at 17:47

    Hey RC. The code is working fine and all but the console on googlechrome is giving me this notification: "Uncaught TypeError: Cannot read property 'x' of undefined" which doesn't make sense to me. https://pastebin.com/iZMgj9ft

  4. Chris Stetson
    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?

  5. Cafra
    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?

  6. vince mauer
    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!

  7. Tom 0101001
    February 16, 2020 at 17:47

    Great tutorial! easy to understand and fast enough to not get bored.

  8. Kongpon Charanwattanakit
    February 16, 2020 at 17:47

    will generating an id using Math.random() returns a same number and then overrides the existing enemy in the list?

  9. Tony Nieh
    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! 🙂

  10. Tangential_Tangine
    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

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

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

  12. Roshan Razz Adhikary
    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 ?

  13. Victor Krum
    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

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

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

Leave A Comment

You must be logged in to post a comment.