发布网友 发布时间:2022-04-23 07:05
共3个回答
懂视网 时间:2022-05-12 08:24
一个贪吃蛇小游戏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 You 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 You 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 You 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>
热心网友 时间:2022-05-12 05:32
很土很简单的实现方式
显示:在屏幕上的指定坐标打印一些断续的点(或其他字符),每个点之间用空格或者其他字符来分隔。
移动:打印第一次后间隔一段时间,如0.5秒或1秒等,clrscr清屏,顺序移动贪吃蛇上所有节点坐标后再次打印 ,简单写了个很小的demo,吃豆子、障碍物、转向控制等都没写。
/*
* 贪吃蛇demo,仅演示贪食蛇的显示和移动
*/
#include <stdlib.h>
#include <conio.h>
#include <stdio.h>
#include <windows.h>
#define N 5
int main()
{
char a[30][30];
int i,j,k;
int m,n;
while(1)
{
for (i=10,j=5+N; j<=25; j++)
{
// 初始化坐标数组所有元素为空格
memset(a, 32, sizeof(a));
// 填充要显示*号的坐标
for (k=j; k>=j-N; k--)
{
a[i][k] = 42;
}
// 清屏
system("cls");
Sleep(200);
// 打印贪吃蛇
for (m=0; m<30; m++)
{
for (n=0; n<30; n++)
{
printf("%c",a[m][n]);
}
printf("\n");
}
Sleep(500);
}
}
return 0;
}追问我用的win-TC,你写的这段为什么运行不了?
追答我用的是VS2005,TC应该Sleep什么的都不对的
热心网友 时间:2022-05-12 06:50
= =