Game effects
The implementation code is as follows:
<! DOCTYPE html>
<meta charset= "Utf-8"/>
<title> Snake Games </title>
<body>
<div id= "Gamebox" style= "Text-align:center;" >
<canvas id= "Game" width= "height=" style= "border:1px solid #666;" ></canvas>
<script type= "Text/javascript" >
var C=document.getelementbyid ("Game");
var Cxt=c.getcontext ("2d");
var width=15;
for (Var i=0;i<30;i++)
{
Cxt.strokestyle= "BLACK";
Cxt.beginpath ();
Cxt.moveto (0,i*width);
Cxt.lineto (450,i*width);
Cxt.closepath ();
Cxt.stroke ();//Draw the path 2 to the panel
}
for (Var i=0;i<30;i++)
{
Cxt.strokestyle= "BLACK";
Cxt.beginpath ();
Cxt.moveto (i*width,0);
Cxt.lineto (i*width,450);
Cxt.closepath ();
Cxt.stroke ();//Draw the path 2 to the panel
}
function Cell (x,y,f) {
This.x=x;
This.y=y;
This.f=f;
}
function food (x, y) {
This.x=x;
This.y=y;
}
var snake=[];
var length=6;
var speed=300;
var food=new food (15,15);
var food=new food (15,15);
for (Var i=0;i<length;i++) {
Snake[i]=new Cell (i,0,-1);
}
function Draw () {
Cxt.clearrect (0,0,450,450);
for (Var i=0;i<snake.length;i++) {
Cxt.fillstyle= "Royalblue"
Cxt.beginpath ();
if (i==snake.length-1) {
Cxt.fillstyle= "Darkgoldenrod";
//}
Cxt.rect (Snake[i].x*width,snake[i].y*width,width,width);
Cxt.closepath ();
Cxt.fill ();
Cxt.fillstyle= "Aqua"
Cxt.beginpath ();
Cxt.rect (Food.x*width,food.y*width,width,width);
Cxt.closepath ();
Cxt.fill ();
var head=snake[snake.length-1];
if (HEAD.X==FOOD.X&&HEAD.Y==FOOD.Y) {
Cxt.fillstyle= "Darkgoldenrod";
Cxt.beginpath ();
Cxt.rect (Food.x*width,food.y*width,width,width);
Cxt.closepath ();
Cxt.fill ();
var newcell=new Cell (HEAD.X,HEAD.Y,HEAD.F);
Switch (NEWCELL.F) {
Case 1:newcell.x--;break;
Case-1:newcell.x++;break;
Case 2:newcell.y--;break;
Case-2:newcell.y++;break;
}
Snake[snake.length]=newcell;
Randfood ();
}
for (Var i=0;i<snake.length;i++) {
Cxt.fillstyle= "Royalblue"
Cxt.beginpath ();
if (i==snake.length-1) {
Cxt.fillstyle= "Darkgoldenrod";
}
Cxt.rect (Snake[i].x*width,snake[i].y*width,width,width);
Cxt.closepath ();
Cxt.fill ();
}
}
function Randfood () {
Food.x=math.ceil (Math.random () *28) +1;
Food.y=math.ceil (Math.random () *28) +1;
for (Var i=0;i<snake.length;i++) {
if (FOOD.X==SNAKE[I].X&&FOOD.Y==SNAKE[I].Y) {
Randfood ();
Break
}
}
}
Draw ();
Document.onkeydown=function (e) {
var Code=e.keycode;
var head=snake[snake.length-1];
var newcell=new Cell (HEAD.X,HEAD.Y,HEAD.F);
Console.log ("key value" +code);
var direction=0;
Switch (code) {
Case 37:direction=1;break;
Case 38:direction=2;break;
Case 39:direction=-1;break;
Case 40:direction=-2;break;
}
var head=snake[snake.length-1];
if (direction!=0&& (head.f+direction)!=0) {
Movesnake (direction);
}
}
function Movesnake (direction) {
var head=snake[snake.length-1];
if (!direction) {
DIRECTION=HEAD.F;
}
var newsnake=[];
var head=snake[snake.length-1];
var newcell=new Cell (HEAD.X,HEAD.Y,HEAD.F);
for (Var i=1;i<snake.length;i++) {
Newsnake[i-1]=snake[i];
}
Newsnake[snake.length-1]=newcell;
Newcell.f=direction;
Head.f=direction;
switch (direction) {
Case 1:newcell.x--;break;
Case-1:newcell.x++;break;
Case 2:newcell.y--;break;
Case-2:newcell.y++;break;
}
Snake=newsnake;
Checkgameover ();
Draw ();
}
function Checkgameover () {
var head=snake[snake.length-1];
if (head.x>=30| | head.y>=30| | head.x<0| | head.y<0) {
Alert ("WALL-banging!!! ");
Window.location.reload ();
}
for (Var i=0;i<snake.length-1;i++) {
if (SNAKE[I].X==HEAD.X&&SNAKE[I].Y==HEAD.Y) {
Alert ("Too bloody! Bite yourself! ");
Window.location.reload ();
}
}
}
var autorun=setinterval (movesnake,speed);
</script>
</div>
</body>
Html,css,js, Snake web Game