Jump to content

Jet object blinking in game? HTML5 Game Dev.


Recommended Posts

I think I figured out what the problem was. 

I'm using someone else's code and they have an animation set up in their code . But I just put a single image in there, so I think it's trying to switch back and forth to something, but there's nothing there.

 

Not exactly sure how to upload my game to a webpage...I put a link at the bottom. Thanks for any help!

I have about 4 .js files for this game. Here's the code for the app.js file.

 

var requestAnimFrame = (function(){    return window.requestAnimationFrame       ||        window.webkitRequestAnimationFrame ||        window.mozRequestAnimationFrame    ||        window.oRequestAnimationFrame      ||        window.msRequestAnimationFrame     ||        function(callback){            window.setTimeout(callback, 1000 / 60);        };})();// Create the canvasvar canvas = document.createElement("canvas");var ctx = canvas.getContext("2d");canvas.width = 800;canvas.height = 500;document.body.appendChild(canvas);// The main game loopvar lastTime;function main() {    var now = Date.now();    var dt = (now - lastTime) / 1000.0;    update(dt);    render();    lastTime = now;    requestAnimFrame(main);};//  hooks up the "Play Again" button, resets the game state, and starts the game.function init() {    terrainPattern = ctx.createPattern(resources.get('img/terrain.png'), 'repeat');    document.getElementById('play-again').addEventListener('click', function() {        reset();    });    reset();    lastTime = Date.now();    main();}resources.load([    'img/sprites.png',    'img/terrain.png']);resources.onReady(init);// Game statevar player = {    pos: [0, 0],    sprite: new Sprite('img/sprites.png', [0, 0], [39, 39], 16, [0, 1])};var bullets = [];var enemies = [];var explosions = [];var lastFire = Date.now();var gameTime = 0;var isGameOver;var terrainPattern;var score = 0;var scoreEl = document.getElementById('score');// Speed in pixels per secondvar playerSpeed = 200;var bulletSpeed = 500;var enemySpeed = 100;// Update game objectsfunction update(dt) {    gameTime += dt;    handleInput(dt);    updateEntities(dt);    // It gets harder over time by adding enemies using this    // equation: 1-.993^gameTime    if(Math.random() < 1 - Math.pow(.993, gameTime)) {        enemies.push({            pos: [canvas.width,                  Math.random() * (canvas.height - 39)],            sprite: new Sprite('img/sprites.png', [0, 78], [80, 39],                               6, [0, 1, 2, 3, 2, 1])        });    }    checkCollisions();    scoreEl.innerHTML = score;};function handleInput(dt) {    if(input.isDown('DOWN') || input.isDown('s')) {        player.pos[1] += playerSpeed * dt;    }    if(input.isDown('UP') || input.isDown('w')) {        player.pos[1] -= playerSpeed * dt;    }    if(input.isDown('LEFT') || input.isDown('a')) {        player.pos[0] -= playerSpeed * dt;    }    if(input.isDown('RIGHT') || input.isDown('d')) {        player.pos[0] += playerSpeed * dt;    }    if(input.isDown('SPACE') &&       !isGameOver &&       Date.now() - lastFire > 100) {        var x = player.pos[0] + player.sprite.size[0] / 5;        var y = player.pos[1] + player.sprite.size[1] / 2;        bullets.push({ pos: [x, y],                       dir: 'forward',                       sprite: new Sprite('img/sprites.png', [0, 39], [18, 8]) });        //bullets.push({ pos: [x, y],                      // dir: 'up',                       //sprite: new Sprite('img/sprites.png', [0, 50], [9, 5]) });        //bullets.push({ pos: [x, y],                       //dir: 'down',                       //sprite: new Sprite('img/sprites.png', [0, 60], [9, 5]) });        lastFire = Date.now();    }}function updateEntities(dt) {    // Update the player sprite animation    player.sprite.update(dt);    // Update all the bullets    for(var i=0; i<bullets.length; i++) {        var bullet = bullets[i];        switch(bullet.dir) {        case 'up': bullet.pos[1] -= bulletSpeed * dt; break;        case 'down': bullet.pos[1] += bulletSpeed * dt; break;        default:            bullet.pos[0] += bulletSpeed * dt;        }        // Remove the bullet if it goes offscreen        if(bullet.pos[1] < 0 || bullet.pos[1] > canvas.height ||           bullet.pos[0] > canvas.width) {            bullets.splice(i, 1);            i--;        }    }    // Update all the enemies    for(var i=0; i<enemies.length; i++) {        enemies[i].pos[0] -= enemySpeed * dt;        enemies[i].sprite.update(dt);        // Remove if offscreen        if(enemies[i].pos[0] + enemies[i].sprite.size[0] < 0) {            enemies.splice(i, 1);            i--;        }    }    // Update all the explosions    for(var i=0; i<explosions.length; i++) {        explosions[i].sprite.update(dt);        // Remove if animation is done        if(explosions[i].sprite.done) {            explosions.splice(i, 1);            i--;        }    }}// Collisionsfunction collides(x, y, r, b, x2, y2, r2, b2) {    return !(r <= x2 || x > r2 ||             b <= y2 || y > b2);}function boxCollides(pos, size, pos2, size2) {    return collides(pos[0], pos[1],                    pos[0] + size[0], pos[1] + size[1],                    pos2[0], pos2[1],                    pos2[0] + size2[0], pos2[1] + size2[1]);}function checkCollisions() {    checkPlayerBounds();        // Run collision detection for all enemies and bullets    for(var i=0; i<enemies.length; i++) {        var pos = enemies[i].pos;        var size = enemies[i].sprite.size;        for(var j=0; j<bullets.length; j++) {            var pos2 = bullets[j].pos;            var size2 = bullets[j].sprite.size;            if(boxCollides(pos, size, pos2, size2)) {                // Remove the enemy                enemies.splice(i, 1);                i--;                // Add score                score += 100;                // Add an explosion                explosions.push({                    pos: pos,                    sprite: new Sprite('img/sprites.png',                                       [0, 117],                                       [40, 40],                                       16,                                       [0, 1, 2, 3, 4, 5],                                       null,                                       true)                });                // Remove the bullet and stop this iteration                bullets.splice(j, 1);                break;            }        }        if(boxCollides(pos, size, player.pos, player.sprite.size)) {            gameOver();        }    }}function checkPlayerBounds() {    // Check bounds    if(player.pos[0] < 0) {        player.pos[0] = 0;    }    else if(player.pos[0] > canvas.width - player.sprite.size[0]) {        player.pos[0] = canvas.width - player.sprite.size[0];    }    if(player.pos[1] < 0) {        player.pos[1] = 0;    }    else if(player.pos[1] > canvas.height - player.sprite.size[1]) {        player.pos[1] = canvas.height - player.sprite.size[1];    }}// Draw everythingfunction render() {    ctx.fillStyle = terrainPattern;    ctx.fillRect(0, 0, canvas.width, canvas.height);    // Render the player if the game isn't over    if(!isGameOver) {        renderEntity(player);    }    renderEntities(bullets);    renderEntities(enemies);    renderEntities(explosions);};function renderEntities(list) {    for(var i=0; i<list.length; i++) {        renderEntity(list[i]);    }    }function renderEntity(entity) {    ctx.save();    ctx.translate(entity.pos[0], entity.pos[1]);    entity.sprite.render(ctx);    ctx.restore();}// Game overfunction gameOver() {    document.getElementById('game-over').style.display = 'block';    document.getElementById('game-over-overlay').style.display = 'block';    isGameOver = true;}// Reset game to original statefunction reset() {    document.getElementById('game-over').style.display = 'none';    document.getElementById('game-over-overlay').style.display = 'none';    isGameOver = false;    gameTime = 0;    score = 0;    enemies = [];    bullets = [];    player.pos = [50, canvas.height / 2];}; 

Also, when you shoot, my explosions show up weird. Any help with that would be outstanding. Thanks.

here's the link to my game. Just download the file -- I'm not sure how to do it any other way.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...