Snake game using HTML5

Developer
Arkev
Size
3,114 Kb
Views
56,672
  1. Snake game using HTML5 Previews
  2. Snake game using HTML5 HTML Codes
  3. Snake game using HTML5 JS Codes

How do I make an snake game using html5?

Make a snake game using HTML5 canvas and Jquery. What is a snake game using html5? How do you make a snake game using html5? This script and codes were developed by Arkev on 10 August 2022, Wednesday.

Snake game using HTML5 Previews
IQ Test

Snake game using HTML5 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Snake game using HTML5</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
</head>
<body> <!-- Lets make a simple snake game -->
<canvas id="canvas" width="450" height="450"></canvas> <script src="js/index.js"></script>
</body>
</html>

Snake game using HTML5 - Script Codes JS Codes

$(document).ready(function(){	//Canvas stuff	var canvas = $("#canvas")[0];	var ctx = canvas.getContext("2d");	var w = $("#canvas").width();	var h = $("#canvas").height();	//Lets save the cell width in a variable for easy control	var cw = 10;	var d;	var food;	var score;	//Lets create the snake now	var snake_array; //an array of cells to make up the snake	function init()	{	d = "right"; //default direction	create_snake();	create_food(); //Now we can see the food particle	//finally lets display the score	score = 0;	//Lets move the snake now using a timer which will trigger the paint function	//every 60ms	if(typeof game_loop != "undefined") clearInterval(game_loop);	game_loop = setInterval(paint, 60);	}	init();	function create_snake()	{	var length = 5; //Length of the snake	snake_array = []; //Empty array to start with	for(var i = length-1; i>=0; i--)	{	//This will create a horizontal snake starting from the top left	snake_array.push({x: i, y:0});	}	}	//Lets create the food now	function create_food()	{	food = {	x: Math.round(Math.random()*(w-cw)/cw),	y: Math.round(Math.random()*(h-cw)/cw),	};	//This will create a cell with x/y between 0-44	//Because there are 45(450/10) positions accross the rows and columns	}	//Lets paint the snake now	function paint()	{	//To avoid the snake trail we need to paint the BG on every frame	//Lets paint the canvas now	ctx.fillStyle = "white";	ctx.fillRect(0, 0, w, h);	ctx.strokeStyle = "black";	ctx.strokeRect(0, 0, w, h);	//The movement code for the snake to come here.	//The logic is simple	//Pop out the tail cell and place it infront of the head cell	var nx = snake_array[0].x;	var ny = snake_array[0].y;	//These were the position of the head cell.	//We will increment it to get the new head position	//Lets add proper direction based movement now	if(d == "right") nx++;	else if(d == "left") nx--;	else if(d == "up") ny--;	else if(d == "down") ny++;	//Lets add the game over clauses now	//This will restart the game if the snake hits the wall	//Lets add the code for body collision	//Now if the head of the snake bumps into its body, the game will restart	if(nx == -1 || nx == w/cw || ny == -1 || ny == h/cw || check_collision(nx, ny, snake_array))	{	//restart game	init();	//Lets organize the code a bit now.	return;	}	//Lets write the code to make the snake eat the food	//The logic is simple	//If the new head position matches with that of the food,	//Create a new head instead of moving the tail	if(nx == food.x && ny == food.y)	{	var tail = {x: nx, y: ny};	score++;	//Create new food	create_food();	}	else	{	var tail = snake_array.pop(); //pops out the last cell	tail.x = nx; tail.y = ny;	}	//The snake can now eat the food.	snake_array.unshift(tail); //puts back the tail as the first cell	for(var i = 0; i < snake_array.length; i++)	{	var c = snake_array[i];	//Lets paint 10px wide cells	paint_cell(c.x, c.y);	}	//Lets paint the food	paint_cell(food.x, food.y);	//Lets paint the score	var score_text = "Score: " + score;	ctx.fillText(score_text, 5, h-5);	}	//Lets first create a generic function to paint cells	function paint_cell(x, y)	{	ctx.fillStyle = "blue";	ctx.fillRect(x*cw, y*cw, cw, cw);	ctx.strokeStyle = "white";	ctx.strokeRect(x*cw, y*cw, cw, cw);	}	function check_collision(x, y, array)	{	//This function will check if the provided x/y coordinates exist	//in an array of cells or not	for(var i = 0; i < array.length; i++)	{	if(array[i].x == x && array[i].y == y) return true;	}	return false;	}	//Lets add the keyboard controls now	$(document).keydown(function(e){	var key = e.which;	//We will add another clause to prevent reverse gear	if(key == "37" && d != "right") d = "left";	else if(key == "38" && d != "down") d = "up";	else if(key == "39" && d != "left") d = "right";	else if(key == "40" && d != "up") d = "down";	//The snake is now keyboard controllable	})
})
Snake game using HTML5 - Script Codes
Snake game using HTML5 - Script Codes
Home Page Home
Developer Arkev
Username arkev
Uploaded August 10, 2022
Rating 3
Size 3,114 Kb
Views 56,672
Do you need developer help for Snake game using HTML5?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Arkev (arkev) Script Codes
Name
Lightbox Gallery with Jquery and CSS3
3D font HTML5 CSS3
Encabezados persistentes
Pure CSS3 breadcrumb navigation
Easily create stunning animated charts with Chart.js
Page Preloading Effect
Fake Login page with jQuery
Leyenda de Tifis
CSS3 Pricing Table
Vertical accordion menu using jQuery and CSS3
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!