You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
406 lines
11 KiB
406 lines
11 KiB
<script>
|
|
|
|
//5-25-17
|
|
//Jrtechs is the boss man
|
|
|
|
window.addEventListener("keydown", function(e)
|
|
{
|
|
// space and arrow keys
|
|
if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1)
|
|
{
|
|
e.preventDefault();
|
|
}
|
|
}, false);
|
|
|
|
window.onload = function()
|
|
{
|
|
var canvas = document.getElementById("canvas");
|
|
|
|
var c = canvas.getContext('2d');
|
|
|
|
c.fillStyle= "black";
|
|
|
|
c.fillRect(0,0, canvas.width, canvas.height);
|
|
};
|
|
|
|
//entire game
|
|
function playBF()
|
|
{
|
|
var animate = window.requestAnimationFrame ||
|
|
window.webkitRequestAnimationFrame ||
|
|
window.mozRequestAnimationFrame || function (callback)
|
|
{
|
|
window.setTimeout(callback, 1000 / 60)
|
|
};
|
|
|
|
var canvas = document.getElementById("canvas");
|
|
|
|
var width = 800;
|
|
|
|
var height = 800;
|
|
|
|
canvas.style.textAligh = 'center';
|
|
|
|
var context = canvas.getContext('2d');
|
|
|
|
var bullets = [];
|
|
|
|
var keysDown = {};
|
|
|
|
|
|
|
|
//player variables;
|
|
var score = 0;
|
|
var alive = true;
|
|
|
|
//usefull function
|
|
function getRandomIntInclusive(min, max)
|
|
{
|
|
min = Math.ceil(min);
|
|
max = Math.floor(max);
|
|
|
|
return Math.floor(Math.random() * (max - min + 1)) + min;
|
|
}
|
|
|
|
|
|
//objects
|
|
//
|
|
//bullet class
|
|
var Bullet = function(dir, x, y)
|
|
{
|
|
//console.log(dir + " " + x + " " + y);
|
|
|
|
this.dir = dir;
|
|
|
|
this.x = x;
|
|
|
|
this.y = y;
|
|
|
|
this.speed = 5;
|
|
|
|
this.width = 10;
|
|
this.height =10;
|
|
|
|
this.move = function()
|
|
{
|
|
|
|
//console.log("move");
|
|
this.x += this.speed * Math.sin(this.dir);
|
|
|
|
this.y += this.speed * Math.cos(this.dir);
|
|
}
|
|
|
|
this.render = function()
|
|
{
|
|
context.fillStyle = "rgba(255, 0, 0 , 1)"; //green
|
|
context.beginPath();
|
|
context.arc(this.x,this.y,this.width,0,2*Math.PI);
|
|
context.fill();
|
|
//console.log(this.x);
|
|
|
|
}
|
|
|
|
}
|
|
//array of bullets
|
|
|
|
|
|
//bullets[0] = new Bullet(Math.PI, 100, 100);
|
|
|
|
|
|
var Player = function(x,y)
|
|
{
|
|
this.x = width/2;
|
|
this.y = height/2;
|
|
|
|
this.width = 10;
|
|
this.height = 10;
|
|
|
|
this.speed = 4;
|
|
|
|
this.dir = Math.PI;
|
|
|
|
this.dirSpeed = 10;
|
|
|
|
|
|
this.render = function()
|
|
{
|
|
context.fillStyle = "rgba(255, 255, 255, 1)"; //white
|
|
context.fillRect(this.x, this.y, this.width, this.height);
|
|
}
|
|
|
|
this.move = function()
|
|
{
|
|
for (var key in keysDown)
|
|
{
|
|
var value = Number(key);
|
|
|
|
if(value == 37) //left
|
|
{
|
|
this.dir += this.dirSpeed * Math.PI / 360;
|
|
}
|
|
else if(value == 39)
|
|
{
|
|
this.dir -= this.dirSpeed * Math.PI / 360;
|
|
}
|
|
else if(value == 38) // up
|
|
{
|
|
this.x += this.speed * Math.sin(this.dir);
|
|
this.y += this.speed * Math.cos(this.dir);
|
|
}
|
|
else if(value == 40) //down
|
|
{
|
|
this.x -= this.speed * Math.sin(this.dir);
|
|
this.y -= this.speed * Math.cos(this.dir);
|
|
}
|
|
else if(value == 32) //shoot
|
|
{
|
|
this.shoot();
|
|
}
|
|
}
|
|
|
|
//collisions
|
|
for(i = 0; i < astroids.length; i++)
|
|
{
|
|
if(astroids[i] != -1)
|
|
{
|
|
bb = astroids[i];
|
|
//if(Math.abs(bb.x - p.x) <= bb.width)
|
|
if(p.x > bb.x && p.x < bb.x + bb.width ||
|
|
p.x + p.width < bb.x + bb.width && p.x + p.width
|
|
> bb.x)
|
|
{
|
|
if(p.y > bb.y && p.y < bb.y + bb.height ||
|
|
p.y + p.height < bb.y + bb.height &&
|
|
p.y + p.height > bb.y)
|
|
{
|
|
alive = false;
|
|
bb = -1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
if(this.x < 0)
|
|
this.x += this.speed;
|
|
else if(this.x > width- this.width)
|
|
this.x -= this.speed;
|
|
|
|
if(this.y < 0)
|
|
this.y += this.speed;
|
|
else if(this.y > height)
|
|
this.y -= this.speed;
|
|
}
|
|
|
|
this.shoot = function()
|
|
{
|
|
var dimmed = false;
|
|
|
|
for(i = 0; i> bullets.length; i++)
|
|
{
|
|
if(bullets[i] == -1)
|
|
{
|
|
dimmed = true;
|
|
bullets[i] = new Bullet(this.dir, this.x, this.y);
|
|
}
|
|
}
|
|
if(dimmed == false)
|
|
bullets.push(new Bullet(this.dir, this.x, this.y));
|
|
}
|
|
}
|
|
//player object
|
|
var p = new Player(350, 850);
|
|
|
|
//object that falls from the sky
|
|
var Astroid = function(size)
|
|
{
|
|
|
|
this.width = 15;
|
|
this.height = 15;
|
|
|
|
this.dir = 2 * Math.PI * Math.random()
|
|
|
|
this.size = size;
|
|
|
|
var temp = getRandomIntInclusive(0, width);
|
|
var temp2 = getRandomIntInclusive(1, 4);
|
|
|
|
if(temp2 == 1)
|
|
{
|
|
this.x = temp;
|
|
this.y = 0;
|
|
}
|
|
else if(temp2 == 2)
|
|
{
|
|
this.x = width;
|
|
this.y = temp;
|
|
}
|
|
else if(temp2 == 3)
|
|
{
|
|
this.y = height;
|
|
this.x = temp;
|
|
}
|
|
else
|
|
{
|
|
this.y = temp;
|
|
this.x = 0;
|
|
}
|
|
|
|
this.speed = 2;
|
|
|
|
this.render = function()
|
|
{
|
|
context.fillStyle = "rgba(255, 255, 255 , 1)"; //green
|
|
context.beginPath();
|
|
context.arc(this.x,this.y,this.width,0,2*Math.PI);
|
|
context.fill();
|
|
|
|
}
|
|
|
|
this.move = function()
|
|
{
|
|
this.y += this.speed * Math.sin(this.dir);
|
|
this.x += this.speed *Math.cos(this.dir);
|
|
|
|
//collision
|
|
if(this.y> height)
|
|
{
|
|
//remove bamboo from array
|
|
score++;
|
|
return true;
|
|
}
|
|
}
|
|
}
|
|
var astroids = [];
|
|
|
|
//draws all the objects
|
|
var render = function()
|
|
{
|
|
context.fillStyle = "rgba(0, 0,0 ,1)";
|
|
context.fillRect(0,0, width, height);
|
|
|
|
context.fillStyle = "rgba(255, 255,255 ,1)";
|
|
context.font = "20px Georgia";
|
|
context.fillText("Score: " + score, 10, 25);
|
|
|
|
p.render();
|
|
for(i= 0; i < astroids.length; i++)
|
|
if(astroids[i] != -1)
|
|
astroids[i].render();
|
|
|
|
for (var i = bullets.length; i--; )
|
|
if(bullets[i] != -1)
|
|
bullets[i].render();
|
|
}
|
|
|
|
var update = function()
|
|
{
|
|
addAstroid();
|
|
p.move();
|
|
|
|
var halp = bullets.lenght
|
|
|
|
//console.log(halp);
|
|
//for (b = 0; b < bullets.lenght; b++)
|
|
//var b;
|
|
|
|
for (var i = bullets.length; i--; )
|
|
{
|
|
console.log("b");
|
|
if(bullets[i] != -1)
|
|
{
|
|
|
|
if(bullets[i].move())
|
|
{
|
|
b = -1;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
for (i = 0; i< astroids.length; i++)
|
|
if(astroids[i] != -1)
|
|
if(astroids[i].move())
|
|
astroids[i] = -1;
|
|
}
|
|
|
|
var count = 0;
|
|
var limit = 25;
|
|
var addAstroid = function()
|
|
{
|
|
count++;
|
|
|
|
if(count == limit)
|
|
{
|
|
count = 0;
|
|
|
|
var bnew = true;
|
|
|
|
for(i = 0; i < astroids.length; i++)
|
|
{
|
|
if(astroids[i] == -1)
|
|
{
|
|
astroids[i] = new Astroid();
|
|
bnew = false;
|
|
}
|
|
}
|
|
|
|
if(bnew)
|
|
{
|
|
astroids.push(new Astroid());
|
|
}
|
|
|
|
if(limit > 10)
|
|
{
|
|
limit --;
|
|
}
|
|
}
|
|
}
|
|
|
|
var sent;
|
|
var tic = function()
|
|
{
|
|
//console.log('tic was called');
|
|
|
|
if(alive)
|
|
{
|
|
update();
|
|
render();
|
|
}
|
|
else
|
|
{
|
|
if(!sent)
|
|
{
|
|
context.fillStyle = "rgba(0, 0,0 ,1)";
|
|
context.fillRect(0,0, width, height);
|
|
|
|
context.fillStyle = "rgba(255, 255,255 ,1)";
|
|
context.font = "20px Georgia";
|
|
context.fillText("You died with a score of: " +
|
|
score, 250, 325);
|
|
}
|
|
}
|
|
animate(tic);
|
|
}
|
|
|
|
window.addEventListener("keydown", function (event)
|
|
{
|
|
if(event.keyCode >=37 && event.keyCode <=40)
|
|
{
|
|
p.facing = event.keyCode;
|
|
}
|
|
|
|
keysDown[event.keyCode] = true;
|
|
});
|
|
|
|
window.addEventListener("keyup", function (event)
|
|
{
|
|
delete keysDown[event.keyCode];
|
|
});
|
|
//tic();
|
|
animate(tic);
|
|
}
|
|
|
|
</script>
|
|
<div><canvas id="canvas" width="700" height="700"></canvas></div>
|
|
<div><input type="submit" name="play" value="Play Game" onclick="this.blur();
|
|
playBF()"/></div>
|