Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,150,795 members, 7,810,072 topics. Date: Friday, 26 April 2024 at 08:01 PM

Create A Classic Snake Game Using HTML5 And Jquery - Programming - Nairaland

Nairaland Forum / Science/Technology / Programming / Create A Classic Snake Game Using HTML5 And Jquery (1122 Views)

Hi Guys! Created A Signup Form Using HTML5/CSS3. Source Code Available. / HTML5 A Programming Language Or Not / Tep By Step To Add Image On A Website Using HTML5 (2) (3) (4)

(1) (Reply)

Create A Classic Snake Game Using HTML5 And Jquery by skptricks: 5:16am On Dec 05, 2017
[url="http://www.skptricks.com/2017/12/html5-snake-game.html"]Create A Classic Snake Game Using HTML5 and JQuery[/url]

Today's Post we are going to share a code related to A Classic Snake Game. we have implemented this using HTML5 and JQuery.

html5-snake-game

Lets see the complete example of Snake Game :
game.html
<!DOCTYPE html>
<html>
<head>
<title> Snake Game </title>
<link rel="stylesheet" href="snake.css">
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<style>
#container {
margin: auto;
width: 600px;
}

#myCanvas {
background-color: #000000;
border: 3px red solid;

}

#gameover {
position : absolute;
top: 200px;
left: 600px;
font-size: 25px;
text-align: center;
color: #FFFFFF;
display: none;
}

#score {
width: 600px;
height: 100px;
margin: auto;
background-color: grey;
}

#current, #highest {
font-size : 25px;
color: black;
text-align: center;
}

a {
text-decoration: none;
color : #FFFFFF;
}

span {
color : #FFFFFF;
}
</style>

<script>
$(document).ready(function() {

var canvas = $("#myCanvas"wink[0];
var ctx = canvas.getContext("2d"wink;
var w = $("#myCanvas"wink.width();
var h = $("#myCanvas"wink.height();
var cw = 15;
var food;
var snake;
var d = "RIGHT";

var gameloop = setInterval(update, 100);

function update() {
if (d == "RIGHT"wink
snake.x = snake.x + 1;
else if (d == "LEFT"wink
snake.x = snake.x - 1;
else if (d == "UP"wink
snake.y = snake.y - 1;
else if (d == "DOWN"wink
snake.y = snake.y + 1;

check_borders();
check_food();
blank();
paint_cell(food.x, food.y, "grey"wink;
paint_cell(snake.x, snake.y, "green"wink;
}

function showGameOver() {

var current = $('#current').text();
$('#final').text(current);
$('#gameover').fadeIn();
}

function updateHighScore() {
var current = $("#current"wink.text();
var highest = $("#highest"wink.text();
if (parseInt(current) > parseInt(highest)) {
$('#highest').text(current)
}

}

function placeFood() {
food = {
x : Math.round(Math.random()*(w-cw)/cw),
y : Math.round(Math.random()*(h-cw)/cw)
}
}

function placeSnake() {
snake = {
x : Math.round(Math.random()*(w-cw)/cw),
y : Math.round(Math.random()*(h-cw)/cw)
}
}

function blank(){
//Paint The Canvas
ctx.fillStyle = "black";
ctx.fillRect(0, 0, w, h);
ctx.strokeStyle = "white";
ctx.strokeRect(0, 0, w, h);

}

function check_borders() {
if (snake.x < 0 || snake.x > (w-cw)/cw || snake.y < 0 || snake.y > (h-cw)/cw) {
clearInterval(gameloop);
showGameOver();
}
}

function paint_cell(x,y, color){
ctx.fillStyle=color;
ctx.fillRect(x*cw,y*cw,cw,cw);
ctx.strokeStyle="white";
ctx.strokeRect(x*cw,y*cw,cw,cw);
}

function check_food() {
if (food.x == snake.x && food.y == snake.y) {
var current = parseInt($('#current').text());
current += 1;
$('#current').text(current);
placeFood();
}


}

placeFood();
paint_cell(food.x, food.y, "grey"wink;
placeSnake();
paint_cell(snake.x, snake.y, "green"wink;

//Keyboard Controller
$(document).keydown(function(e){
//39: RIGHT
//37: LEFT
//38: UP
//40: DOWN
var key = e.which;
if(key == "37"wink {
snake.x -= 1;
d = "LEFT";
}
else if(key == "38"wink {
snake.y -= 1;
d = "UP";
}
else if(key == "39"wink {
snake.x += 1;
d = "RIGHT";
}
else if(key == "40"wink {
snake.y += 1;
d = "DOWN";
}

check_food();
blank();
color = "grey";
paint_cell(food.x, food.y);
color = "green";
paint_cell(snake.x, snake.y);

});

});
</script>
</head>
<body>
<div id="container">
<div id="gameover">
Game over!
<br>
Your score is <span id="final"></span>
<br>
<a onClick="window.location.reload()" href="#">Click To Play Again</a>
</div>
<canvas id="myCanvas" width="600" height="450">
Your browser does not support the canvas feature
</canvas>
<div id="score">
<div>Current Score:<span id="current">0</span>
</div>
<div>High Score:<span id="highest">3</span>
</div>
</div>
</div>



</body>
</html>

2 Likes

Re: Create A Classic Snake Game Using HTML5 And Jquery by Dawudski(m): 11:39am On Dec 05, 2017
Nice one bro... I will just try the code and see how it works.

1 Like

(1) (Reply)

[PHP] How Can I Use REQUIRE For A Footer That Exist In Another Folder? / Urgent: A Python Programmer Is Needed In Abuja / What Tech Do You Work With And Why?

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 19
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.