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.
376 lines
9.8 KiB
376 lines
9.8 KiB
<script>
|
|
window.onload = function()
|
|
{
|
|
var canvas = document.getElementById("canvas");
|
|
var c = canvas.getContext('2d');
|
|
c.fillStyle= "black";
|
|
c.fillRect(0,0,canvas.width,canvas.height);
|
|
};
|
|
function play()
|
|
{
|
|
|
|
var animate = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) {
|
|
window.setTimeout(callback, 1000 / 60)
|
|
};
|
|
var canvas = document.getElementById("canvas");
|
|
var width = 700;
|
|
var height = 700;
|
|
canvas.style.textAlign = 'center';
|
|
var context = canvas.getContext('2d');
|
|
var keysDown = {};
|
|
|
|
|
|
var score = 0;
|
|
var dead = false;
|
|
//player
|
|
var Player = function(x,y)
|
|
{
|
|
this.x = x;
|
|
this.y = y;
|
|
this.width = 25;
|
|
this.height = 25;
|
|
|
|
this.speed = 3;
|
|
|
|
this.facing = 40;
|
|
|
|
this.updateDirection = function(key)
|
|
{
|
|
facing = key;
|
|
}
|
|
|
|
this.render = function()
|
|
{
|
|
context.fillStyle = "rgba(0, 45, 160, 1)"; //green
|
|
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.x = this.x - this.speed;
|
|
}
|
|
else if (value == 39) //right
|
|
{
|
|
this.x = this.x + this.speed
|
|
}
|
|
else if(value == 38) //up
|
|
{
|
|
this.y = this.y - this.speed
|
|
}
|
|
else if(value == 40) //down
|
|
{
|
|
this.y = this.y + this.speed
|
|
}
|
|
else if(value == 32)
|
|
{
|
|
var added = false;
|
|
|
|
for(i = 0; i< bullets.length; i++)
|
|
{
|
|
if(bullets[i] == -1)
|
|
{
|
|
bullets[i] = new Bullet();
|
|
added = true;
|
|
break;
|
|
}
|
|
|
|
}
|
|
|
|
if(added == false)
|
|
{
|
|
bullets.push(new Bullet());
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
var p = new Player(350, 350);
|
|
|
|
|
|
//bullet
|
|
var Bullet = function()
|
|
{
|
|
this.x = p.x;
|
|
this.y = p.y;
|
|
this.width = 10;
|
|
this.height = 10;
|
|
|
|
this.speed = 4;
|
|
this.facing = p.facing;
|
|
|
|
|
|
this.move = function()
|
|
{
|
|
|
|
if (this.facing == 37) //left
|
|
{
|
|
this.x = this.x - this.speed;
|
|
}
|
|
else if (this.facing == 39) //right
|
|
{
|
|
this.x = this.x + this.speed
|
|
}
|
|
else if(this.facing == 38) //up
|
|
{
|
|
this.y = this.y - this.speed
|
|
}
|
|
else if(this.facing == 40) //down
|
|
{
|
|
this.y = this.y + this.speed
|
|
}
|
|
|
|
}
|
|
|
|
this.render = function()
|
|
{
|
|
context.fillStyle = "rgba(255, 0, 199, 1)"; //green
|
|
context.fillRect(this.x, this.y, this.width,this.height);
|
|
|
|
}
|
|
}
|
|
var bullets = [];
|
|
|
|
|
|
function getRandomIntInclusive(min, max) {
|
|
min = Math.ceil(min);
|
|
max = Math.floor(max);
|
|
return Math.floor(Math.random() * (max - min + 1)) + min;
|
|
}
|
|
|
|
//zombie
|
|
var Zombie = function(x,y)
|
|
{
|
|
this.x = x;
|
|
this.y = y;
|
|
this.width = 25;
|
|
this.height = 25;
|
|
this.speed = 3;
|
|
|
|
var side = getRandomIntInclusive(0,3);
|
|
var mid = getRandomIntInclusive(0,700);
|
|
if(side === 1)
|
|
{
|
|
this.x = mid;
|
|
this.y = 0;
|
|
}
|
|
else if(side === 2)
|
|
{
|
|
this.x = 700;
|
|
this.y = mid;
|
|
}
|
|
else if(side === 3)
|
|
{
|
|
this.y = 700;
|
|
this.x = mid;
|
|
}
|
|
else
|
|
{
|
|
this.x = 0;
|
|
this.y = mid;
|
|
}
|
|
|
|
this.render = function()
|
|
{
|
|
context.fillStyle = "rgba(0, 160, 0, 1)"; //green
|
|
context.fillRect(this.x, this.y, this.width,this.height);
|
|
}
|
|
|
|
this.move = function()
|
|
{
|
|
if(this.x > p.x + this.speed)
|
|
this.x -= this.speed;
|
|
else if(this.x + this.speed < p.x )
|
|
this.x += this.speed;
|
|
|
|
|
|
if(this.y > p.y + this.speed)
|
|
this.y -= this.speed;
|
|
else if(this.y + this.speed < p.y )
|
|
this.y += this.speed;
|
|
}
|
|
}
|
|
var zombies = [];
|
|
zombies.push(new Zombie());
|
|
|
|
|
|
var render = function()
|
|
{
|
|
context.fillStyle = "#000000";
|
|
context.fillRect(0, 0, width, height);
|
|
|
|
|
|
context.fillStyle = "rgba(255, 255, 255, 1)";
|
|
context.font= "20px Georgia";
|
|
context.fillText("Score: " + score,10,25);
|
|
for(i = 0; i< zombies.length; i++)
|
|
{
|
|
if(zombies[i] != -1)
|
|
{
|
|
zombies[i].render();
|
|
}
|
|
|
|
|
|
}
|
|
for(i = 0; i< bullets.length; i++)
|
|
{
|
|
if(bullets[i] != -1)
|
|
{
|
|
bullets[i].render();
|
|
}
|
|
|
|
}
|
|
|
|
p.render();
|
|
}
|
|
|
|
var update = function()
|
|
{
|
|
addZombie();
|
|
p.move();
|
|
|
|
for(i = 0; i< zombies.length; i++)
|
|
{
|
|
|
|
for(z = 0;z < bullets.length; z++)
|
|
{
|
|
if(zombies[i] != -1 && bullets[z] != -1)
|
|
{
|
|
if(Math.abs(zombies[i].x - bullets[z].x) < 25 && Math.abs(zombies[i].y - bullets[z].y) < 25)
|
|
{
|
|
score++;
|
|
zombies[i] = -1;
|
|
bullets[z] = -1;
|
|
}
|
|
}
|
|
}
|
|
|
|
if(zombies[i] != -1)
|
|
{
|
|
zombies[i].move();
|
|
}
|
|
|
|
}
|
|
for(i = 0; i< bullets.length; i++)
|
|
{
|
|
//checks to see if goes out of bounds
|
|
if(bullets[i].x < 0 || bullets[i].y < 0 || bullets[i].x > 700 || bullets[i].y > 700)
|
|
{
|
|
bullets[i] = -1;
|
|
}
|
|
|
|
if(bullets[i] != -1)
|
|
{
|
|
|
|
bullets[i].move();
|
|
}
|
|
|
|
}
|
|
|
|
for(i=0; i<zombies.length; i++)
|
|
{
|
|
if(zombies[i] != -1 && Math.abs(p.x - zombies[i].x) < 25 && Math.abs(p.y - zombies[i].y) < 25)
|
|
{
|
|
dead = true;
|
|
}
|
|
}
|
|
|
|
}
|
|
var counter2 = 0;
|
|
var counter = 0;
|
|
var rate = 180;
|
|
var addZombie = function()
|
|
{
|
|
counter2++;
|
|
counter++;
|
|
var added = false;
|
|
if(counter >= rate)
|
|
{
|
|
for(i = 0; i< zombies.length; i++)
|
|
{
|
|
if(zombies[i] == -1)
|
|
{
|
|
zombies[i] = new Zombie();
|
|
added = true;
|
|
break;
|
|
}
|
|
|
|
}
|
|
|
|
if(added == false)
|
|
{
|
|
zombies.push(new Zombie());
|
|
}
|
|
|
|
counter = 0;
|
|
}
|
|
if(counter2 >= 60)
|
|
{
|
|
if(rate > 30)
|
|
{
|
|
rate = rate -5;
|
|
}
|
|
counter2 = 0;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
var tic = function()
|
|
{
|
|
if(dead)
|
|
{
|
|
context.fillStyle = "#000000";
|
|
context.fillRect(0, 0, width, height);
|
|
|
|
|
|
|
|
context.fillStyle = "rgba(255, 255, 255, 1)"; //green
|
|
context.font= "20px Georgia";
|
|
context.fillText("You died with a score of " + score,200,340);
|
|
|
|
}
|
|
else
|
|
{
|
|
update();
|
|
render()
|
|
}
|
|
|
|
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];
|
|
});
|
|
animate(tic);
|
|
|
|
}
|
|
|
|
|
|
|
|
</script>
|
|
|
|
<div><input type="submit" name="play" value="Play Game" onclick="this.blur();play()"/></div>
|
|
<div><canvas id="canvas" width="700" height="700"></canvas></div>
|