Home >Web Front-end >H5 Tutorial >[HTML5 Code Art] Snake game with 17 lines of code

[HTML5 Code Art] Snake game with 17 lines of code

黄舟Original: 2017-03-02 13:19:352338browse

A greedy snake game

javascrpt valid code 17 lines
If you add the html code, there are 25 lines in total
Run method chrome or firefox
Test connection
http://lufylegend.com/html5/lufylegend/tcs.html

Complete The code is as follows

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="240" height="240" 
style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var ctx=document.getElementById("myCanvas").getContext("2d"),r = [{x:10,y:9},{x:10,y:8}],co=40,e=null;
ctx.shadowBlur=20,ctx.shadowColor="black";
setInterval(function(){
if(check(r[0],0) || r[0].x < 0 || r[0].x >= 24 || r[0].y < 0 || r[0].y >= 24)return;
e!=null&&((co==40&&r[0].x==e.x&&r[0].y+1==e.y)||(co==38&&r[0].x==e.x&&r[0].y-1==e.y)||
(co==37&&r[0].x-1==e.x&&r[0].y==e.y)||(co==39&&r[0].x+1==e.x&&r[0].y==e.y))?(r.unshift(e),e=null,r.unshift(r.pop())):
(r.unshift(r.pop()));
(co==40 || co==38)?(r[0].x=r[1].x,r[0].y=r[1].y+(co==40?1:-1)):(r[0].x=r[1].x+(co==39?1:-1),r[0].y=r[1].y);
ctx.clearRect(0,0,240,240);
if(e)ctx.fillRect(e.x*10,e.y*10,10,10);
for(var i=0;i<r.length;i++)ctx.fillRect(r[i].x*10,r[i].y*10,10,10);
while(e==null || check(e))e={y:(Math.random()*24 >>>0),x:(Math.random()*24 >>>0)};
if(check(r[0],0) || r[0].x < 0 || r[0].x >= 24 || r[0].y < 0 || r[0].y >= 24)alert("game over\nYou get ["+(r.length-2)+"]");
},100);
document.onkeyup = function(event){co=event.keyCode>=37 && event.keyCode<=40 && (Math.abs(event.keyCode-co) != 2)?event.keyCode:co;}
function check(e,j){
for(var i=0;i<r.length;i++)if(j!=i && r[i].x==e.x && r[i].y==e.y)return true;
return false;
}
</script>
</body>
</html>

A few friends want to comment, I added a simple comment description, see below

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="240" height="240" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
<script>
//r数组表示蛇 ； co表示蛇前进的方向，默认向下 ； e表示食物
var ctx=document.getElementById("myCanvas").getContext("2d"),r = [{x:10,y:9},{x:10,y:8}],co=40,e=null;
//给蛇加上阴影效果
ctx.shadowBlur=20,ctx.shadowColor="black";
//循环，间隔为100毫秒
setInterval(function(){
//游戏是否已经结束
if(check(r[0],0) || r[0].x < 0 || r[0].x >= 24 || r[0].y < 0 || r[0].y >= 24)return;
//如果有食物，则根据蛇前进的方向判断是否吃到了食物，并且将蛇数组中最后一个元素换到首部
e!=null&&((co==40&&r[0].x==e.x&&r[0].y+1==e.y)||(co==38&&r[0].x==e.x&&r[0].y-1==e.y)||(co==37&&r[0].x-1==e.x&&r[0].y==e.y)||
(co==39&&r[0].x+1==e.x&&r[0].y==e.y))?(r.unshift(e),e=null,r.unshift(r.pop())):(r.unshift(r.pop()));
//根据方向，重新设定蛇数组首元素的坐标，从而进行移动
(co==40 || co==38)?(r[0].x=r[1].x,r[0].y=r[1].y+(co==40?1:-1)):(r[0].x=r[1].x+(co==39?1:-1),r[0].y=r[1].y);
//清空屏幕
ctx.clearRect(0,0,240,240);
//如果有食物，则绘制食物
if(e)ctx.fillRect(e.x*10,e.y*10,10,10);
//绘制蛇
for(var i=0;i<r.length;i++)ctx.fillRect(r[i].x*10,r[i].y*10,10,10);
//如果没有食物，则在随机位置上加入一粒食物
while(e==null || check(e))e={y:(Math.random()*24 >>>0),x:(Math.random()*24 >>>0)};
//判断游戏是否结束
if(check(r[0],0) || r[0].x < 0 || r[0].x >= 24 || r[0].y < 0 || r[0].y >= 24)alert("game over\nYou get ["+(r.length-2)+"]");
},100);
//加入键盘事件，用方向键来控制蛇前进的方向
document.onkeyup = function(event){co=event.keyCode>=37 && event.keyCode<=40 && (Math.abs(event.keyCode-co) != 2)?event.keyCode:co;}
//判断指定位置是否与蛇重叠
function check(e,j){
for(var i=0;i<r.length;i++)if(j!=i && r[i].x==e.x && r[i].y==e.y)return true;
return false;
}
</script>
</body>
</html>

Since some friends feel that the code is difficult to read, here is another one with format adjustment The following code corresponds to the same function of each part of the above code, but the writing method is different

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="240" height="240" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var ctx=document.getElementById("myCanvas").getContext("2d");
var r = [{x:10,y:9},{x:10,y:8}];
var co=40;
var e=null;
ctx.shadowBlur=20;
ctx.shadowColor="black";
function onframe(){
	if(check(r[0],0) || r[0].x < 0 || r[0].x >= 24 || r[0].y < 0 || r[0].y >= 24)return;
	if(e){
		if((co==40&&r[0].x==e.x&&r[0].y+1==e.y)
			||(co==38&&r[0].x==e.x&&r[0].y-1==e.y)
			||(co==37&&r[0].x-1==e.x&&r[0].y==e.y)
			||(co==39&&r[0].x+1==e.x&&r[0].y==e.y)){
			r.unshift(e);
			e=null;
		}
	}
	r.unshift(r.pop());
	switch(co){
		case 37:
			r[0].x = r[1].x - 1;
			r[0].y = r[1].y;
			break;
		case 38:
			r[0].x = r[1].x;
			r[0].y = r[1].y - 1;
			break;
		case 39:
			r[0].x = r[1].x + 1;
			r[0].y = r[1].y;
			break;
		case 40:
			r[0].x = r[1].x;
			r[0].y = r[1].y + 1;
			break;
	}
	ctx.clearRect(0,0,240,240);
	if(e)ctx.fillRect(e.x*10,e.y*10,10,10);
	for(var i=0;i<r.length;i++){
		ctx.fillRect(r[i].x*10,r[i].y*10,10,10);
	}
	while(e==null || check(e)){
		e={y:(Math.random()*24 >>>0),x:(Math.random()*24 >>>0)};
	}
	if(check(r[0],0) || r[0].x < 0 || r[0].x >= 24 || r[0].y < 0 || r[0].y >= 24){
		alert("game over\nYou get ["+(r.length-2)+"]");
	}
}
setInterval(onframe,100);
document.onkeyup = function(event){
	if(event.keyCode>=37 && event.keyCode<=40 && (Math.abs(event.keyCode-co) != 2)){
		co = event.keyCode;
	}
}
function check(e,j){
	for(var i=0;i<r.length;i++){
		if(j!=i && r[i].x==e.x && r[i].y==e.y)return true;
	}
	return false;
}
</script>
</body>
</html>

The above is the content of the 17-line Snake game of [HTML5 Code Art]. For more related content, please Follow the PHP Chinese website (www.php.cn)!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：HTML5 open source game engine lufylegend1.6.0 releasedNext article：HTML5 open source game engine lufylegend1.6.0 released

See more

[HTML5 Code Art] Snake game with 17 lines of code

Related articles