JS实现的贪吃蛇游戏案例详解


Posted in Javascript onMay 01, 2019

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

github项目地址:https://github.com/LEERTRT/Snake

在<script></script>中,文档加载完毕后调用:

$(function () {
  var game = new Game("canvas");
  game.init();
});

其中构造函数Game()接收canvas的id作为参数,实例化对象以后,调用init()函数,init()函数里面有三个函数,接下来会一个一个说明。

/**
 * 初始化函数,生成构造函数实例后调用此函数
 */
this.init = function () {
  /**
   * 初始化画布和果实
   */
  this.initData();
  /**
   * 1.清空画布;2.画背景格子;3.画蛇;4.画果实
   */
  this.draw();
  /**
   * 绑定事件:方向和速度控制
   */
  this.bindEvents();
};

第一个,initData():在initData()函数里面,声明画布,果实,画布大小,格子数量,方向,速度,蛇等:

var canvas = document.getElementById(id);
if (canvas && canvas.getContext) {
  this.ctx = canvas.getContext('2d');
}
this.foodNode = null;//果实
this.size = canvas.width || $(canvas).width();//画布大小
this.columns = 50;//画布行列数
this.direction = 0;//方向
this.speed = 10;//速度
this.bodyNodes = [];//蛇体

然后随机生成蛇的位置:

var rdx = Math.round(Math.random() * (this.columns - 1));
var rdy = Math.round(Math.random() * (this.columns - 1));

把随机生成的rdx, rdy放进记录蛇体的数组中:

this.bodyNodes.push({
  x: rdx, y: rdy
});

到此,initData()完成。

第二个,draw():draw()函数包含四步:1.清空画布;2.画背景;3.画蛇;4.画果实:

this.draw = function () {
  /**
   * 清空画布
   */
  this.clear();
  /**
   * 画画布
   */
  this.drawBG();
  /**
   * 画蛇体
   */
  this.drawBody();
  /**
   *画果实
   */
  this.drawFood();
};

1.清空画布

使用clearRect(0,0,size,size)即可:

this.ctx.clearRect(0, 0, this.size, this.size);

2.画背景

每个格子大小 = 画布尺寸/格子数量,然后一行一行画就行了,和画棋盘一样:

var _this = this;
var x = 0, y = 0, size = _this.size / _this.columns;
_this.ctx.strokeStyle = "rgba(124,124,124,0.1)";
//一行一行画画布
for (var i = 0; i < _this.columns; i++) {
  y = i * size;
  for (var j = 0; j < _this.columns; j++) {
    x = j * size;
    _this.ctx.strokeRect(x, y, size, size);
  }
}

3.画蛇

前面在initData()里面,把随机生成的蛇的位置放进了bodyNodes数组里面,

这里把bodyNodes里面的元素用each()取出来画即可。因为后面当蛇吃了果实后,bodyNodes里面的

元素会增加,所以用each取出所有元素绘画,现在是在初始化阶段,bodyNodes里面只有在initData()

的一个随机生成的元素。

var nodes = _this.bodyNodes;
$.each(nodes, function (i, node) {
  _this.ctx.fillRect(node.x * size, node.y * size, size, size);
});

4.画果实

画果实的时候,先判断foodNode是否存在,存在的话就直接画,不存在随机生成位置,

注意,这时候要判断随机生成的果实位置有没有和蛇重合,重合了要重新画:

//如果果实重新出现的位置和蛇体重合,重画果实
if (_this.Utils.contains(_this.bodyNodes, {x: rdx, y: rdy})) {
   _this.drawFood();
} else {
   _this.ctx.strokeRect(rdx * size, rdy * size, size, size);
   _this.foodNode = {x: rdx, y: rdy};
}

到此,初始化画布和果实数据;绘画已经完成,这一块属于静态,接下来是动态的绑定事件。

这里主要描述贪吃蛇动态内容,比如前进,吃果实后变大,越界,速度控制等。

在前面,init()函数已经 完成了initData()和draw(),接下来是最后一个函数,bindEvents()。

在bindEvents()函数里面,有2个函数:①方向控制;②时间控制。

①方向控制directionContoller

document.body.onkeydown捕获按键,对ketCode进行判断,左(37),上(38),右(39),下(40),再将direction根据keyCode置为自己设置的标志即可。这里需要注意一点:如果这时候的方向为x,而按下的方向为-x,那么按键无效。比如现在方向是向左,而按下右是无效转弯的。

case 37: // 左, 1表示右,即当蛇向右行时,按左键不能改变方向,下面同理
  if (_this.direction == 1) return;
  _this.direction = -1;
  break;

设置好方向后,调用move()函数,这里控制蛇的移动,就是说到底就是在蛇体数组里面新增头元素,去掉尾元素,这里还要进行2个判断:1)蛇有没有咬到自己;2)有没有出界。

调用food()方法判断蛇是否吃到果实,在蛇数组里面设置好元素后,draw()重绘,以此完成了蛇的移动和吃果实。

this.food = function () {
  var _this = this;
  var headNode = _this.bodyNodes[0];
  //吃到果实
  if (_this.Utils.equals(headNode, _this.foodNode)) {
    _this.bodyNodes.push(_this.foodNode);//push()方法可向数组的末尾添加一个或多个元素,并返回新的长度。
    _this.foodNode = null;
    var score = _this.bodyNodes.length - 1;
    $('#score').text(score);
    if (score % 10 == 0) {//加速提高难度
      _this.speed += 10;
      _this.timerController();
    }
  }
};

②timerController

时间控制,

利用setInterval()函数定时调用move()方法,时间为6000/speed。

this.timerController = function () {
  var _this = this;
  if (_this.timer) {
    clearInterval(_this.timer);
  }
  _this.timer = setInterval(function () {
    _this.move();
  }, 6000 / _this.speed);
  $('#speed').text(_this.speed);
};

最后是工具类方法contains()和equesl()。contains用来判断新生成随机果实的位置和蛇重合时重新生成随机果实,以及蛇自己碰到自己时算游戏结束。

equals用来判断蛇到果实没有。他们的区别就是,contains要用each比较,因为蛇体数组有多个,所以需要循环一个一个比较。而equals()只比较蛇头和果实重合,所以不用循环。

this.Utils = {
  contains: function (arr, o) {
    var _this = this;
    if (!arr || !o) return false;
    var flag = false;
    $.each(arr, function () {
      if (!this) return true;
      if (_this.equals(this, o)) {
        flag = true;
        return false;
      }
    });
    return flag;
  },
  equals: function (o1, o2) {
    if (o1 == o2) return true;
    if (!o1 || !o2) return false;
    return o1.x == o2.x && o1.y == o2.y;
  }
};

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

Javascript 相关文章推荐
javascript onmouseout 解决办法
Jul 17 Javascript
理解Javascript_12_执行模型浅析
Oct 18 Javascript
用JavaScript仿PS里的羽化效果代码
Dec 20 Javascript
js有序数组的连接问题
Oct 01 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
Aug 15 Javascript
javaScript中slice函数用法实例分析
Jun 08 Javascript
JavaScript中的setMilliseconds()方法使用详解
Jun 11 Javascript
JS使用post提交的两种方式
Dec 03 Javascript
jQuery点击输入框显示验证码图片
May 19 Javascript
深入分析javascript中的错误处理机制
Jul 17 Javascript
AngularJS基础 ng-include 指令示例讲解
Aug 01 Javascript
归纳下js面向对象的几种常见写法总结
Aug 24 Javascript
javascript原型链学习记录之继承实现方式分析
May 01 #Javascript
微信小程序实现卡片左右滑动效果的示例代码
May 01 #Javascript
微信小程序常见页面跳转操作简单示例
May 01 #Javascript
浅谈对于react-thunk中间件的简单理解
May 01 #Javascript
vue增加强缓存和版本号的实现方法
May 01 #Javascript
vue组件化中slot的基本使用方法
May 01 #Javascript
Vue基本使用之对象提供的属性功能
Apr 30 #Javascript
You might like
用PHP伪造referer突破网盘禁止外连的代码
2008/06/15 PHP
PHP中使用FFMPEG获取视频缩略图和视频总时长实例
2014/05/04 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十二)
2014/06/25 PHP
ext监听事件方法[初级篇]
2008/04/27 Javascript
input+select(multiple) 实现下拉框输入值
2009/05/21 Javascript
javascript attachEvent绑定多个事件执行顺序问题
2010/10/20 Javascript
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
2012/08/14 Javascript
jquery表格内容筛选实现思路及代码
2013/04/16 Javascript
Jquery实现的tab效果可以指定默认显示第几页
2013/10/16 Javascript
利用javascript数组长度循环数组内所有元素
2013/12/27 Javascript
fullpage.js全屏滚动插件使用实例
2016/09/06 Javascript
AngularJS中的缓存使用
2017/01/11 Javascript
angular4实现tab栏切换的方法示例
2017/10/21 Javascript
JavaScript实现数值自动增加动画
2017/12/28 Javascript
关于axios如何全局注册浅析
2018/01/14 Javascript
JS实现动态生成html table表格的方法分析
2018/07/11 Javascript
JavaScript闭包与作用域链实例分析
2019/01/21 Javascript
浅谈Vue.set实际上是什么
2019/10/17 Javascript
[04:56]经典回顾:前Ehome 与 前LGD
2015/02/26 DOTA
Python写的Discuz7.2版faq.php注入漏洞工具
2014/08/06 Python
Python xlrd读取excel日期类型的2种方法
2015/04/28 Python
python中安装模块包版本冲突问题的解决
2017/05/02 Python
Python使用filetype精确判断文件类型
2017/07/02 Python
Python安装图文教程 Pycharm安装教程
2018/03/27 Python
python批量下载抖音视频
2019/06/17 Python
对Python的交互模式和直接运行.py文件的区别详解
2019/06/29 Python
python实现126邮箱发送邮件
2020/05/20 Python
爱尔兰灯和灯具网上商店:Lights.ie
2018/03/26 全球购物
eDreams葡萄牙:全球最大的在线旅行社之一
2019/04/15 全球购物
颇特女士:NET-A-PORTER(直邮中国)
2020/07/11 全球购物
房地产财务管理制度
2014/02/02 职场文书
街道党工委党的群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
2015年组织委员工作总结
2015/04/23 职场文书
少儿励志名言(80句)
2019/08/14 职场文书
python 下划线的多种应用场景总结
2021/05/12 Python
python中os.path.join()函数实例用法
2021/05/26 Python