一行js代码完成一个简易版的贪吃蛇游戏

时间  2021-08-12
标签 html canvas segmentfault 数组 浏览器 markdown app dom 函数 oop 栏目 JavaScript 繁體版
原文   原文链接

有些奇淫技巧玩好的话，就能提高本身的逼格，这不，一行js代码实现一个贪吃蛇小游戏就成了装逼到了最高境界嘛！代码以下:html

(function(){var s = [41,40],d = 1,f = 43,x,c = document.createElement('canvas');c.width=400;c.height=400;c.style.background="#535353";c.textContent="当前浏览器不支持canvas标签";b=c.getContext('2d');function w(s,c){b.fillStyle = c;b.fillRect(s % 20 * 20, ~~(s / 20) * 20 , 18 , 18);};document.onkeydown=function(e){d = s[1] - s[0] == (x = [-1,-20,1,20][(e || event).keyCode - 37] || d ) ? d : x;};!(function(){s.unshift(x = s[0] + d);if(s.indexOf(x,1) > 0 || x < 0 || x > 399 || d == 1 && x % 20 == 0 || d == -1 && x % 20 == 19)return alert('游戏结束!');w(x,'#2396ef');x === f ? (()=>{while (s.indexOf(f = ~~(Math.random() * 399)) > 0);w(f,'#35e3dc');})() : w(s.pop(),'#535353');setTimeout(arguments.callee,300);})();document.body.appendChild(c);})();
复制代码

ps:我不是来装逼的。！canvas

好了，让咱们来运行一下这行代码，看一下效果:segmentfault

看动图看着不过瘾？，好，你本身去线上看看demo能够撒，具体示例。数组

装逼完成，浏览器

。markdown

好了，言归正传，我怎么多是来装逼的，我要来分析一下，这个是怎么玩的，这才是个人目的。app

让咱们拆分代码来看:dom

首先，最外层包裹了一个自调用函数，以下:函数

(function(){
    //具体内容
})();
//自调用函数固然不止这样的写法
复制代码

而后第二步，要画一个场景，那很明显，要用HTML5的canvas标签，咱们能够采用document.createElement()这个方法来建立一个元素，继续:oop

(function(){
    //建立canvas标签
    var c = document.createElement('canvas');
})();
复制代码

蛇运动的场景确定是固定大小的，也就是说，咱们要给canvas设置宽和高，在这里，我就是设置的400X400,而后给场景加一个背景。就这样:

(function(){
    //建立canvas标签
    var c = document.createElement('canvas');
    c.width = 400;
    c.height = 400;
    c.style.background = '#535353';
})();
复制代码

建立了canvas元素，咱们要添加到DOM网页中去，因此用appendChild()来添加。以下:

(function(){
    //建立canvas标签
    var c = document.createElement('canvas');
    c.width = 400;
    c.height = 400;
    c.style.background = '#535353';
    document.body.appendChild(c);
})();
复制代码

哦，有些浏览器可能不支持canvas标签，因此咱们不能忘了给一个优雅的提示:

(function(){
    //建立canvas标签
    var c = document.createElement('canvas');
    c.width = 400;
    c.height = 400;
    c.style.background = '#535353';
    c.textContent="当前浏览器不支持canvas标签";
    document.body.appendChild(c);
})();
复制代码

场景画好了，接下来，咱们要在场景上画蛇，因此canvas.getContext('2d')这个方法是必不可少的。

(function(){
    //建立canvas标签
    var c = document.createElement('canvas');
    c.width = 400;
    c.height = 400;
    c.style.background = '#535353';
   var b = c.getContext('2d');
   document.body.appendChild(c);
})();
复制代码

接下来分析蛇的构成，实际上这里的场景，咱们能够当作是400个20*20的块组成，那么蛇也就能够当作一个块一个块的组成,用技术术语来讲就是一个队列,也就是一个数组，[20]。在这里初始化蛇为2个块，也就是[20,20]，那么蛇初始化位置仍是稍微调整一下嘛，因此也就改为[40,40],其实在这里第一次出现的时候，是隐藏了一个食物的，默认就在蛇初始化位置的下一格，而后蛇会当即吃掉，而后就随机出现下一个食物的位置了，所以默认食物的位置是40。为了一个方便细小的微差，就稍微调大一点,为43。好了，如今咱们要知道蛇运行的方向，蛇能够上下左右活动，那么，咱们定义为s[1] - s[0],这是根据位置来计算的。我们先定义蛇再说:

(function(){
    //建立canvas标签
    var c = document.createElement('canvas');
    c.width = 400;
    c.height = 400;
    c.style.background = '#535353';
   var b = c.getContext('2d');
   var s = [41,40],//这里41也是有讲究的
       d = 1,//定义蛇活动方向，默认向右
       f = 42;//默认食物的位置
   document.body.appendChild(c);
})();
复制代码

接下来，开始绘制蛇，蛇活动的轨迹与食物。定义一个函数，利用canvas.fillStyle()填充背景，在这里蛇与食物还有蛇活动的轨迹都是一个小方块矩形，这样咱们就使用canvas.fillRect()来绘制一个矩形，这个方法有四个参数，以下图所示:

蛇活动的轨迹坐标，也就是定义的蛇数组的坐标，所以第一个参数就是s % 20 * 20,第二个参数就是~~(s / 20 * 20)。关于~~这个操做符，若是不理解的话，能够看个人文章浅谈JavaScript位操做符。这里感受有些抽象，实际上，须要靠本身的想象力来想象理解。

(function(){
    //建立canvas标签
    var c = document.createElement('canvas');
    c.width = 400;
    c.height = 400;
    c.style.background = '#535353';
   var b = c.getContext('2d');
   var s = [41,40],//这里41也是有讲究的，表明默认向右方向
       d = 1,//定义蛇活动方向，默认向右,蛇运动方向为s[1] - s[0]
       f = 42;//默认食物的位置
   //这个函数既是绘制蛇方块，也是绘制食物与蛇活动轨迹的定义
   function w(s,c){
       b.fillStyle = c;
       b.fillRect(s % 20 * 20,~~(s / 20 * 20),18,18);
   }
   document.body.appendChild(c);
})();
复制代码

蛇每吃掉一个食物，也就是往数组中添加一个20*20的小块，固然为了区分方向，这里的小块宽高应该与绘制的矩形宽高有关。所以，咱们还要定义一个变量来表明蛇吃掉食物后，随机出现的下一个食物出现的位置。

(function(){
    //建立canvas标签
    var c = document.createElement('canvas');
    c.width = 400;
    c.height = 400;
    c.style.background = '#535353';
   var b = c.getContext('2d');
   var s = [41,40],//这里41也是有讲究的，表明默认向右方向
       d = 1,//定义蛇活动方向，默认向右,蛇运动方向为s[1] - s[0]
       f = 42,//默认食物的位置
       x;
   //这个函数既是绘制蛇方块，也是绘制食物与蛇活动轨迹的定义
   function w(s,c){
       b.fillStyle = c;
       b.fillRect(s % 20 * 20,~~(s / 20 * 20),18,18);
   }
   document.body.appendChild(c);
})();
复制代码

接下来就是用户按键盘的方向键，固然也能够是wsad字母键来控制蛇活动的方向。不过咱们须要知道键盘键的keyCode,方向键的keyCode分别是:向左:37,向上:38,,向右:39,向下:40。键盘事件为onkeydown。

(function(){
    //建立canvas标签
    var c = document.createElement('canvas');
    c.width = 400;
    c.height = 400;
    c.style.background = '#535353';
   var b = c.getContext('2d');
   var s = [41,40],//这里41也是有讲究的，表明默认向右方向
       d = 1,//定义蛇活动方向，默认向右,蛇运动方向为s[1] - s[0]
       f = 42,//默认食物的位置
       x;
   //这个函数既是绘制蛇方块，也是绘制食物与蛇活动轨迹的定义
   function w(s,c){
       b.fillStyle = c;
       b.fillRect(s % 20 * 20,~~(s / 20 * 20),18,18);
   }
   //按方向键控制蛇运动方向,这里根据食物的位置来控制方向，防止用户随便更改方向，而后游戏崩溃
   document.onkeydown = function(e){
       d = s[1] - s[0] === (x = [-1,-20,1,20][e || event].keyCode - 37 ] || d) ? d : x;
   }
   document.body.appendChild(c);
})();
复制代码

而后蛇吃掉一个食物就应该添加下一个食物，在这里用unshift()方法来添加数组。

(function(){
    //建立canvas标签
    var c = document.createElement('canvas');
    c.width = 400;
    c.height = 400;
    c.style.background = '#535353';
   var b = c.getContext('2d');
   var s = [41,40],//这里41也是有讲究的，表明默认向右方向
       d = 1,//定义蛇活动方向，默认向右,蛇运动方向为s[1] - s[0]
       f = 42,//默认食物的位置
       x;
   //这个函数既是绘制蛇方块，也是绘制食物与蛇活动轨迹的定义
   function w(s,c){
       b.fillStyle = c;
       b.fillRect(s % 20 * 20,~~(s / 20 * 20),18,18);
   }
   //按方向键控制蛇运动方向,这里根据食物的位置来控制方向，防止用户随便更改方向，而后游戏崩溃
   document.onkeydown = function(e){
       //方向由蛇头来肯定，初始化蛇只有2个小方块组成，所以蛇的方向就是s[1] - s[0]
       d = s[1] - s[0] === (x = [-1,-20,1,20][e || event].keyCode - 37 ] || d) ? d : x;
   }
   !(function(){
       s.unshift(x = s[0] + d);
   })();//这也是一种自调用函数写法
   document.body.appendChild(c);
})();
复制代码

接下来判断蛇若是撞墙或者撞到了自身，则游戏结束。

(function(){
    //建立canvas标签
    var c = document.createElement('canvas');
    c.width = 400;
    c.height = 400;
    c.style.background = '#535353';
   var b = c.getContext('2d');
   var s = [41,40],//这里41也是有讲究的，表明默认向右方向
       d = 1,//定义蛇活动方向，默认向右,蛇运动方向为s[1] - s[0]
       f = 42,//默认食物的位置
       x;
   //这个函数既是绘制蛇方块，也是绘制食物与蛇活动轨迹的定义
   function w(s,c){
       b.fillStyle = c;
       b.fillRect(s % 20 * 20,~~(s / 20 * 20),18,18);
   }
   //按方向键控制蛇运动方向,这里根据食物的位置来控制方向，防止用户随便更改方向，而后游戏崩溃
   document.onkeydown = function(e){
       //方向由蛇头来肯定，初始化蛇只有2个小方块组成，所以蛇的方向就是s[1] - s[0]
       d = s[1] - s[0] === (x = [-1,-20,1,20][e || event].keyCode - 37 ] || d) ? d : x;
   }
   !(function(){
       s.unshift(x = s[0] + d);
       //判断蛇若是撞墙或者撞到了自身，则游戏结束
       if(s.indexOf(x,1) > 0 || x < 0 || x > 399 || d == 1 && x % 20 == 0 || d == -1 && x % 20 == 19)return alert('游戏结束');
   })();//这也是一种自调用函数写法
   document.body.appendChild(c);
})();
复制代码

而后开始画食物，以及判断食物是否被蛇吃掉，若是吃掉了，则随机生成下一个食物。

(function(){
    //建立canvas标签
    var c = document.createElement('canvas');
    c.width = 400;
    c.height = 400;
    c.style.background = '#535353';
   var b = c.getContext('2d');
   var s = [41,40],//这里41也是有讲究的，表明默认向右方向
       d = 1,//定义蛇活动方向，默认向右,蛇运动方向为s[1] - s[0]
       f = 42,//默认食物的位置
       x;
   //这个函数既是绘制蛇方块，也是绘制食物与蛇活动轨迹的定义
   function w(s,c){
       b.fillStyle = c;
       b.fillRect(s % 20 * 20,~~(s / 20 * 20),18,18);
   }
   //按方向键控制蛇运动方向,这里根据食物的位置来控制方向，防止用户随便更改方向，而后游戏崩溃
   document.onkeydown = function(e){
       //方向由蛇头来肯定，初始化蛇只有2个小方块组成，所以蛇的方向就是s[1] - s[0]
       d = s[1] - s[0] === (x = [-1,-20,1,20][e || event].keyCode - 37 ] || d) ? d : x;
   }
   !(function(){
       s.unshift(x = s[0] + d);
       //判断蛇若是撞墙或者撞到了自身，则游戏结束
       if(s.indexOf(x,1) > 0 || x < 0 || x > 399 || d == 1 && x % 20 == 0 || d == -1 && x % 20 == 19)return alert('游戏结束');
       //而后开始画蛇节点的颜色
		w(x,'#e641d3');
		//判断蛇是否是吃到食物,若是吃到则从新随机生成一个节点也就是新食物的坐标,Math.random()方法表示取随机数,由于方向有多是负的,因此用到了~~符号表示取绝对值到正数.~就是先取反再减一的意思.
		if(x == f){
			while (s.indexOf(f = ~~(Math.random() * 399)) > 0);
			//从新画食物颜色
			w(f,'#35e3dc');
		}else{
			//蛇吃到食物,蛇身会变长,因此不会改变蛇的运动轨迹
			w(s.pop(),'#535353');
		}
   })();//这也是一种自调用函数写法
   document.body.appendChild(c);
})();
复制代码

最后，让蛇按必定的时间运行，以下:

(function(){
    //建立canvas标签
    var c = document.createElement('canvas');
    c.width = 400;
    c.height = 400;
    c.style.background = '#535353';
   var b = c.getContext('2d');
   var s = [41,40],//这里41也是有讲究的，表明默认向右方向
       d = 1,//定义蛇活动方向，默认向右,蛇运动方向为s[1] - s[0]
       f = 42,//默认食物的位置
       x;
   //这个函数既是绘制蛇方块，也是绘制食物与蛇活动轨迹的定义
   function w(s,c){
       b.fillStyle = c;
       b.fillRect(s % 20 * 20,~~(s / 20 * 20),18,18);
   }
   //按方向键控制蛇运动方向,这里根据食物的位置来控制方向，防止用户随便更改方向，而后游戏崩溃
   document.onkeydown = function(e){
       //方向由蛇头来肯定，初始化蛇只有2个小方块组成，所以蛇的方向就是s[1] - s[0]
       d = s[1] - s[0] === (x = [-1,-20,1,20][e || event].keyCode - 37 ] || d) ? d : x;
   }
   !(function(){
       s.unshift(x = s[0] + d);
       //判断蛇若是撞墙或者撞到了自身，则游戏结束
       if(s.indexOf(x,1) > 0 || x < 0 || x > 399 || d == 1 && x % 20 == 0 || d == -1 && x % 20 == 19)return alert('游戏结束');
       //而后开始画蛇节点的颜色
		w(x,'#e641d3');
		//判断蛇是否是吃到食物,若是吃到则从新随机生成一个节点也就是新食物的坐标,Math.random()方法表示取随机数,由于方向有多是负的,因此用到了~~符号表示取绝对值到正数.~就是先取反再减一的意思.
		if(x == f){
			while (s.indexOf(f = ~~(Math.random() * 399)) > 0);
			//从新画食物颜色
			w(f,'#35e3dc');
		}else{
			//蛇吃到食物,蛇身会变长,因此不会改变蛇的运动轨迹
			w(s.pop(),'#535353');
		}
        //这是一种递归的写法
        setTimeout(arguments.callee,300);
   })();//这也是一种自调用函数写法
   document.body.appendChild(c);
})();
复制代码

到此为止，就拆分完了，其实这里的逻辑不算难，难的是计算蛇与蛇运动轨迹还有食物的坐标。可以理解透，就看我的的数学知识了，哈哈。最后，将这么多代码整合成一行代码，就能够好好的装逼了！

ps:本文代码借鉴国外某大神20多行js代码实现贪吃蛇，在源代码基础上进行分析并加以修改封装而成，不喜勿喷。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程