Jet object blinking in game? HTML5 Game Dev.

[allc1865]

Hi, my jet in my html5 game dev. is blinking really fast -- I'm assuming it's probably my coordinates that are off, but I'm not too sure; I've never had that happen before. 

 

Thanks!

[Chris]

See, we have no magical crystal glasses where we can look into to solve your problems.

We will need a demo where we can see your problem and debut it, or at least code examples of the code parts where you believe the error is located.

[allc1865]

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.

[allc1865]

Whoops! Here's the link to my game! http://gamesitestuff.weebly.com/ 

[allc1865]

@Chris, http://wearekiss.com/spritepad, can you create spite animations as well?

[Chris]

No thats only built for CSS spritesheets.