一个贪吃蛇小游戏
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
分享到:
相关推荐
100行Python代码的贪吃蛇小游戏源码100行Python代码的贪吃蛇小游戏源码100行Python代码的贪吃蛇小游戏源码100行Python代码的贪吃蛇小游戏源码100行Python代码的贪吃蛇小游戏源码100行Python代码的贪吃蛇小游戏源码...
java贪吃蛇小游戏代码java小游戏源码
Jquery网页版贪吃蛇益智类小游戏,代码可直接运行,使用键盘方向键(← ↑ → ↓)键来控制方向,空格键暂停。web前端永远不会过时. jQuery简单网页贪吃蛇大战小游戏代码,带分类统计,吃的越多,分数越多,贪吃蛇越长...
java小游戏 贪吃蛇java小游戏 贪吃蛇java小游戏 贪吃蛇java小游戏 贪吃蛇java小游戏 贪吃蛇java小游戏 贪吃蛇java小游戏 贪吃蛇java小游戏 贪吃蛇java小游戏 贪吃蛇java小游戏 贪吃蛇java小游戏 贪吃蛇java小游戏 ...
贪吃蛇代码贪吃蛇代码贪吃蛇代码贪吃蛇代码贪吃蛇代码贪吃蛇代码贪吃蛇代码贪吃蛇代码贪吃蛇代码
贪吃蛇游戏代码贪吃蛇游戏代码贪吃蛇游戏代码贪吃蛇游戏代码贪吃蛇游戏代码贪吃蛇游戏代码
微信小程序练手项目-小程序贪吃蛇小游戏(完整代码)微信小程序练手项目-小程序贪吃蛇小游戏(完整代码)微信小程序练手项目-小程序贪吃蛇小游戏(完整代码)微信小程序练手项目-小程序贪吃蛇小游戏(完整代码)微信小程序练...
是一款贪吃蛇小游戏的源代码,小游戏中可计算得分情况,小蛇吃到绿色食物则蛇身变长,吃到灰色毒品游戏结束,吃到蓝色滑板小蛇移动速度加快,吃到红色刹车小蛇移动速度减慢
贪吃蛇游戏C源代码 贪吃蛇游戏C贪吃蛇游戏C源代码源代码
Python本科毕业设计项目源代码用pygame模块设计并运行贪吃蛇小游戏Python本科毕业设计项目源代码用pygame模块设计并运行贪吃蛇小游戏Python本科毕业设计项目源代码用pygame模块设计并运行贪吃蛇小游戏,Python本科...
java小游戏贪吃蛇程序代码摘自网上。问题不会太大。可能有些格式问题,比较容易改。当然,如果按罗凯的习惯,肯定没分。
使用vc写的贪吃蛇小游戏代码,试验加载jpg、png、bmp
纯JS实现的贪吃蛇小游戏,很好很强大,欢迎下载
flash3.0 贪吃蛇游戏 源代码 当初学习flash时尝试做的小游戏
贪吃蛇代码贪吃蛇代码贪吃蛇代码贪吃蛇代码贪吃蛇代码贪吃蛇代码贪吃蛇代码
这是一个纯js代码实现的贪吃蛇小游戏,代码简明易懂,适合新手,欢迎下载这是一个纯js代码实现的贪吃蛇小游戏,代码简明易懂,适合新手,欢迎下载
贪吃蛇小游戏 java代码 记事本编辑 ~~~~~~~~~~~~~
PYTHON做贪吃蛇代码 PYTHON做贪PYTHONPYTHON做贪吃蛇代码做贪吃蛇代码 吃蛇代码 PYTHON做贪吃蛇代码PYTHON做贪吃蛇代码PYPYTHON做贪吃蛇代码THON做贪吃蛇代码PYTHON做贪吃蛇代码PYTHON做PYTHON做贪吃蛇代码贪吃蛇...
贪吃蛇 代码贪吃蛇 代码贪吃蛇贪吃蛇 代码 代码VC++6.0