js实现简单的贪吃蛇游戏


Posted in Javascript onApril 23, 2020

本文实例为大家分享了js实现贪吃蛇游戏的具体代码,供大家参考,具体内容如下

运行截图:

js实现简单的贪吃蛇游戏

源码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>贪吃蛇小游戏</title>
 
  <style>
    body {
      margin:0px;
      padding:0px;
 
    }
 
    #main {
      margin:100px;
    }
 
    .btn {
      width:100px;
      height:40px;
    }
 
    .gtitle {
      font-size:25px;
      font-weight: bold;
 
    }
 
    #gnum {
      color:red;
    }
  </style>
</head>
 
<body>
 
<div id="main">
  <h1>贪吃蛇</h1>
  <input class="btn" type="button" value="开始游戏" id="begin" />
  <input class="btn" type="button" value="暂停游戏" id="pause" />
  <span class="gtitle">第 <span id="gnum">1</span> 关</span>
 
  <script>
    var main = document.getElementById('main');
    var showcanvas = true; //是否开启画布格子
    /**
     * 地图对象的构造方法
     * @param atom 原子大小宽和高是一样的 10
     * @param xnum 横向原子的数量
     * @param ynum 纵向原子的数量
     * @constructor
     */
    function Map(atom, xnum, ynum){
      this.atom = atom; // 20x20
      this.xnum = xnum; //
      this.ynum = ynum;
 
      this.canvas = null;
 
      //创建画布的方法
      this.create = function(){
        this.canvas = document.createElement('div');
        this.canvas.style.cssText="position:relative;top:40px;border:1px solid darkred; background:#FAFAFA";
        this.canvas.style.width = this.atom * this.xnum + 'px'; //画布的宽
        this.canvas.style.height = this.atom * this.ynum + 'px'; //画布的高
        main.appendChild(this.canvas);
 
        if(showcanvas) {
          for(var y=0; y<ynum; y++) {
            for (var x = 0; x < xnum; x++) {
              var a = document.createElement('div');
              a.style.cssText = "border:1px solid yellow";
              a.style.width = this.atom + 'px';
              a.style.height = this.atom + 'px';
              a.style.backgroundColor = "LightSkyBlue";
              this.canvas.appendChild(a);
              a.style.position = 'absolute';
              a.style.left = x * this.atom + 'px';
              a.style.top = y*this.atom+'px';
            }
          }
        }
 
      }
 
    }
 
    /**
     * 创建食物的构造方法
     * @param map 地图对象
     * @constructor
     */
    function Food(map){
      this.width = map.atom;
      this.height = map.atom;
      this.bgcolor= "rgb("+Math.floor(Math.random()*200)+", "+Math.floor(Math.random()*200)+", " + Math.floor(Math.random() * 200) +")";
      this.x = Math.floor(Math.random()*map.xnum);
      this.y = Math.floor(Math.random()*map.ynum);
      this.flag = document.createElement('div');
      this.flag.style.width = this.width + 'px';
      this.flag.style.height = this.height + 'px';
      this.flag.style.backgroundColor = this.bgcolor;
      // this.flag.style.borderRadius = '50%';
      this.flag.style.position = 'absolute';
      this.flag.style.left = this.x * this.width +'px';
      this.flag.style.top = this.y * this.height + 'px';
 
      map.canvas.appendChild(this.flag);
    }
    function Snake(map) {
      //设置宽,高
      this.width=map.atom;
      this.height = map.atom;
      //默认走的方向
      this.direction = 'right';
 
      this.body = [
        {x:2, y:0}, //蛇头, 第一点 0
        {x:1, y:0}, //蛇脖子, 第二点 1
        {x:0, y:0} //蛇尾, 第三点  2
        //{x:null, y:null, flag:null} 3
      ];
      //显示蛇
      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.backgroundColor="rgb("+Math.floor(Math.random()*200)+", "+Math.floor(Math.random()*200)+", " + Math.floor(Math.random() * 200) +")";
            //s.style.borderRadius = '50%';
            //设置位置
            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.canvas.appendChild(s);
          }
 
        }
      }
      //让蛇运动起来
      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;
        }
        //默认是right left up down
        // 根据方向处理蛇头
        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;
        }
 
        //判断蛇头吃到食物, xy和食物的XY重合
        if(this.body[0].x ==food.x && this.body[0].y == food.y ){
          //蛇加一节, 根据最后节点定
          this.body.push({x:null, y:null, flag:null});
 
          //判读一下设置级别
          if(this.body.length > l.slength) {
            l.set();
          }
 
          map.canvas.removeChild(food.flag);
          food = new Food(map);
 
        }
        //判断是否出界, 蛇头
        if(this.body[0].x <0 || this.body[0].x > map.xnum-1 || this.body[0].y <0 || this.body[0].y > map.ynum -1) {
          clearInterval(timer); //清除定时器
 
          alert("怎么这么不小心撞墙了呢,摸摸头");
 
          //重新开始游戏
          restart(map, this)
 
          return false;
        }
 
        //判读是否和自己重合
        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("呀,怎么喜欢咬自己的肉肉");
 
            //重新开始游戏
            restart(map, this)
 
            return false;
          }
 
        }        
 
        for(var i=0; i<this.body.length; i++){
          if(this.body[i].flag != null) { //当吃到食物, flag是等null, 且不能删除
            map.canvas.removeChild(this.body[i].flag)
          }
        }
 
        this.display();
      }
 
    }
    //重新开始游戏
    function restart(map, snake) {
      for(var i=0; i<snake.body.length; i++) {
        map.canvas.removeChild(snake.body[i].flag);
      }
 
      snake.body = [
        {x:2, y:0}, //蛇头, 第一点 0
        {x:1, y:0}, //蛇脖子, 第二点 1
        {x:0, y:0} //蛇尾, 第三点  2
 
      ];
      snake.direction = 'right';
      snake.display();
      map.canvas.removeChild(food.flag);
      food = new Food(map);
 
    }
    //设置级别对象
    function Level() {
      this.num = 1; //第几级别
      this.speed= 300; //毫秒, 每升一关, 数量减少20, 速度就加快了
      this.slength = 8; //每个关的长度判断
 
      this.set = function() {
        this.num++;
        if(this.speed <= 50) {
          this.speed = 50;
        }else{
          this.speed -=50;
        }
        this.slength += 10; //这个可以自己定义
        this.display();
        start(); //重新开始, 速度加快
      }
 
      this.display = function() {
        document.getElementById('gnum').innerHTML = this.num;
      }
    }
    var l = new Level();
    l.display();
 
    //创建地图对象
    var map = new Map(20, 40, 20);
    map.create(); //显示画布
 
    //构造食物对象
    var food = new Food(map);
 
    //构造蛇对象
    var snake = new Snake(map);
    snake.display();
 
    // 组body加键盘事件, 上下左右
    window.onkeydown = function(e){
      var event = e || window.event;
 
      // console.log(event.keyCode);
 
      switch(event.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 timer; //变量可以提升
 
    function start() {
      clearInterval(timer);
      timer = setInterval(function(){
        snake.run();
      },l.speed);
    }
 
    document.getElementById('begin').onclick=function(){
      start();
    }
 
    document.getElementById('pause').onclick=function() {
      clearInterval(timer);
    }
  </script>
</div>
 
</body>
</html>

小编还为大家准备了精彩的专题:javascript经典小游戏汇总

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
Mar 25 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
Mar 13 Javascript
javascript移动开发中touch触摸事件详解
Mar 18 Javascript
jQuery的内容过滤选择器学习教程
Apr 18 Javascript
基于JavaScript FileReader上传图片显示本地链接
May 27 Javascript
Html5 js实现手风琴效果
Apr 17 Javascript
javascript设计模式之中介者模式学习笔记
Feb 15 Javascript
vue指令以及dom操作详解
Mar 04 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
Jan 31 Javascript
详解easyui基于 layui.laydate日期扩展组件
Jul 18 Javascript
Vue 解决多级动态面包屑导航的问题
Nov 04 Javascript
JS前后端实现身份证号验证代码解析
Jul 23 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
Apr 23 #Javascript
vue项目打包之开发环境和部署环境的实现
Apr 23 #Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
Apr 23 #Javascript
谈谈我在vue-cli3中用预渲染遇到的坑
Apr 22 #Javascript
如何修改Vue打包后文件的接口地址配置的方法
Apr 22 #Javascript
nuxt+axios实现打包后动态修改请求地址的方法
Apr 22 #Javascript
JS脚本实现定时到网站上签到/签退功能
Apr 22 #Javascript
You might like
php使用curl访问https示例分享
2014/01/17 PHP
PHP如何防止用户重复提交表单
2020/12/09 PHP
javascript 处理HTML元素必须避免使用的一种方法
2009/07/30 Javascript
JavaScript中变量提升 Hoisting
2012/07/03 Javascript
js读写(删除)Cookie实例详解
2013/04/17 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
2013/05/27 Javascript
js导航栏单击事件背景变换示例代码
2014/01/13 Javascript
DeviceOne 让你一见钟情的App快速开发平台
2016/02/17 Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
2016/02/25 Javascript
JS原型、原型链深入理解
2016/02/27 Javascript
jQuery实现下拉加载功能实例代码
2016/04/01 Javascript
vue.js 表格分页ajax 异步加载数据
2016/10/18 Javascript
深入理解javascript函数参数与闭包
2016/12/12 Javascript
Vue.js学习笔记之修饰符详解
2017/07/25 Javascript
关于axios如何全局注册浅析
2018/01/14 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
2018/08/20 Javascript
详解vue配置后台接口方式
2019/03/29 Javascript
微信小程序实现图片选择并预览功能
2019/07/25 Javascript
微信小程序实现pdf、word等格式文件上传的方法
2019/09/10 Javascript
vue自定义组件实现双向绑定
2021/01/13 Vue.js
ReactRouter的实现方法
2021/01/25 Javascript
Python 实现 贪吃蛇大作战 代码分享
2016/09/07 Python
Python实现爬虫爬取NBA数据功能示例
2018/05/28 Python
Django REST framework 视图和路由详解
2019/07/19 Python
python pillow模块使用方法详解
2019/08/30 Python
python函数局部变量、全局变量、递归知识点总结
2019/11/15 Python
python 检测nginx服务邮件报警的脚本
2020/12/31 Python
50个强大璀璨的CSS3/JS技术运用实例
2010/02/27 HTML / CSS
有趣的流行文化T恤、马克杯、手机壳和更多:Look Human
2019/01/07 全球购物
《小猫刮胡子》教学反思
2014/02/21 职场文书
奶茶店创业计划书
2014/08/14 职场文书
授权委托书(法人单位用)
2014/09/29 职场文书
PHP设计模式(观察者模式)
2021/07/07 PHP
dubbo服务整合zipkin详解
2021/07/26 Java/Android
简述Java中throw-throws异常抛出
2021/08/07 Java/Android
MongoDB连接数据库并创建数据等使用方法
2021/11/27 MongoDB