Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- // Get the 2D context from the canvas in
- //our HTML page
- var canvas = document.getElementById("gameCanvas");
- var context = canvas.getContext("2d");
- // set up some event handlers to process keyboard input
- window.addEventListener('keydown', function(evt) { onKeyDown(evt); }, false);
- window.addEventListener('keyup', function(evt) { onKeyUp(evt); }, false);
- var SCREEN_WIDTH = canvas.width;
- var SCREEN_HEIGHT = canvas.height;
- var ASTEROID_SPEED = 0.8;
- var PLAYER_SPEED = 1;
- var PLAYER_TURN_SPEED = 0.04;
- var BULLET_SPEED = 1.5;
- //this will create the player object and assigns it some properties
- var player = {
- image: document.createElement("img"),
- x: SCREEN_WIDTH/2,
- y: SCREEN_HEIGHT/2,
- width: 93,
- height: 80,
- directionX: 0,
- directionY: 0,
- angularDirection: 0,
- rotation: 0
- };
- //players image here
- player.image.src = "ship.png";
- // key constants
- // Go here for a list of key codes:
- // https://developer.mozilla.org/en-US/docs/DOM/KeyboardEvent
- var KEY_SPACE = 32;
- var KEY_A = 65;
- var KEY_W = 87;
- var KEY_D = 68;
- var KEY_S = 83;
- //this creates the asteroid object and assigns it some properties
- var asteroid = {
- image: document.createElement("img"),
- x: 100,
- y: 100,
- width: 69,
- height: 75,
- directionX: 0,
- directionY: 0,
- isDead: false
- };
- //set the image
- asteroid.image.src = "rock_large.png";
- asteroid.directionX = 10;
- asteroid.directionY = 8;
- //normalize the velocity (make it equal to 1)
- var magnitude = Math.sqrt( (asteroid.directionX * asteroid.directionX) + (asteroid.directionY * asteroid.directionY) );
- if (magnitude != 0)
- {
- asteroid.directionx /= magnitude;
- asteroid.directionY /= magnitude;
- }
- // this creates the bullet object and assigns it some properties
- var bullet = {
- image: document.createElement("img"),
- x: player.x,
- y: player.y,
- width: 5,
- height: 5,
- velocityX: 0,
- velocityY: 0,
- isDead: true
- };
- // set the image for the asteroid to use
- bullet.image.src = "bullet.png";
- function playerShoot()
- {
- // we can only have 1 bullet at a time
- if( bullet.isDead == false )
- return;
- // start off with a velocity that shoots the bullet straight up
- var velX = 0;
- var velY = 1;
- // now rotate this vector acording to the ship's current rotation
- var s = Math.sin(player.rotation);
- var c = Math.cos(player.rotation);
- // for an explanation of this formula,
- // see http://en.wikipedia.org/wiki/Rotation_matrix
- var xVel = (velX * c) - (velY * s);
- var yVel = (velX * s) + (velY * c);
- // dont bother storing a direction and calculating the
- // velocity every frame, because it won't change.
- // Just store the pre-calculated velocity
- bullet.velocityX = xVel * BULLET_SPEED;
- bullet.velocityY = yVel * BULLET_SPEED;
- // don't forget to set the bullet's position
- bullet.x = player.x;
- bullet.y = player.y;
- // make the bullet alive
- bullet.isDead = false;
- function onKeyDown(event)
- {
- if(event.keyCode == KEY_W)
- {
- player.directionY = 1;
- }
- if(event.keyCode == KEY_S)
- {
- player.directionY = -1;
- }
- if(event.keyCode == KEY_A)
- {
- player.angularDirection = -1;
- }
- if(event.keyCode == KEY_D)
- {
- player.angularDirection = 1;
- }
- }
- function onKeyUp(event)
- {
- if(event.keyCode == KEY_W)
- {
- player.directionY = 0;
- }
- if(event.keyCode == KEY_S)
- {
- player.directionY = 0;
- }
- if(event.keyCode == KEY_A)
- {
- player.angularDirection = 0;
- }
- if(event.keyCode == KEY_D)
- {
- player.angularDirection = 0;
- }
- if(event.keyCode == KEY_SPACE)
- {
- playerShoot();
- }
- }
- // tests if two rectangles are intersecting.
- // Pass in the x,y coordinates, width and height of each rectangle.
- // Returns 'true' if the rectangles are intersecting
- function intersects(x1, y1, w1, h1, x2, y2, w2, h2)
- {
- if(y2 + h2 < y1 ||
- x2 + w2 < x1 ||
- x2 > x1 + w1 ||
- y2 > y1 + h1)
- {
- return false;
- }
- return true;
- }
- function run()
- {
- context.fillStyle = "#8a2be2";
- context.fillRect(0, 0, canvas.width, canvas.height);
- // update and draw the bullet
- // we want to do this first so that the plane is drawn on
- // top of the bullet
- if(bullet.isDead == false)
- {
- bullet.x += bullet.velocityX;
- bullet.y += bullet.velocityY;
- context.drawImage(bullet.image,
- bullet.x - bullet.width/2,
- bullet.y - bullet.height/2);
- if(asteroid.isDead == false)
- {
- var hit = intersects(
- bullet.x, bullet.y,
- bullet.width, bullet.height,
- asteroid.x, asteroid.y,
- asteroid.width, asteroid.height);
- if(hit == true)
- {
- bullet.isDead = true;
- asteroid.isDead = true;
- }
- }
- if(bullet.x < 0 || bullet.x > SCREEN_WIDTH ||
- bullet.y < 0 || bullet.y > SCREEN_HEIGHT)
- {
- bullet.isDead = true;
- }
- }
- //calculate sin and cos for the players current rotation
- var s = Math.sin(player.rotation);
- var c = Math.cos(player.rotation);
- // figure out what the player's velocity will be based on the current rotation
- // (so that if the ship is moving forward, then it will move forward according to its
- // rotation. Without this, the ship would just move up the screen when we pressed 'up',
- // regardless of which way it was rotated)
- // for an explanation of this formula, see http://en.wikipedia.org/wiki/Rotation_matrix
- var xDir = (player.directionX * c) - (player.directionY * s);
- var yDir = (player.directionX * s) + (player.directionY * c);
- var xVel = xDir * PLAYER_SPEED;
- var yVel = yDir * PLAYER_SPEED;
- player.x += xVel;
- player.y += yVel;
- player.rotation += player.angularDirection * PLAYER_TURN_SPEED;
- context.save();
- context.translate(player.X, player.Y);
- context.rotate(player.rotation);
- context.drawImage(player.image, -player.width/2, -player.height/2);
- context.restore();
- //update and draw asteroid
- var velocityX = asteroid.directionX * ASTEROID_SPEED;
- var velocityY = asteroid.directionY * ASTEROID_SPEED;
- asteroid.x += velocityX;
- asteroid.y += velocityY;
- context.drawImage(asteroid.image,
- asteroid.X - asteroid.width/2,
- asteroid.y - asteroid.height/2);
- }
- //-------------------- Don't modify anything below here
- // This code will set up the framework so that the 'run' function is
- // called 60 times per second. We have some options to fall back on
- // in case the browser doesn't support our preferred method.
- (function() {
- var onEachFrame;
- if (window.requestAnimationFrame) {
- onEachFrame = function(cb) {
- var _cb = function() { cb(); window.requestAnimationFrame(_cb); }
- _cb();
- };
- } else if (window.mozRequestAnimationFrame) {
- onEachFrame = function(cb) {
- var _cb = function() { cb();
- window.mozRequestAnimationFrame(_cb); }
- _cb();
- };
- } else {
- onEachFrame = function(cb) {
- setInterval(cb, 1000 / 60);
- }
- }
- window.onEachFrame = onEachFrame;
- })();
- window.onEachFrame(run);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement