[代码艺术]17行代码的贪吃蛇小游戏

原创 2012年11月28日 11:07:00

一个贪吃蛇小游戏


javascrpt有效代码17行
加上html代码的话,共25行

运行方法chrome或者firefox

测试连接
http://lufylegend.com/html5/lufylegend/tcs.html

完整代码如下

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


有几个朋友想要注释,我添加了简单的注释说明,看下面

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

鉴于有些朋友感觉代码读起来费劲,下面再提供一个经过格式调整后的代码,对应上面代码的各部分功能完全相同,只是写法不一样罢了

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



转载请注明:转自lufy_legend的博客


欢迎继续关注我的博客

http://blog.csdn.net/lufy_legend


一个贪吃蛇小游戏(17行代码)

javascrpt有效代码17行 加上html代码的话,共25行 运行方法chrome或者firefox 测试连接 http://lufylegend.com/html5/lufylegend...
  • alan00000
  • alan00000
  • 2012年12月05日 11:48
  • 764

[代码的艺术]20行代码的贪吃蛇

[代码的艺术]20行代码的贪吃蛇
  • qq_33094497
  • qq_33094497
  • 2016年09月21日 10:33
  • 1716

17行代码的贪吃蛇小游戏

javascrpt有效代码17行 加上html代码的话,共25行 运行方法chrome或者firefox 测试连接 http://lufylegend.com/html5/lufylegend...
  • silenwym
  • silenwym
  • 2012年12月05日 15:02
  • 179

python 贪吃蛇小游戏代码

#!/usr/bin/python # -*- coding: UTF-8 -*- #作者:黄哥 #链接:https://www.zhihu.com/question/55873159/answer/...
  • lixiangyong123
  • lixiangyong123
  • 2017年02月16日 14:43
  • 935

贪吃蛇游戏的源代码(汇编)

 DATA SEGMENT PARA PUBLIC DATA     X        DW 40     Y        DW 40     MUL_RAX  DB 3     GEWEI    ...
  • geduobrave
  • geduobrave
  • 2007年06月11日 21:06
  • 1936

贪吃蛇小游戏java实现代码分析

贪吃蛇小游戏java实现代码分析贪吃蛇的小游戏,网上的代码比较多,今天周五,在教研室没啥事做,在电脑中发现了一个贪吃蛇的小游戏,于是就看了下实现的源码,发现别人写的代码确实挺好的,自己也是边加注释边进...
  • u010412719
  • u010412719
  • 2015年07月03日 22:07
  • 5368

贪吃蛇游戏(C语言)(在Dev c++、vc中运行通过)

贪吃蛇游戏(C语言)在大一计算机实训时写的,其中较难理解的应该是句柄,需要自己网上查找资料 以下是代码片段:#include #include #include #include #define f...
  • sinat_36570284
  • sinat_36570284
  • 2016年12月26日 22:40
  • 4908

[OpenGL]贪吃蛇游戏源码

//Game.h#pragma once//游戏类#include "glfDC.h"#include "panel.h"#include "worm.h"class Game{ //游戏的基本元素p...
  • FeeLang
  • FeeLang
  • 2009年06月19日 23:41
  • 5004

贪吃蛇游戏,基于C语言,vs2010平台

贪吃蛇游戏,基于C语言,vs2010平台
  • njut_water
  • njut_water
  • 2017年02月26日 20:20
  • 1170

html 5 (javascript) 17行代码,贪吃蛇小游戏

"myCanvas" width="240" height="240" style="border:1px solid #d3d3d3;">Your browser does not support ...
  • qq823165764
  • qq823165764
  • 2012年12月05日 21:07
  • 289
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:[代码艺术]17行代码的贪吃蛇小游戏
举报原因:
原因补充:

(最多只允许输入30个字)