Heim > Artikel > Web-Frontend > [HTML5 Code Art] Snake-Spiel mit 17 Codezeilen

[HTML5 Code Art] Snake-Spiel mit 17 Codezeilen

黄舟Original: 2017-03-02 13:19:352247Durchsuche

Ein kleines Schlangenspiel

gültiger Javascript-Code 17 Zeilen
Wenn Sie den HTML-Code hinzufügen, sind es 25 Zeilen insgesamt
Führen Sie die Methode Chrome oder Firefox aus
Testen Sie die Verbindung
http://lufylegend.com/html5/lufylegend/tcs.html

Vollständig Der Code lautet wie folgt

<!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>

Ein paar Freunde wollten einen Kommentar abgeben, ich habe eine einfache Kommentarbeschreibung hinzugefügt, siehe unten

<!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>

Da einige Freunde den Code schwer finden Lesen Sie, ich werde es unten bereitstellen. Ein formatangepasster Code entspricht den Funktionen jedes Teils des obigen Codes, aber die Schreibmethode ist unterschiedlich

<!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>

Das Obige ist der Inhalt der 17-zeiligen Schlange Spiel von [HTML5 Code Art] Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：HTML5-Open-Source-Spiele-Engine lufylegend1.6.0 veröffentlichtNächster Artikel：HTML5-Open-Source-Spiele-Engine lufylegend1.6.0 veröffentlicht

In Verbindung stehende Artikel

Mehr sehen