From 43c64d4e611c88501ddaf01cfad1a5b8f96e26aa Mon Sep 17 00:00:00 2001 From: Tyler Williamson Date: Fri, 23 Mar 2018 17:26:30 -0400 Subject: [PATCH] Initial Commit --- README.md | 4 ++ asteroids.html | 12 ++++ scripts/Asteroid.js | 60 ++++++++++++++++++ scripts/Bullet.js | 30 +++++++++ scripts/Ship.js | 97 ++++++++++++++++++++++++++++ scripts/asteroids.js | 147 +++++++++++++++++++++++++++++++++++++++++++ 6 files changed, 350 insertions(+) create mode 100644 README.md create mode 100644 asteroids.html create mode 100644 scripts/Asteroid.js create mode 100644 scripts/Bullet.js create mode 100644 scripts/Ship.js create mode 100644 scripts/asteroids.js diff --git a/README.md b/README.md new file mode 100644 index 0000000..4f52d9a --- /dev/null +++ b/README.md @@ -0,0 +1,4 @@ +Asteroids +============= +A HTML5 and Javascript version of the arcade game Asteroids +# Asteroids diff --git a/asteroids.html b/asteroids.html new file mode 100644 index 0000000..195ab02 --- /dev/null +++ b/asteroids.html @@ -0,0 +1,12 @@ + + + HTML5 Asteroids + + + + + + + + + \ No newline at end of file diff --git a/scripts/Asteroid.js b/scripts/Asteroid.js new file mode 100644 index 0000000..e75c299 --- /dev/null +++ b/scripts/Asteroid.js @@ -0,0 +1,60 @@ +var Asteroid = function(x, y, size, angle) { + AST_SPEED = 1 + Math.random() * .7; + this.SIZES = [7,13,26]; + + this.type = Math.floor(Math.random()*2); + this.size = size; + this.x = x; + this.y = y; + this.dx = AST_SPEED * Math.cos(angle); + this.dy = AST_SPEED * Math.sin(angle); + this.radius = this.SIZES[size]; +} + +Asteroid.prototype.draw = function(ctx) { + //TODO: if close to the edge, draw two asteroids + + + ctx.beginPath(); + //ctx.arc(this.x,this.y,this.SIZES[this.size],0,2 * Math.PI,true); + + arr = [[[-6,-1],[-1,-6],[3,-6],[6,-1],[6,2],[3,6],[0,6],[0,2],[-3,6],[-6,3],[-3,0],[-6,-1]], + [[-6,-3],[-3,-6],[-1,-5],[1,-5],[3,-6],[5,-3],[3,-1],[5,1],[5,3],[2,6],[-1,4],[-2,4],[-3,5],[-4,5],[-6,3],[-6,2],[-5,1],[-5,-1],[-6,-2],[-6,-3]]]; + //TODO: 3rd, fix 2nd + flag = 0; + for (i=0;i 100) this.flag = true; + + this.x += this.dx; + this.y += this.dy; + + this.x = (this.x + 800 ) % 800; + this.y = (this.y + 600 ) % 600; +} + +Bullet.prototype.draw = function (ctx) { + //TODO: if close to the edge, draw two ships + + ctx.beginPath(); //Centre + ctx.arc(this.x,this.y,1,0,2*Math.PI); + ctx.stroke(); +} \ No newline at end of file diff --git a/scripts/Ship.js b/scripts/Ship.js new file mode 100644 index 0000000..aa392cb --- /dev/null +++ b/scripts/Ship.js @@ -0,0 +1,97 @@ +var Ship = function () { + this.x = 400; + this.y = 300; + this.dx = 0; + this.dy = 0; + this.angle = 0; + + this.tri = [[0,0],[0,0],[0,0]]; + + this.MAX_SPEED = 4.5; + this.ACCEL = .08; + this.TURN_SPEED = .06; + this.SHIP_WIDTH = 4 * Math.PI / 5; + + this.tri[0] = [this.x + 15 * Math.cos(this.angle),this.y + 15 * Math.sin(this.angle)]; + this.tri[1] = [this.x + 10 * Math.cos(this.angle + this.SHIP_WIDTH), this.y + 10 * Math.sin(this.angle + this.SHIP_WIDTH)]; + this.tri[2] = [this.x + 10 * Math.cos(this.angle - this.SHIP_WIDTH), this.y + 10 * Math.sin(this.angle - this.SHIP_WIDTH)]; +}; + + +Ship.prototype.moveAndDraw = function (ctx) { + this.x += this.dx; + this.y += this.dy; + + this.x = (this.x + 800 ) % 800; + this.y = (this.y + 600 ) % 600; + + //TODO: add fire! + + this.tri[0] = [this.x + 15 * Math.cos(this.angle),this.y + 15 * Math.sin(this.angle)]; + this.tri[1] = [this.x + 10 * Math.cos(this.angle + this.SHIP_WIDTH), this.y + 10 * Math.sin(this.angle + this.SHIP_WIDTH)]; + this.tri[2] = [this.x + 10 * Math.cos(this.angle - this.SHIP_WIDTH), this.y + 10 * Math.sin(this.angle - this.SHIP_WIDTH)]; + + ctx.beginPath(); //Centre + //ctx.arc(this.x,this.y,1,0,2*Math.PI); + ctx.stroke(); + + ctx.beginPath(); + ctx.moveTo(this.x + 15 * Math.cos(this.angle + this.SHIP_WIDTH), this.y + 15 * Math.sin(this.angle + this.SHIP_WIDTH)); + + ctx.lineTo(this.tri[0][0], this.tri[0][1]); + + ctx.lineTo(this.x + 15 * Math.cos(this.angle - this.SHIP_WIDTH), this.y + 15 * Math.sin(this.angle - this.SHIP_WIDTH)); + ctx.moveTo(this.tri[1][0],this.tri[1][1]); + ctx.lineTo(this.tri[2][0],this.tri[2][1]); + ctx.stroke(); +}; + +Ship.prototype.turn = function(direction) { + if (direction) + this.angle += this.TURN_SPEED; + else + this.angle -= this.TURN_SPEED; +}; + +Ship.prototype.accelerate = function () { + this.dx += this.ACCEL * Math.cos(this.angle); + this.dy += this.ACCEL * Math.sin(this.angle); + + speed = Math.sqrt(this.dx * this.dx + this.dy * this.dy); + if (speed > this.MAX_SPEED) { + this.dx *= this.MAX_SPEED / speed; + this.dy *= this.MAX_SPEED / speed; + } +}; + +Ship.prototype.isCollision = function (x,y,r) { + var flag = false; + + for (var i=0;i<3;i++) { + var m = (this.tri[i][1] - this.tri[(i+1)%3][1])/(this.tri[i][0] - this.tri[(i+1)%3][0]); + var c = (m * this.tri[i][0]) - this.tri[i][1]; + + var xproj = ((x+m*y)+m*c)/(m*m+1); + var yproj = (m*(x+m*y)-c)/(m*m+1); + + var d = Math.pow(y - m * x + c,2) / (m*m + 1); //distance squared + if (d < (r * r) && + ((xproj > this.tri[i][0] && xproj < this.tri[(i+1)%3][0]) || (xproj < this.tri[i][0] && xproj > this.tri[(i+1)%3][0])) && + ((yproj > this.tri[i][1] && yproj < this.tri[(i+1)%3][1]) || (yproj < this.tri[i][1] && yproj > this.tri[(i+1)%3][1]))) { + flag = true; + break; + } + if (Math.pow(x - this.tri[i][0],2) + Math.pow(y - this.tri[i][1],2) < r * r) { + flag = true; + break; + } + } + return flag; +}; + +Ship.prototype.hide = function () { + this.x = -100; + this.y = -100; + this.dx = 0; + this.dy = 0; +} diff --git a/scripts/asteroids.js b/scripts/asteroids.js new file mode 100644 index 0000000..c4f7cf6 --- /dev/null +++ b/scripts/asteroids.js @@ -0,0 +1,147 @@ +/** + * + */ + +var Main = {}; + +Main.asteroids = new Array(); +Main.bullets = new Array(); +Main.ship = new Ship(); +Main.c; +Main.ctx; +Main.flag = new Array(false,false,false,false,0); +Main.alive = true; +Main.score = 0; + +Main.init = function () { + + c = document.getElementById("canvas"); + Main.ctx = c.getContext("2d"); + Main.ctx.strokeStyle="#FFFFFF"; + + window.addEventListener("keydown", Main.doMouseDown, false); + window.addEventListener("keyup", Main.doMouseUp, false); //TODO: change to canvas + + window.requestAnimationFrame(Main.doFrameEvents); +}; + +Main.doMouseDown = function (event) { + switch (event.keyCode) { + case 38: Main.flag[0] = true; break; //Up + case 37: Main.flag[1] = true; break; //Left + case 39: Main.flag[2] = true; break; //Right + case 32: Main.flag[3] = true; break; //Space + } +} + +Main.doMouseUp = function (event) { //TODO: rename + switch (event.keyCode) { + case 38: Main.flag[0] = false; break; //Up + case 37: Main.flag[1] = false; break; //Left + case 39: Main.flag[2] = false; break; //Right + case 32: Main.flag[3] = false; break; //Space + } +} + +Main.doFrameEvents = function () { //TODO: name it better + Main.newLevel(); + Main.move(); + Main.checkCollisions(); + Main.animate(); + + window.requestAnimationFrame(Main.doFrameEvents); +} + +Main.newLevel = function () { + if (Main.asteroids.length == 0) { + Main.asteroids = new Array( + new Asteroid(50,50,2,Math.random() * Math.PI * 2), + new Asteroid(50,250,2,Math.random() * Math.PI * 2), + new Asteroid(50,450,2,Math.random() * Math.PI * 2), + new Asteroid(50,50,2,Math.random() * Math.PI * 2), + new Asteroid(250,50,2,Math.random() * Math.PI * 2), + new Asteroid(450,50,2,Math.random() * Math.PI * 2) + ); + } + //TODO: this. +} + +Main.checkCollisions = function () { + for (var i=0;i 0) { + angle = Math.random() * Math.PI * 2; + Main.asteroids.push(new Asteroid(Main.asteroids[i].x,Main.asteroids[i].y,Main.asteroids[i].size-1,angle)); + Main.asteroids.push(new Asteroid(Main.asteroids[i].x,Main.asteroids[i].y,Main.asteroids[i].size-1,angle + Math.PI / 2)); + } + Main.asteroids.splice(i,1); + Main.bullets.splice(ii,1); + break; + } + } + } + for (var i=0;i 0) { + angle = Math.random() * Math.PI * 2; + Main.asteroids.push(new Asteroid(Main.asteroids[i].x,Main.asteroids[i].y,Main.asteroids[i].size-1,angle)); + Main.asteroids.push(new Asteroid(Main.asteroids[i].x,Main.asteroids[i].y,Main.asteroids[i].size-1,angle + Math.PI / 2)); + } + Main.asteroids.splice(i,1); + Main.alive = false; + Main.ship.hide(); + } + + } +} + +Main.move = function () { + if (Main.alive) { + if (Main.flag[4] == 15 || Main.flag[4] == 0) + Main.flag[4] = 0; + else + Main.flag[4]++; + + if (Main.flag[0]) Main.ship.accelerate(); + if (Main.flag[1]) Main.ship.turn(false); + if (Main.flag[2]) Main.ship.turn(true); + if (Main.flag[3] && Main.flag[4]==0) { + Main.bullets.push(new Bullet(Main.ship.x + 15 * Math.cos(Main.ship.angle),Main.ship.y + 15 * Math.sin(Main.ship.angle),Main.ship.angle)); + Main.flag[4] = 1; + } + } + + for (var i=0;i