JS实现的贪吃蛇游戏完整实例


Posted in Javascript onJanuary 18, 2019

本文实例讲述了JS实现的贪吃蛇游戏。分享给大家供大家参考,具体如下:

思想:

1、设计蛇:属性有宽、高、方向、状态(有多少节),方法:显示,跑

2、设计食物:属性宽、高

3、显示蛇:根据状态向地图里加元素

4、蛇跑起来:下一节到前一节的位置,蛇头根据方向变,删除原来的蛇,新建蛇;当出界时,死亡,初始化;当蛇头吃到自己的时候,死亡,初始化

5、食物被吃掉,蛇加一节,去掉原来的食物,生成新的食物

6、添加定时器,绑定按键

完整示例:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
     content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style type="text/css">
    body {
      margin: 0;
      padding: 0;
    }
    .main {
      width: 800px;
      height: 400px;
      margin: 50px auto;
    }
    .btn {
      width: 100px;
      height: 40px;
    }
    .map {
      position: relative;
      width: 800px;
      height: 400px;
      background: #ccc;
    }
  </style>
</head>
<body>
<div class="main">
  <button class="btn" id="begin">开始游戏</button>
  <div class="map" id="map"></div>
  <script type="text/javascript">
    var map = document.getElementById('map');
    // 使用构造方法创建蛇,
    function Snake()
    {
      // 设置蛇的宽、高、默认走的方向
      this.width = 10;
      this.height = 10;
      this.direction = 'right';
      // 记住蛇的状态,当吃完食物的时候,就要加一个,初始为3个小点为一个蛇,
      this.body = [
        {x:2, y:0},  // 蛇头,第一个点
        {x:1, y:0},  // 蛇脖子,第二个点
        {x:0, y:0}  // 蛇尾,第三个点
      ];
      // 显示蛇
      this.display = function() {
        // 创建蛇
        for (var i=0; i<this.body.length; i++) {
          if (this.body[i].x != null) {  // 当吃到食物时,x==null,不能新建,不然会在0,0处新建一个
            var s = document.createElement('div');
            // 将节点保存到状态中,以便于后面删除
            this.body[i].flag = s;
            // 设置宽高
            s.style.width = this.width + 'px';
            s.style.height = this.height + 'px';
            s.style.borderRadius = "50%";
            s.style.background = "rgb(" + Math.floor(Math.random()*256) + "," + Math.floor(Math.random()*256) + "," + Math.floor(Math.random()*256) + ")";
            // 设置位置
            s.style.position = 'absolute';
            s.style.left = this.body[i].x * this.width + 'px';
            s.style.top = this.body[i].y * this.height + 'px';
            // 添加进去
            map.appendChild(s);
          }
        }
      };
      // 让蛇跑起来,后一个元素到前一个元素的位置
      // 蛇头根据方向处理,所以i不能等于0
      this.run = function() {
        // 后一个元素到前一个元素的位置
        for (var i=this.body.length-1; i>0; i--) {
          this.body[i].x = this.body[i-1].x;
          this.body[i].y = this.body[i-1].y;
        }
        // 根据方向处理蛇头
        switch(this.direction)
        {
          case "left":
            this.body[0].x -= 1;
            break;
          case "right":
            this.body[0].x += 1;
            break;
          case "up":
            this.body[0].y -= 1;
            break;
          case "down":
            this.body[0].y += 1;
            break;
        }
        // 判断是否出界,一蛇头判断,出界的话,
        if (this.body[0].x < 0 || this.body[0].x > 79 || this.body[0].y < 0 || this.body[0].y > 39) {
          clearInterval(timer);  // 清除定时器,
          alert("你瞎吗?撞死了!");
          // 删除旧的
          for (var i=0; i<this.body.length; i++) {
            if (this.body[i].flag != null) {  // 如果刚吃完就死掉,会加一个值为null的
              map.removeChild(this.body[i].flag);
            }
          }
          this.body = [  // 回到初始状态,
            {x:2, y:0},
            {x:1, y:0},
            {x:0, y:0}
          ];
          this.direction = 'right';
          this.display();  // 显示初始状态
          return false;  // 结束
        }
        // 判断蛇头吃到食物,xy坐标重合,
        if (this.body[0].x == food.x && this.body[0].y == food.y) {
          // 蛇加一节,因为根据最后节点定,下面display时,会自动赋值的
          this.body.push({x:null, y:null, flag: null});
          // 清除食物,重新生成食物
          map.removeChild(food.flag);
          food.display();
        }
        // 吃到自己死亡,从第五个开始与头判断,因为前四个永远撞不到
        for (var i=4; i<this.body.length; i++) {
          if (this.body[0].x == this.body[i].x && this.body[0].y == this.body[i].y) {
            clearInterval(timer);  // 清除定时器,
            alert("傻子!你怎么能吃自己呢?");
            // 删除旧的
            for (var i=0; i<this.body.length; i++) {
              if (this.body[i].flag != null) {  // 如果刚吃完就死掉,会加一个值为null的
                map.removeChild(this.body[i].flag);
              }
            }
            this.body = [  // 回到初始状态,
              {x:2, y:0},
              {x:1, y:0},
              {x:0, y:0}
            ];
            this.direction = 'right';
            this.display();  // 显示初始状态
            return false;  // 结束
          }
        }
        // 先删掉初始的蛇,在显示新蛇
        for (var i=0; i<this.body.length; i++) {
          if (this.body[i].flag != null) {  // 当吃到食物时,flag是等于null,且不能删除
            map.removeChild(this.body[i].flag);
          }
        }
        // 重新显示蛇
        this.display();
      }
    }
    // 构造食物
    function Food()
    {
      this.width = 10;
      this.height = 10;
      this.display = function() {
        var f = document.createElement('div');
        this.flag = f;
        f.style.width = this.width + 'px';
        f.style.height = this.height + 'px';
        f.style.background = 'red';
        f.style.borderRadius = '50%';
        f.style.position = 'absolute';
        this.x = Math.floor(Math.random()*80);
        this.y = Math.floor(Math.random()*40);
        f.style.left = this.x * this.width + 'px';
        f.style.top = this.y * this.height + 'px';
        map.appendChild(f);
      }
    }
    var snake = new Snake();
    var food = new Food();
    snake.display();  // 初始化显示
    food.display();
    // 给body加按键事件,上下左右
    document.body.onkeydown = function(e) {
      // 有事件对象就用事件对象,没有就自己创建一个,兼容低版本浏览器
      var ev = e || window.event;
      switch(ev.keyCode)
      {
        case 38:
          if (snake.direction != 'down') {  // 不允许返回,向上的时候不能向下
            snake.direction = "up";
          }
          break;
        case 40:
          if (snake.direction != "up") {
            snake.direction = "down";
          }
          break;
        case 37:
          if (snake.direction != "right") {
            snake.direction = "left";
          }
          break;
        case 39:
          if (snake.direction != "left") {
            snake.direction = "right";
          }
          break;
      }
    };
    // 点击开始时,动起来
    var begin = document.getElementById('begin');
    var timer;
    begin.onclick = function() {
      clearInterval(timer);
      // timer = setInterval(snake.run(), 500);  // 先执行run函数,把执行得到的结果,每500毫秒执行一次,不会在执行内部代码
      timer = setInterval("snake.run()", 500); // 小技巧,每500毫秒执行字符串,字符串执行内部代码
    };
  </script>
</div>
</body>
</html>

使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码,可得到如下运行效果:

JS实现的贪吃蛇游戏完整实例

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
ExtJS GTGrid 简单用户管理
Jul 01 Javascript
Jquery在IE7下无法使用 $.ajax解决方法
Nov 11 Javascript
Javascript 中的 call 和 apply使用介绍
Feb 22 Javascript
Javascript 面向对象(三)接口代码
May 23 Javascript
javascript图像处理—仿射变换深度理解
Jan 16 Javascript
优化javascript的执行效率一些方法总结
Dec 25 Javascript
javascript基于prototype实现类似OOP继承的方法
Dec 16 Javascript
JavaScript的模块化开发框架Sea.js上手指南
May 12 Javascript
jquery validate表单验证插件
Sep 06 Javascript
javascript实现简易计算器
Feb 01 Javascript
Angularjs上传图片实例详解
Aug 06 Javascript
vue使用swiper.js重叠轮播组建样式
Nov 14 Javascript
jquery的$().each和$.each的区别
Jan 18 #jQuery
使用form-create动态生成vue自定义组件和嵌套表单组件
Jan 18 #Javascript
jquery层次选择器的介绍
Jan 18 #jQuery
js实现图片放大并跟随鼠标移动特效
Jan 18 #Javascript
vue.js的双向数据绑定Object.defineProperty方法的神奇之处
Jan 18 #Javascript
jQuery无冲突模式详解
Jan 17 #jQuery
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 #jQuery
You might like
php获取指定范围内最接近数的方法
2015/06/02 PHP
PHP书写格式详解(必看)
2016/05/23 PHP
JQuery插件fancybox无法在弹出层使用左右键的解决办法
2013/12/25 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
2013/12/29 Javascript
javascript操作excel生成报表示例
2014/05/08 Javascript
JQuery控制radio选中和不选中方法总结
2015/04/15 Javascript
基于jquery实现复选框全选,反选,全不选等功能
2015/10/16 Javascript
浅析BootStrap模态框的使用(经典)
2016/04/29 Javascript
深入理解js数组的sort排序
2016/05/28 Javascript
jQuery原理系列-常用Dom操作详解
2016/06/07 Javascript
jquery插件autocomplete用法示例
2016/07/01 Javascript
Javascript使用SWFUpload进行多文件上传
2016/11/16 Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
2017/07/19 Javascript
JS实现按钮颜色切换效果
2020/09/05 Javascript
Vue项目组件化工程开发实践方案
2018/01/09 Javascript
JavaScript设计模式之代理模式简单实例教程
2018/07/03 Javascript
React router动态加载组件之适配器模式的应用详解
2018/09/12 Javascript
可能被忽略的一些JavaScript数组方法细节
2019/02/28 Javascript
利用angular自动编译andriod APK的绕坑经历分享
2019/03/08 Javascript
JS实现的对象去重功能示例
2019/06/04 Javascript
javascript 数组精简技巧小结
2020/02/26 Javascript
vue项目实现减少app.js和vender.js的体积操作
2020/11/12 Javascript
jquery实现穿梭框功能
2021/01/19 jQuery
Python实现在线程里运行scrapy的方法
2015/04/07 Python
python实现井字棋游戏
2020/03/30 Python
对Xpath 获取子标签下所有文本的方法详解
2019/01/02 Python
Pytorch 实现自定义参数层的例子
2019/08/17 Python
Python如何基于smtplib发不同格式的邮件
2019/12/30 Python
vue学习笔记之动态组件和v-once指令简单示例
2020/02/29 Python
如何基于Python实现word文档重新排版
2020/09/29 Python
Python3.9新特性详解
2020/10/10 Python
日本著名的平价时尚女性购物网站:Fifth
2016/08/24 全球购物
土木工程专业大学毕业生求职信
2013/10/13 职场文书
计算机专业毕业生自荐信
2013/12/31 职场文书
感情真挚的毕业生求职信
2014/07/19 职场文书
同事去世追悼词
2015/06/23 职场文书