下载安卓APP箭头
箭头给我发消息

客服QQ:3315713922

贪吃蛇游戏实现思路及其设计代码

作者:课课家教育     来源: http://www.kokojia.com点击数:1897发布时间: 2019-04-01 14:03:23

标签: 贪吃蛇游戏实现思路设计代码代码解释

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

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

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

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

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

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

  复制代码代码如下:

  <!DOCTYPEHTML>

  <html>

  <body>

  <canvasid="myCanvas"width="400"height="400"style="border:1pxsolid#c3c3c3;"></canvas>

  <scripttype="text/Javascript">

  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<map.length;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.onkeydown=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();

  </script>

  </body>

  </html>

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

  贪吃蛇游戏_实现思路_设计代码_课课家教育

赞(25)
踩(4)
分享到:
华为认证网络工程师 HCIE直播课视频教程