用html实现贪吃蛇游戏思路,贪吃蛇游戏

贪吃蛇作为一款经典游戏，获得了很多人的青睐，之所以能经久不衰，是因为贪吃蛇从游戏设计之始，就进行了全方位的考虑。不仅要做到有趣，更要做到设计美观，简洁大方。游戏设计要从布局，框架结构，按钮，贪吃蛇的行走方向，编程语言几个方面进行全面的考虑

贪吃蛇，最主要的功能点：1、蛇的移动2、改变蛇的方向3、放置食物4、增加舍身5、怎么挂的，具体实现如下，简单实用就60行，感兴趣的朋友可以参考下哈，希望对大家有所帮助

以前也很少关注HTML5，感觉选择html已经慢慢成为趋势，想了解下。就找了个游戏学习了，写完这个游戏感觉html5和js结合很紧密，如果js不是特别好。估计需要先补习下js，这个只是个人的建议，不一定准确。还有一个就是，思维和逻辑要特别清楚，不然写游戏可能很痛苦。

贪吃蛇，最主要的功能点：1，蛇的移动2，改变蛇的方向3，放置食物4，增加舍身5,怎么挂的。

第一次写游戏，第一次写html5感觉还是很吃力的。写完了，给大家分享下。互相交流.............不懂的或者有建议的，可以留言给我。。。代码很短，就60行。

不过这个是个半成品，等写完成了。再更新下

复制代码代码如下:

varc=document.getElementById("myCanvas");

vartime=160;//蛇的速度

varcxt=c.getContext("2d");

varx=y=8;

vara=0;//食物坐标

vart=20;//舍身长

varmap=[];//记录蛇运行路径

varsize=8;//蛇身单元大小

vardirection=2;//1向上2向右0左3下

interval=window.setInterval(set_game_speed,time);//移动蛇

functionset_game_speed(){//移动蛇

switch(direction){

case1:y=y-size;break;

case2:x=x+size;break;

case0:x=x-size;break;

case3:y=y+size;break;

}

if(x>400||y>400||x<0||y<0){

alert("你挂了，继续努力吧!失败原因：碰壁了.....");window.location.reload();

}

for(vari=0;i

if(parseInt(map[i].x)==x&&parseInt(map[i].y)==y){

alert("你挂了，继续努力吧！失败原因：撞到自己了.....");window.location.reload();

}

}

if(map.length>t){//保持舍身长度

varcl=map.shift();//删除数组第一项，并且返回原元素

cxt.clearRect(cl['x'],cl['y'],size,size);

};

map.push({'x':x,'y':y});//将数据添加到原数组尾部

cxt.fillStyle="#006699";//内部填充颜色

cxt.strokeStyle="#006699";//边框颜色

cxt.fillRect(x,y,size,size);//绘制矩形

if((a*8)==x&&(a*8)==y){//吃食物

rand_frog();t++;

}

}

document.οnkeydοwn=function(e){//改变蛇方向

varcode=e.keyCode-37;

switch(code){

case1:direction=1;break;//上

case2:direction=2;break;//右

case3:direction=3;break;//下

case0:direction=0;break;//左

}

}

//随机放置食物

functionrand_frog(){

a=Math.ceil(Math.random()*50);

cxt.fillStyle="#000000";//内部填充颜色

cxt.strokeStyle="#000000";//边框颜色

cxt.fillRect(a*8,a*8,8,8);//绘制矩形

}

//随机放置食物

rand_frog();

贪吃蛇是一项益智游戏，不仅要做到有趣，更要做到设计美观，简洁大方。游戏设计要从布局，框架结构，按钮，贪吃蛇的行走方向，编程语言几个方面进行全面的考虑，贪吃蛇的形象要符合大众的审美，行走方向及遇到墙之后的反应进行全面的考虑，只有从更全面的角度出发，才能让一个游戏获得更多人的青睐。