HTML Code
<![CDATA[
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Snake Game</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body >
<div class="div">
<h1>Play Snake Game</h1>
<nav>
<ul>
<a href="index.html"><li class="active">Snake Game</li></a>
<a href="about.html"><li>Snake Game Code</li></a>
</ul>
</nav>
</div>
<div id="msg"></div>
<center><h3 id="h3"></h3></center>
<center><canvas id="playArea" width="550" height="400"></canvas></center>
<center><button id="btn">Start game</button></center>
<center>
<footer>
© LeonNura
</footer>
</center>
<script src="js/jquery.js"></script>
<script src="js/main.js"></script>
</body>
</html>
]]>
CSS Code
<![CDATA[
@import url('https://fonts.googleapis.com/css?family=Chakra+Petch');
canvas
{
border: 10px ridge #0C7F7F;
display: none;
}
html
{
height: 100%;
}
h1
{
font-size:50px;
text-align: center;
margin: 0;
padding-bottom: 25px;
color: black;
font-family: 'Chakra Petch', sans-serif;
}
#h3
{
font-family: 'Chakra Petch', sans-serif;
color: black;
}
#butoni1
{
background-color: #31D0D0;
color: white;
padding-right: 30px;
padding-left: 30px;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 1000px;
border-style: black;
outline: none;
}
#btn
{
background-color: #31D0D0;
color: white;
padding-right: 30px;
padding-left: 30px;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 1000px;
border-style: black;
outline: none;
}
img
{
width: 290px;
height: 100px;
}
footer
{
font-size: 20px;
font-family: 'Chakra Petch', sans-serif;
color: black;
}
ul
{
list-style-type: none;
}
nav>ul>a
{
text-decoration: none;
color: black;
font-size: 20px;
font-family: 'Chakra Petch', sans-serif;
}
nav>ul>a>li:hover
{
text-decoration: none;
color: black;
font-size: 20px;
transition: 0.3s;
font-family: 'Chakra Petch', sans-serif;
}
.active
{
color: grey;
}
.div
{
display: flex;
justify-content: space-around;
}
.container
{
text-align: center;
color: black;
font-family: 'Chakra Petch', sans-serif;
font-weight: bold;
}
.h
{
font-weight: initial;
}
body
{
background-color: white;
font-family: 'Roboto', sans-serif;
margin: 0;
}
]]>
JavaScript Code
<![CDATA[
var level = 90;
var rect_w = 55;
var rect_h = 40;
var inc_score = 50;
var snake_color = '#0C7F7F';
var ctx;
var tn = [];
var x_dir = [-1, 0, 1, 0];
var y_dir = [0, -1, 0, 1];
var queue = [];
var frog = 4;
var map = [];
var MR = Math.random;
var X = 5 + (MR() * (rect_w - 10)) | 0;
var Y = 5 + (MR() * (rect_h - 10)) | 0;
var direction = MR() * 3 | 0;
var interval = 0;
var score = 0;
var sum = 0;
var easy = 0;
var i, dir;
var h3 = document.getElementById('h3');
var c = document.getElementById('playArea');
function play_game() {
ctx = c.getContext('2d');
for (i = 0; i < rect_w; i++) {
map[i] = [];
}
function rand_frog() {
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);
}
rand_frog();
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;
rand_frog();
frog++;
}
h3.innerHTML = "Your score: " + score;
ctx.fillRect(X * 10, Y * 10, 10, 10);
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 msg_score = document.getElementById("msg");
msg_score.innerHTML = "<center><input type='button'
id = 'butoni1' value='Play Again'
onclick='window.location.reload();'
/></center>";
document.getElementById("playArea").style.display = 'none';
window.clearInterval(interval);
}
}
set_game_speed();
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;
}
}
}
$('#btn').click (function() {
$('#playArea').show();
play_game();
$(this).hide();
});
]]>