Untitled

mail@pastecode.io avatar
unknown
html
2 years ago
3.9 kB
0
Indexable
Never
<!DOCTYPE html>




<html lang="en">


<head>


<meta charset="utf-8" />


<title>Snake Game</title>


<style type="text/css">


body {text-align:center;}


canvas { border:7px dashed #4A4747 }


h1 { font-size:35px; text-align: center; margin: 0; padding-bottom: 25px; text-decoration: underline; font-family: Geneva; color: #0520A5;}


</style>


<script type="text/javascript">


function play_game()


{


var level = 160; // Game level, by decreasing will speed up


var rect_w = 45; // Width


var rect_h = 30; // Height


var inc_score = 50; // Score


var snake_color = "#0520A5"; // Snake Color


var ctx; // Canvas attributes


var tn = []; // temp directions storage


var x_dir = [-1, 0, 1, 0]; // position adjusments


var y_dir = [0, -1, 0, 1]; // position adjusments


var queue = [];


var frog = 1; // defalut food


var map = [];


var MR = Math.random;


var X = 5 + (MR() * (rect_w - 10))|0; // Calculate positions


var Y = 5 + (MR() * (rect_h - 10))|0; // Calculate positions


var direction = MR() * 3 | 0;


var interval = 0;


var score = 0;


var sum = 0, easy = 0;


var i, dir;


// getting play area


var c = document.getElementById('playArea');


ctx = c.getContext('2d');


// Map positions


for (i = 0; i < rect_w; i++)


{


map[i] = [];


}


// random placement of snake food


function random_snake()


{


var x, y;


do


{


x = MR() * rect_w|0;


y = MR() * rect_h|0;


}


while (map[x][y]);


map[x][y] = 1;


ctx.fillStyle = snake_color;


ctx.strokeRect(x * 10+1, y * 10+1, 8, 8);


}


// Default somewhere placement


random_snake();


function set_game_speed()


{


if (easy)


{


X = (X+rect_w)%rect_w;


Y = (Y+rect_h)%rect_h;


}


--inc_score;


if (tn.length)


{


dir = tn.pop();


if ((dir % 2) !== (direction % 2))


{


direction = dir;


}


}


if ((easy || (0 <= X && 0 <= Y && X < rect_w && Y < rect_h)) && 2 !== map[X][Y])


{


if (1 === map[X][Y])


{


score+= Math.max(5, inc_score);


inc_score = 50;


random_snake();


frog++;


}


//ctx.fillStyle("#ffffff");


ctx.fillRect(X * 10, Y * 10, 9, 9);


map[X][Y] = 2;


queue.unshift([X, Y]);


X+= x_dir[direction];


Y+= y_dir[direction];


if (frog < queue.length)


{


dir = queue.pop()


map[dir[0]][dir[1]] = 0;


ctx.clearRect(dir[0] * 10, dir[1] * 10, 10, 10);


}


}


else if (!tn.length)


{


var show_score = document.getElementById("show");


show_score.innerHTML = "You lose!<br /> <u>Your Score:</u> <b>"+score+"</b><br><br> Want to try again?<br><br><input type='button' value='Play Again' onclick='window.location.reload();' />";


document.getElementById("playArea").style.display = 'none';


window.clearInterval(interval);


}


}


interval = window.setInterval(set_game_speed, level);


document.onkeydown = function(e) {


var code = e.keyCode - 37;


if (0 <= code && code < 4 && code !== tn[0])


{


tn.unshift(code);


}


else if (-5 == code)


{


if (interval)


{


window.clearInterval(interval);


interval = 0;


}


else


{


interval = window.setInterval(set_game_speed, 60);


}


}


else


{


dir = sum + code;


if (dir == 44||dir==94||dir==126||dir==171) {


sum+= code


} else if (dir === 218) easy = 1;


}


}


}


</script>


</head>


<body onload="play_game()">


<h1>Play Snake Game</h1>


<div id="show"></div>


<canvas id="playArea" width="450" height="300">Sorry your browser does not support HTML5. Try using like Chrome or Firefox.</canvas>


</body>


</html>