Simple website with some JavaScript games.
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

<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>