TylerWilliamson/Asteroids
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Initial Commit

Browse Source
This commit is contained in:
Tyler Williamson 2018-03-23 17:26:30 -04:00
commit 43c64d4e61
6 changed files with 350 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md Normal file
View File

@ -0,0 +1,4 @@
Asteroids
=============
A HTML5 and Javascript version of the arcade game Asteroids
# Asteroids

12
asteroids.html Normal file
View File

@ -0,0 +1,12 @@
<html>
<head>
<title>HTML5 Asteroids</title>
<script type="text/javascript" src="scripts/Asteroid.js"></script>
<script type="text/javascript" src="scripts/Ship.js"></script>
<script type="text/javascript" src="scripts/Bullet.js"></script>
<script type="text/javascript" src="scripts/asteroids.js"></script>
</head>
<body>
<canvas id="canvas" height="600" width="800" style="border: 1px solid black;background-color: black"></canvas>
</body>
</html>

60
scripts/Asteroid.js Normal file
View File

@ -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<arr[this.type].length;i++) {
if (flag == 0) {
flag = 1;
ctx.moveTo(this.x + arr[this.type][i][0] * Math.pow(2,this.size), this.y + arr[this.type][i][1] * Math.pow(2,this.size))
} else {
ctx.lineTo(this.x + arr[this.type][i][0] * Math.pow(2,this.size), this.y + arr[this.type][i][1] * Math.pow(2,this.size))
}
}
/*ctx.moveTo(this.x - 6 * this.size, this.y - 1 * this.size);
ctx.lineTo(this.x - 1 * this.size, this.y - 6 * this.size);
ctx.lineTo(this.x + 3 * this.size, this.y - 6 * this.size);
ctx.lineTo(this.x + 6 * this.size, this.y - 1 * this.size);
ctx.lineTo(this.x + 6 * this.size, this.y + 2 * this.size);
ctx.lineTo(this.x + 3 * this.size, this.y + 6 * this.size);
ctx.lineTo(this.x + 0 * this.size, this.y + 6 * this.size);
ctx.lineTo(this.x + 0 * this.size, this.y + 2 * this.size);
ctx.lineTo(this.x - 3 * this.size, this.y + 6 * this.size);
ctx.lineTo(this.x - 6 * this.size, this.y + 3 * this.size);
ctx.lineTo(this.x - 3 * this.size, this.y + 0 * this.size);
ctx.lineTo(this.x - 6 * this.size, this.y - 1 * this.size); //TODO: Arrays + loop*/
ctx.stroke();
}
Asteroid.prototype.move = function() {
this.x += this.dx;
this.y += this.dy;
this.x = (this.x + 800) % 800;
this.y = (this.y + 600) % 600;
}
Asteroid.prototype.isCollision = function(x,y) {
return (Math.abs(this.x - x) < this.SIZES[this.size]
&& Math.abs(this.y - y) < this.SIZES[this.size]);
}

30
scripts/Bullet.js Normal file
View File

@ -0,0 +1,30 @@
var Bullet = function (x,y,angle) {
BULLET_SPEED = 7;
this.x = x;
this.y = y;
this.dx = Math.cos(angle)*BULLET_SPEED;
this.dy = Math.sin(angle)*BULLET_SPEED;
this.distance = 0;
this.flag = false;
}
Bullet.prototype.move = function () {
this.distance++;
if (this.distance > 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();
}

97
scripts/Ship.js Normal file
View File

@ -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;
}

147
scripts/asteroids.js Normal file
View File

@ -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<Main.asteroids.length;i++) {
for (var ii=0;ii<Main.bullets.length;ii++) {
if (Main.asteroids[i].isCollision(Main.bullets[ii].x,Main.bullets[ii].y)) {
Main.score += (3 - Main.asteroids[i].size) * 250;
if (Main.asteroids[i].size > 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<Main.asteroids.length;i++) {
if (Main.ship.isCollision(Main.asteroids[i].x,Main.asteroids[i].y,Main.asteroids[i].radius)) {
//if (Main.asteroids[i].isCollision(Main.ship.x,Main.ship.y)) {
if (Main.asteroids[i].size > 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<Main.asteroids.length;i++)
Main.asteroids[i].move();
for (var i=0;i<Main.bullets.length;i++) {
Main.bullets[i].move();
if (Main.bullets[i].flag) {Main.bullets.splice(i,1);}
}
}
Main.animate = function () {
Main.ctx.clearRect(0, 0, c.width, c.height);
if (Main.alive) Main.ship.moveAndDraw(Main.ctx);
for (var i=0;i<Main.asteroids.length;i++)
Main.asteroids[i].draw(Main.ctx);
for (var i=0;i<Main.bullets.length;i++) {
Main.bullets[i].draw(Main.ctx);
if (Main.bullets[i].flag) {Main.bullets.splice(i,1);}
}
Main.ctx.font = "30px Lucida Console";
var count = 10 - Math.log10(Main.score+1);
var s = "";
for (var i=0;i<count;i++) s+="0";
Main.ctx.strokeText(s+Main.score,0,50);
}
window.onload = Main.init;