Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
180 lines (145 sloc) 3.44 KB
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i" rel="stylesheet">
<style>
#container {
margin: 200px auto;
max-width: 1000px;
}
#score-text {
display: inline-block;
}
h1 {
display: block;
text-align: center;
font-family: 'Roboto', sans-serif;
font-size: 30px;
color: #171717;
}
.text {
display: block;
}
#gc {
display:block;
margin: 0 auto;
}
.color {
color: red;
}
</style>
<meta charset = "UTF-8">
<title>The SnakeGame</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body bgcolor ="#e2e0e1">
<div id="container">
<div class="text"><h1>The score is: <div class="color" id="score-text"> </div></h1></div>
<canvas id="gc" width="400" height="400"></canvas>
<!-- Begin JavaScript -->
<script>
window.onload = function() {
canv = document.getElementById("gc");
// Graphic Buffer
ctx = canv.getContext("2d");
// Keyboard hooks
document.addEventListener("keydown",keyPush);
// Call game function 15 times every second (1000ms)
setInterval(game,1000/15);
setInterval(drawScore, 1000/15);
}
// player positions (x,y)
px=py=10;
gs=tc=20;
// apple position (x,y)
ax=ay=15;
xv=yv=0;
// trail array
trail = [];
tail = 5;
var score = 0;
// Begin function game()
function game() {
document.getElementById("score-text").innerHTML = score;
px = px + xv;
py = py + yv;
if(px < 0) {
px = tc-1;
}
if(px > tc-1) {
px = 0;
}
if(py < 0) {
py = tc -1;
}
if(py > tc-1) {
py = 0;
}
// Background canvas color
ctx.fillStyle = "#181818";
ctx.fillRect(0,0,canv.width,canv.height);
/*
for(var i = 0; i <= 400; i += 20) {
ctx.moveTo(i,0);
ctx.lineTo(i,400);
}
for(var j = 0; j <= 400; j += 20) {
ctx.moveTo(0,j);
ctx.lineTo(400,j);
}
ctx.strokeStyle = "gray";
ctx.stroke();
*/
// Snake color
ctx.fillStyle="#fff8db";
for(var i =0; i < trail.length; i++) {
ctx.fillRect(trail[i].x*gs, trail[i].y*gs, gs-2,gs-2);
// If you step on tail
if(trail[i].x == px && trail[i].y == py) {
tail = 5;
}
}
trail.push({x:px,y:py});
while(trail.length > tail) {
trail.shift();
}
// If eat token
if(ax==px && ay==py) {
tail++;
score++;
ax = Math.floor(Math.random()*tc);
ay = Math.floor(Math.random()*tc);
}
ctx.fillStyle ="#ba8f8e";
ctx.fillRect(ax*gs,ay*gs,gs-2,gs-2);
}
// close function game() bracket
// DrawScore function to display score
function drawScore() {
ctx.font = ' 15px Arial';
ctx.textAlign = 'center';
ctx. textBaseline = 'middle';
ctx.fillStyle = '#fff8db'; // a color name or by using rgb/rgba/hex values
ctx.fillText("Score : " + score, 39, 390); // text and position
}
function keyPush(evt) {
switch(evt.keyCode) {
case 37:
xv = -1; yv=0;
break;
case 38:
xv = 0; yv=-1;
break;
case 39:
xv = 1; yv=0;
break;
case 40:
xv = 0; yv=1;
break;
}
}
</script>
</div>
</body>
</html>
You can’t perform that action at this time.