目录

效果展示

原理分析

 Game.js文档

Snake.js文档

Food.js文档

附上源代码

写了这么久的代码

是否你和我一样感到枯燥乏味了呢？

是否没有前进的动力了呢？

别忘了当时的你踌躇满志将前端Web一举拿下的斗志啊！

今天博主要给大家展现一个好玩的游戏

贪吃蛇小游戏！

嘿，你可别小瞧这东西！

制作过程是从无到有

等做完它

你就能从中体会到比玩游戏还快乐的居然是打代码!

效果展示

原理分析

我们制作前为了代码更清晰就分成几个js文档来编写。

其中Game.js可以看作是一个媒介的作用；Snake.js是当蛇初始化时在最左边向右走的状态；

 贪吃蛇在游戏中的运动可以想象成这条蛇是在一张25*25的表格中运动：

 如图所示

 Game.js文档

所以我们在Game.js中添加表格节点：

 


    


        


            


            

        

        


            

                function Game() {
            

        

    

    


        


            


            

        

        


            

                this.row = 25;
            

        

    

    


        


            


            

        

        


            

                this.col = 25;
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                Game.prototype.init = function() {
            

        

    

    


        


            


            

        

        


            

                this.dom = document.createElement('table');
            

        

    

    


        


            


            

        

        


            

                // 创建表格--父元素为document（页面中创建表格） 
            

        

    

    


        


            


            

        

        


            

                // var tr, td; 
            

        

    

    


        


            


            

        

        


            

                for (var i = 0; i < this.row; i++) { //追加行 
            

        

    

    


        


            


            

        

        


            

                var tr = document.createElement('tr');
            

        

    

    


        


            


            

        

        


            

                for (var j = 0; j < this.td; j++) { //追加列 
            

        

    

    


        


            


            

        

        


            

                var td = document.createElement('col');
            

        

    

    


        


            


            

        

        


            

                td.appendChild(tr);
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                };
            

        

    

Snake.js文档

Snake.js中当蛇初始化时在最左边向右走的状态：

如图所示

 


    


        


            


            

        

        


            

                function Snake() {
            

        

    

    


        


            


            

        

        


            

                // 蛇的初始化身体 
            

        

    

    


        


            


            

        

        


            

                this.body = [
            

        

    

    


        


            


            

        

        


            

                { 'row': 3, 'col': 5 },
            

        

    

    


        


            


            

        

        


            

                { 'row': 3, 'col': 4 },
            

        

    

    


        


            


            

        

        


            

                { 'row': 3, 'col': 3 },
            

        

    

    


        


            


            

        

        


            

                { 'row': 3, 'col': 2 }
            

        

    

    


        


            


            

        

        


            

                ];
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                Snake.prototype.render = function() {
            

        

    

    


        


            


            

        

        


            

                // 蛇头的渲染 
            

        

    

    


        


            


            

        

        


            

                game.setColorHead(this.body[0].row, this.body[0].col.'pink');
            

        

    

    


        


            


            

        

        


            

                // 蛇身的渲染 
            

        

    

    


        


            


            

        

        


            

                for (var i = 1; i < this.body.length; i++) {
            

        

    

    


        


            


            

        

        


            

                game.setColor(this.body[i].row, this.body[i].col, 'cyan')
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

当蛇在运动的时候它的原理是“头增尾删”。

因为蛇的长度先是不变的，而我们改变的也是改变这个四个格子的颜色，走一格头部那一格颜色变为粉色，尾巴那一格的颜色变为白色。

接下来让蛇通过我们按键来进行运动：放在一个监听事件内

 


    


        


            


            

        

        


            

                // 设置键盘的事件监听 
            

        

    

    


        


            


            

        

        


            

                Game.prototype.bindEvent = function() {
            

        

    

    


        


            


            

        

        


            

                var self = this;
            

        

    

    


        


            


            

        

        


            

                document.addEventListener('keydown', function(e) {
            

        

    

    


        


            


            

        

        


            

                // 用ASCII码值判断键盘方向 
            

        

    

    


        


            


            

        

        


            

                switch (e.keyCode) {
            

        

    

    


        


            


            

        

        


            

                case 37: //左 
            

        

    

    


        


            


            

        

        


            

                if (self.snake.direction == 'R') return; // 先进行判断，如果当前的方向是向右移动，此时我们不能按左键 
            

        

    

    


        


            


            

        

        


            

                self.snake.changeDirection('L');
            

        

    

    


        


            


            

        

        


            

                self.d = 'L';
            

        

    

    


        


            


            

        

        


            

                break;
            

        

    

    


        


            


            

        

        


            

                case 38: //上 
            

        

    

    


        


            


            

        

        


            

                if (self.snake.direction == 'D') return; // 先进行判断，如果当前的方向是向下移动，此时我们不能按上键 
            

        

    

    


        


            


            

        

        


            

                self.snake.changeDirection('U');
            

        

    

    


        


            


            

        

        


            

                self.d = 'U';
            

        

    

    


        


            


            

        

        


            

                break;
            

        

    

    


        


            


            

        

        


            

                case 39: //右 
            

        

    

    


        


            


            

        

        


            

                if (self.snake.direction == 'L') return; // 先进行判断，如果当前的方向是向左移动，此时我们不能按右键 
            

        

    

    


        


            


            

        

        


            

                self.snake.changeDirection('R');
            

        

    

    


        


            


            

        

        


            

                self.d = 'R';
            

        

    

    


        


            


            

        

        


            

                break;
            

        

    

    


        


            


            

        

        


            

                case 40: //下 
            

        

    

    


        


            


            

        

        


            

                if (self.snake.direction == 'U') return; // 先进行判断，如果当前的方向是向上移动，此时我们不能按下键 
            

        

    

    


        


            


            

        

        


            

                self.snake.changeDirection('D');
            

        

    

    


        


            


            

        

        


            

                self.d = 'D';
            

        

    

    


        


            


            

        

        


            

                break;
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                })
            

        

    

    


        


            


            

        

        


            

                }
            

        

    


 

接下来我们判定蛇是否撞到墙而结束

 


    


        


            


            

        

        


            

                // 死亡的判断,超出了表格边缘的部分 
            

        

    

    


        


            


            

        

        


            

                if (this.body[0].col > game.col - 1 || this.body[0].col < 0 || this.body[0].row > game.row - 1 || this.body[0].row < 0) {
            

        

    

    


        


            


            

        

        


            

                alert('撞到墙了哦，一共吃掉了' + game.score + '颗草莓');
            

        

    

    


        


            


            

        

        


            

                this.body.shift();
            

        

    

    


        


            


            

        

        


            

                clearInterval(game.timer);
            

        

    

    


        


            


            

        

        


            

                location.reload();
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


        

    

接下来我们判定蛇是否撞到自己而结束

 


    


        


            


            

        

        


            

                // 自己撞到自己的时候会判定死亡 
            

        

    

    


        


            


            

        

        


            

                for (var i = 1; i < this.body.length; i++) {
            

        

    

    


        


            


            

        

        


            

                // 如果当前蛇的头部和身体的某一个部位的 row 和 col 完全重合的时候 
            

        

    

    


        


            


            

        

        


            

                if (this.body[0].row == this.body[i].row && this.body[0].col == this.body[i].col) {
            

        

    

    


        


            


            

        

        


            

                alert('撞到自己了,吃掉了' + game.score + '颗草莓');
            

        

    

    


        


            


            

        

        


            

                this.body.shift();
            

        

    

    


        


            


            

        

        


            

                clearInterval(game.timer);
            

        

    

    


        


            


            

        

        


            

                location.reload();
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

Food.js文档

食物food类，用来产生食物

 


    


        


            


            

        

        


            

                function Food(gameSnake) {
            

        

    

    


        


            


            

        

        


            

                // 食物的位置 
            

        

    

    


        


            


            

        

        


            

                this.row = parseInt(Math.random() * gameSnake.row)
            

        

    

    


        


            


            

        

        


            

                this.col = parseInt(Math.random() * gameSnake.col)
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                Food.prototype.render = function() {
            

        

    

    


        


            


            

        

        


            

                game.setHTML(this.row, this.col);
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


        

    

食物随机生成在单元格中，利用do...while来实现

 


    


        


            


            

        

        


            

                function Food(gameSnake) {
            

        

    

    


        


            


            

        

        


            

                var self = this;
            

        

    

    


        


            


            

        

        


            

                // 下面的 do-while 循环语句作用是先创建一个 row 和 col 
            

        

    

    


        


            


            

        

        


            

                然后判断这个 row 和 col 是否在蛇的身上
            

        

    

    


        


            


            

        

        


            

                //do...while来创建食物 
            

        

    

    


        


            


            

        

        


            

                do {
            

        

    

    


        


            


            

        

        


            

                // 食物的位置 
            

        

    

    


        


            


            

        

        


            

                this.row = parseInt(Math.random() * gameSnake.row)
            

        

    

    


        


            


            

        

        


            

                this.col = parseInt(Math.random() * gameSnake.col)
            

        

    

    


        


            


            

        

        


            

                } while ((function() {
            

        

    

    


        


            


            

        

        


            

                // 遍历蛇的 row col 然后和 food 新随机出来的 row col 进行判断，是否重合 
            

        

    

    


        


            


            

        

        


            

                for (var i = 0; i < gameSnake.snake.body.length; i++) {
            

        

    

    


        


            


            

        

        


            

                if (self.row == gameSnake.snake.body[i].row && self.col == gameSnake.snake.body[i].col) {
            

        

    

    


        


            


            

        

        


            

                return true;
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                return false;
            

        

    

    


        


            


            

        

        


            

                })());
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

文章来源：csdn   作者：实习期小潘

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

一、原本的V4版本按需引入: main.js页面

import Echarts from 'echarts/lib/echarts' import 'echarts/lib/chart/pie' import 'echarts/lib/chart/bar' import 'echarts/lib/chart/line' Vue.prototype.echarts = Echarts 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

二、升级版本

！！！注意：要先删除插件，再重新安装插件，要不然是没效果的（我就说咋没效果）

• 删除echarts

npm uninstall echarts --save 


    

        1
    

• 再重新安装echarts

npm install echarts --save 


    

        1
    

三、按需处理

• 在main.js页面

参考官方：https://echarts.apache.org/zh/tutorial.html#%E5%9C%A8%E6%89%93%E5%8C%85%E7%8E%AF%E5%A2%83%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts

import * as Echarts from 'echarts/core'; import { BarChart, PieChart, LineChart } from 'echarts/charts'; import { TitleComponent, TooltipComponent, GridComponent, LegendComponent } from 'echarts/components'; // 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步 import { CanvasRenderer } from 'echarts/renderers'; Echarts.use([BarChart, PieChart, LineChart, TitleComponent, TooltipComponent, GridComponent, CanvasRenderer, LegendComponent]) Vue.prototype.echarts = Echarts 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

四、成功

文章来源：csdn   作者:木木木小罗

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

大家好，我是鱼皮，今天给大家推荐几个最近非常流行的编程网站，相信能够帮助大家提高编程效率、更好地学习编程。

热门编程网站推荐

Codepen

演示视频：https://www.bilibili.com/video/BV1im4y1X7zb/

国外的在线前端编程网站，在这里你可以发现很多国外大神编写的前端代码，除了各种网页布局代码外，更多的是各式各样好玩的、炫酷的、新颖的前端动画和特效。

比如圣诞节快到了，很多小伙伴问我能不能用代码画颗圣诞树。

我是不会，但是在这个网站中，输入 “Christmas Tree” 搜索，就能看到各种不同风格的圣诞树网页啦！

点击你看中的网页，就能进到代码编辑页面，在这里，你可以任意修改 HTML、CSS、JavaScript 前端代码，并且在底部的区域实时浏览运行效果，非常地方便！

编辑好网页后，可以在网页右下角的菜单中进行全屏浏览、收藏、克隆、分享等，还能直接将网页内嵌到我们自己的项目中，或者下载完整代码包到本地。

得益于前端技术的发展，这个网站为开发者提供了搜索项目、在线编辑、分享导出的一条龙服务，使得我们能够以自主练习的方式轻松学习别人优秀的代码。

下面再分享几个类似的网站。

CodeSandbox

代码沙箱，顾名思义，可以帮助你在隔离的环境中运行前端项目。

在这里你可以基于丰富的模板来创建自己的沙箱（项目），比如 React、Vue、Angular、VuePress、Svelte 等常见的前端框架：

创建好沙箱后，你就可以在线编辑代码、实时查看效果，或者分享沙箱给其他小伙伴啦~

JSFiddle

前端开发的练习场，也可以在线编写代码、实时浏览效果。相对于 Codepen，个人感觉这个网站的编辑体验更好：

当你在网上看到了一段不错的 JS 代码或者插件，不必再下载到本地了。直接把代码粘贴到 JSFiddle 中，就能以最快的方式查看运行效果了。现在很多前端组件库也用到了这种平台，给开发者所见即所得的体验。

JSRUN

国内的在线编程网站，除了前端外，甚至支持多达 30 多种编程语言的在线调试和运行！

同 Codepen 一样，你可以在这里看到很多别人编写的代码片段，直接下载。还可以保存和分享你的代码，建立自己的小代码合集。

不得不说，在国内，这个网站算是做的相当出色的了，访问速度和功能体验都很棒！

Gitpod

这个平台要比上面提到的网站更高级一些，它是一个强大的在线 IDE（集成编程环境），提供了 VSCode 风格的编辑器，允许你在线编写代码完成开发。

Gitpod 基于容器技术，可以帮助你一键编译、构建、运行任何 GitHub 项目，不止前端！而且每个项目的运行都是互相隔离的，随用随创建、用完可随时回收，非常灵活。

如果你看中了一个 GitHub 项目，又不想在本地去搭建各种环境去查看它的运行效果，那么最好的方式就是使用 Gitpod 来在线构建和执行。现在也有越来越多的 GitHub 项目接入了 Gitpod，大家只要看到下图的按钮，都是可以一键部署运行的，大大提高效率！

以上就是本期分享，有帮助的话帮忙点个 赞 吧，谢谢大家！

文章来源：csdn   作者：程序员鱼皮

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务