码迷，mamicode.com
首页 > Web开发 > 详细

13行js写贪吃蛇游戏

时间：2018-07-13 20:23:01      阅读：301      评论：0      收藏：0      [点我收藏+]

标签：pair   地址   rand   return   over   eva   压缩   坐标   效果   

先上源码,版本是ES6

13行常规(700bytes)

shortest snake game.html

压缩后的500bytes(当然两处document还是可以用eval压缩的)

index.500bytes.html

之前很火的20行代码地址(有BUG)(900bytes)

hj7jay/article/details/51011269

一维数组700char

(0,0)位置的蛇身用0表示,(0,1)用1,(1,0)用10表示,以此类推

因为就13行js,

第4行 是声明

第5行 比较难理解,可以把?:运算符,拆分为4行if语句;可以参考下面的 二维数组 的版本

第9行 0|x 和 ~~x 和 x>>0 都能去除x(number)的尾数

应该算易读了

  1. <!DOCTYPE html>
  2. <canvas id="1" width="400" height="400"></canvas>
  3. <script>
  4. let dir=1,food=3,snk=[1,0],ctx=document.getElementById("1").getContext("2d")
  5. document.onkeydown=e=>{ dir =snk[0]-snk[1]==-(tmp = [-1,-10,1,10][e.keyCode-37]||dir)?dir:tmp }
  6. setInterval(()=>{
  7.     snk.unshift(Head = snk[0] + dir)
  8.     if(Head!=food) snk.pop()
  9.     else while(snk.includes(food=0|Math.random()*10*10)) ;
  10.     if(snk.indexOf(Head,1)!=-1||(dir==1&&Head%10==0)||(dir==-1&&Head%10==9)||Head<0||Head>=100)
  11.         return document.write(0&snk.shift()) //死亡记录蛇长
  12.     for(let i=0; i<100; i++){
  13.         ctx.fillStyle = ‘#0‘+(food==i)*9910+snk.includes(i)*1990
  14.         ctx.fillRect(i%10*40,(i-i%10)*4, 40,40)
  15.     }
  16. },100)
  17. </script>

点击运行

颜色效果

  1. <!DOCTYPE html>
  2. <canvas id="1" width="400" height="400"></canvas>
  3. <script>
  4. let dir=1,food=3,snk=[1,0],n_=0, ctx=document.getElementById("1").getContext("2d")
  5. document.onkeydown=e=>{ dir =snk[0]-snk[1]==-(tmp = [-1,-10,1,10][e.keyCode-37]||dir)?dir:tmp }
  6. setInterval(()=>{
  7.     snk.unshift(Head = snk[0] + dir)
  8.     if(Head!=food) snk.pop()
  9.     else while(snk.includes(food=0|Math.random()*10*10)) ;
  10.     if(snk.indexOf(Head,1)!=-1||(dir==1&&Head%10==0)||(dir==-1&&Head%10==9)||Head<0||Head>=100)
  11.         return alert("died"+ ++n_+"times") //死亡记录死亡次数
  12.     for(let i=0 ; i<100; i++){
  13.         ctx.fillStyle = ‘#0‘+~~((food===i)*13000*Math.random())+~~(snk.includes(i)*3000*Math.random())
  14.         ctx.fillRect(i%10*40,(i-i%10)*4, 40,40)
  15.     }
  16. },120)
  17. </script>

点击运行

说明

如果自己要写的话:要注意两点

  1. 蛇尾应该比蛇头先消失,蛇头应该比食物先生成,
  2. 蛇不能走当前相反的方向

    可以用长度为4的蛇进行测试

代码风格

  1. 省去没必要的标签

    https://google.github.io/styleguide/htmlcssguide.html#Optional_Tags

  2. if() return只用一行

    https://google.github.io/styleguide/cppguide.html

  3. 除了键盘响应那里用3目运算符能省3行之外,其他地方都没必要用

       

二维数组

以上的都是用一维数组实现的,下面的用二维数组写;要简化也能简化到17行以内900char以内(比20行的那个短就是了),不过没有必要

带注释的1100char

  1. <!DOCTYPE html>
  2. <canvas id="1" width="400" height="400" style="border: 1px solid "></canvas>
  3. <script>
  4.     ctx = document.getElementById("1").getContext("2d") //CanvasRenderingContext2D inferface
  5.     let Len = 10, dir = 2, dirNow ; //dirNow 后面解释
  6.     food = [3, 0]; Snake = [[0, 0], [1, 0]] //食物的坐标,蛇身的坐标用Snake数组记录
  7.     Map = {‘0,0‘:‘#52a‘, ‘1,0‘:‘#52a‘} //用来记录绘图颜色的 地图
  8.     dirMat = [[-1, 0], [0, -1], [1, 0], [0, 1]] //方向矩阵
  9.     pairEq = ((p1, p2) => p1[0] == p2[0] && p1[1] == p2[1]) //检测 两数对 是否相等的函数
  10.     document.onkeydown = e =>{
  11.         if (37 <= e.keyCode == e.keyCode < 41 && dirNow != ( (e.keyCode - 35) % 4) ) //确定是 方向键 并且 保证方向与当前运动方向相反
  12.             dir = e.keyCode -37
  13.     }
  14.     !function () {
  15.         Head = Snake[Snake.length-1].map((x, i) => x + dirMat[dirNow=dir][i]); //得到头部接下来的移动位置
  16.         if (!pairEq(Head, food))
  17.             Map[Snake.shift()]=‘#fff‘ //必须先删尾巴,才能加入头部,吃没吃到食物是唯一判断标准
  18.         if (Snake.some(x=>pairEq(x,Head)) || !Head.every(x => 0<=x == x < Len)) //判断蛇头是否撞到蛇身或墙壁
  19.             return document.write("Game Over") //这样调用document.write会把页面全部清空
  20.         Snake.push(Head); //可以加入头部
  21.         while (Snake.some(x => pairEq(x, food))) //加入新头后, 生成食物更方便
  22.             food = [~~(Math.random() * Len), ~~(Math.random() * Len)]; //因为js没有整形的概念, ~~ 现在相当于向原点舍去
  23.         Map[Head] = ‘#52a‘ ; Map[food] = ‘#ad5‘
  24.         for( k in Map){
  25.             ctx.fillStyle= Map[k]
  26.             ctx.fillRect(parseInt(k[0])*40,parseInt(k[2])*40,40,40) //e.g. k="1,3",也因此地图大小限制为10
  27.         }
  28.         setTimeout(arguments.callee, 100); //100ms后调用此函数一次
  29.     }()
  30. </script>

七彩的(主要是比较好看)1100char

  1. <!DOCTYPE html>
  2. <canvas id="1" width="400" height="400" style="border: 1px solid " ></canvas>
  3. <script>
  4.     ctx = document.getElementById("1").getContext("2d")
  5.     let Len = 10, dir = 2, dirNow ;
  6. food = [3, 0]; Snake = [[0, 0], [1, 0]]
  7.     Map = {‘0,0‘:‘fff‘, ‘1,0‘:‘fff‘}
  8.     dirMat = [[-1, 0], [0, -1], [1, 0], [0, 1]]
  9.     pairEq = ((p1, p2) => p1[0] == p2[0] && p1[1] == p2[1])
  10.     document.onkeydown = e =>{
  11.         if (37 <= e.keyCode == e.keyCode < 41 && dirNow != ( (e.keyCode - 35) % 4) )
  12. dir = e.keyCode -37
  13.     }
  14.     !function () {
  15.         Head = Snake[Snake.length-1].map((x, i) => x + dirMat[dirNow=dir][i]);
  16.         if (!pairEq(Head, food)) Map[Snake.shift()]=‘0‘
  17.         if (Snake.some(x=>pairEq(x,Head)) || !Head.every(x => 0<=x == x < Len))
  18.             return document.write("Game Over")
  19.         Snake.push(Head);
  20.         while (Snake.some(x => pairEq(x, food)))
  21. food = [~~(Math.random() * Len), ~~(Math.random() * Len)];
  22.         Map[Head] = Map[food] = ‘fff‘
  23.         for( k in Map){
  24.             ctx.fillStyle=‘#‘+(0xfff-~~(parseInt(Map[k],16)*Math.random())).toString(16)
  25.             ctx.fillRect(parseInt(k[0])*40,parseInt(k[2])*40,46,43)
  26.         }
  27.         setTimeout(arguments.callee, 100);
  28.     }()
  29. </script>

   

13行js写贪吃蛇游戏

标签：pair   地址   rand   return   over   eva   压缩   坐标   效果   

原文地址：https://www.cnblogs.com/migeater/p/9306843.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！