allc1865

Members
  • Content Count

    21
  • Joined

  • Last visited

  1. Hi, could someone please explain what a widget library is and where would you find the result of it on your game, or on whatever you're building? Thanks!
  2. @Chris, http://wearekiss.com/spritepad, can you create spite animations as well?
  3. Whoops! Here's the link to my game! http://gamesitestuff.weebly.com/
  4. 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.
  5. 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!
  6. Do you have a demo of this script working? Do you need an external html, stylesheet or js file to make this code work? Thanks
  7. Thanks for the comments, guys. @ParticalDude, do you know of any websites that teach you how to set up the code and stuff?
  8. Hi, I'm trying to create an explosion when I shoot an enemy jet. Not just an image when I shoot an enemy but an explosion to where it explodes and then fades like a GIF files. How could I implement that on my game? Right now I'm using a sprite sheet. Any help would be great thanks!
  9. Hi. I'm trying to make my jet shoot red bullets, but for some reason they're coming out at green. Here's my code.... function Jet() { this.srcX = 0; this.srcY = 510; this.width = 100; this.height = 40; this.speed = 3; this.drawX = 220; this.drawY = 200; this.noseX = this.drawX + 100; this.noseY = this.drawY + 30; this.isUpKey = false; this.isRightKey = false; this.isDownKey = false; this.isLeftKey = false; this.isSpacebar = false; this.isShooting = false; this.bullets = []; this.currentBullet = 0; for (var i = 0; i < 25; i++) { this.bullets[this.bullets.length] = new Bullet(); }}Jet.prototype.draw = function() { clearCtxJet(); this.checkDirection(); this.noseX = this.drawX + 100; this.noseY = this.drawY + 30; this.checkShooting(); this.drawAllBullets(); ctxJet.drawImage(imgSprite, this.srcX, this.srcY, this.width, this.height, this.drawX, this.drawY, this.width, this.height);};Jet.prototype.checkDirection = function() { if (this.isUpKey) { this.drawY -= this.speed; } if (this.isRightKey) { this.drawX += this.speed; } if (this.isDownKey) { this.drawY += this.speed; } if (this.isLeftKey) { this.drawX -= this.speed; }};Jet.prototype.drawAllBullets = function() { for (var i = 0; i < this.bullets.length; i++) { if (this.bullets[i].drawX >= 0) this.bullets[i].draw(); if (this.bullets[i].explosion.hasHit) this.bullets[i].explosion.draw(); }};Jet.prototype.checkShooting = function() { if (this.isSpacebar && !this.isShooting) { this.isShooting = true; this.bullets[this.currentBullet].fire(this.noseX, this.noseY); this.currentBullet++; if (this.currentBullet >= this.bullets.length) this.currentBullet = 0; } else if (!this.isSpacebar) { this.isShooting = false; }};function clearCtxJet() { ctxJet.clearRect(0, 0, gameWidth, gameHeight);}// end of jet functions// bullet functionsfunction Bullet() { this.srcX = 100; this.srcY = 460; this.drawX = -20; this.drawY = 0; this.width = 5; this.height = 5; this.explosion = new Explosion();}Bullet.prototype.draw = function() { this.drawX += 3; ctxJet.drawImage(imgSprite, this.srcX, this.srcY, this.width, this.height, this.drawX, this.drawY, this.width, this.height); this.checkHitEnemy(); if (this.drawX > gameWidth) this.recycle();};Bullet.prototype.fire = function(startX, startY) { this.drawX = startX; this.drawY = startY;};Bullet.prototype.checkHitEnemy = function() { for (var i = 0; i < enemies.length; i++) { if (this.drawX >= enemies[i].drawX && this.drawX <= enemies[i].drawX + enemies[i].width && this.drawY >= enemies[i].drawY && this.drawY <= enemies[i].drawY + enemies[i].height) { this.explosion.drawX = enemies[i].drawX - (this.explosion.width / 2); this.explosion.drawY = enemies[i].drawY; this.explosion.hasHit = true; this.recycle(); enemies[i].recycleEnemy(); } }};Bullet.prototype.recycle = function() { this.drawX = -20;};// end of bullet functions// explosion functionsfunction Explosion() { this.srcX = 728; this.srcY = 520; this.drawX = 0; this.drawY = 0; this.width = 50; this.height = 50; this.hasHit = false; this.currentFrame = 0; this.totalFrames = 10;}Explosion.prototype.draw = function() { if (this.currentFrame <= this.totalFrames) { ctxJet.drawImage(imgSprite, this.srcX, this.srcY, this.width, this.height, this.drawX, this.drawY, this.width, this.height); this.currentFrame++; } else { this.hasHit = false; this.currentFrame = 0; }};// end of explosion functions// enemy functionsfunction Enemy() { this.srcX = 0; this.srcY = 559; this.width = 100; this.height = 40; this.speed = 2; this.drawX = Math.floor(Math.random() * 1000) + gameWidth; this.drawY = Math.floor(Math.random() * 360);}Enemy.prototype.draw = function() { this.drawX -= this.speed; ctxEnemy.drawImage(imgSprite, this.srcX, this.srcY, this.width, this.height, this.drawX, this.drawY, this.width, this.height); this.checkEscaped();};Enemy.prototype.checkEscaped = function() { if (this.drawX + this.width <= 0) { this.recycleEnemy(); }};Enemy.prototype.recycleEnemy = function() { this.drawX = Math.floor(Math.random() * 1000) + gameWidth; this.drawY = Math.floor(Math.random() * 360);};Any help would be gladly appreciated!!
  10. I would look into a using sprite sheet. Nice game though!
  11. You've got a pretty nice game. Is it live? Can we see it?
  12. Instead of var bg = new Image();bg.src = "BG.jpg";//PLAYERvar playerShip = new Image();playerShip.src = "playerShip.png"; try this out. It's good coding skills. var imgSprite = new Image();imgSprite.src = 'sprite.png';imgSprite.addEventListener('load', init, false);Thanks for sharing your code with everyone, it gave me some ideas for the shoot sounds.
  13. Check out gyrostorms on YouTube. I am following his tutorials on how to make an game. Does the game work? I wouldn't use setInterval either...