D4mations.com

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

d4mer

, , , , , , , ,

14 responses to “8- Making HTML5 Game: Enemy Respawn. Javascript Tutorial Guide”

  2. 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?

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

  9. 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. 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. 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();

  14. 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