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.
 
 
 
 
 
 

391 lines
9.4 KiB

<script>
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("canvasZP");
var c = canvas.getContext('2d');
c.fillStyle= "black";
c.fillRect(0,0,canvas.width,canvas.height);
};
function playZP()
{
var animate = window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame || function (callback)
{
window.setTimeout(callback, 1000 / 60)
};
var canvas = document.getElementById("canvasZP");
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 sent = false;
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);
if(!sent)
{
document.body.innerHTML += '<form id="dynForm" ' +
'action="insertScore.php" method="post">' +
'<input type="hidden" name="game_new_score" ' +
'value=true><input type="hidden" name="game" value=2>' +
'<input type="hidden" name="user_id_score" value=' +
'<?php echo $_SESSION['user_id']; ?>><input ' +
'type="hidden" name="score_validate" value=' + score + '>' +
'</form>';
document.getElementById("dynForm").submit();
sent = !sent;
}
}
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><canvas id="canvasZP" width="700" height="700"></canvas></div>
<div><input type="submit" name="play" value="Play Game" onclick="
this.blur();playZP()"/></div>