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字符串处理函数 - split()、join()、substring()和indexOf()
Jun 02 Javascript
jQuery点击后一组图片左右滑动的实现代码
Aug 16 Javascript
jQuery实现单行文字间歇向上滚动源代码
Jun 02 Javascript
javascript实现的一个带下拉框功能的文本框
May 08 Javascript
jQuery中even选择器的定义和用法
Dec 23 Javascript
JQuery实现鼠标移动图片显示描述层的方法
Jun 25 Javascript
jquery实现邮箱自动填充提示功能
Nov 17 Javascript
javascript淘宝主图放大镜功能
Oct 20 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
React BootStrap用户体验框架快速上手
Mar 06 Javascript
JavaScript实现移动端弹窗后禁止滚动
May 25 Javascript
springboot+vue实现文件上传下载
Nov 17 Vue.js
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 替换模板变量实现步骤
2009/08/24 PHP
5种PHP创建数组的实例代码分享
2014/01/17 PHP
php fsockopen解决办法 php实现多线程
2014/01/20 PHP
PHP获取ip对应地区和使用网络类型的方法
2015/03/11 PHP
php post json参数的传递和接收处理方法
2018/05/31 PHP
Prototype 工具函数 学习
2009/07/23 Javascript
JavaScript OOP面向对象介绍
2010/12/02 Javascript
JQuery之拖拽插件实现代码
2011/04/14 Javascript
jquery删除ID为sNews的tr元素的内容
2014/04/10 Javascript
让alert不出现弹窗的两种方法
2014/05/18 Javascript
ext前台接收action传过来的json数据示例
2014/06/17 Javascript
Javascript MVC框架Backbone.js详解
2014/09/18 Javascript
纯Javascript实现ping功能的方法
2015/03/20 Javascript
js实现二级菜单渐隐显示
2015/11/03 Javascript
jQuery Mobile 触摸事件实例
2016/06/04 Javascript
检查表单元素的值是否为空的实例代码
2016/06/16 Javascript
js中获取时间new Date()的全面介绍
2016/06/20 Javascript
JS表单数据验证的正则表达式(常用)
2017/02/18 Javascript
Vue2.0实现将页面中表格数据导出excel的实例
2017/08/09 Javascript
webpack处理 css\less\sass 样式的方法
2017/08/21 Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
2020/05/13 Javascript
python顺序的读取文件夹下名称有序的文件方法
2018/07/11 Python
解决安装pycharm后不能执行python脚本的问题
2019/01/19 Python
使用Python-OpenCV向图片添加噪声的实现(高斯噪声、椒盐噪声)
2019/05/28 Python
Python 多个图同时在不同窗口显示的实现方法
2019/07/07 Python
利用anaconda作为python的依赖库管理方法
2019/08/13 Python
CSS3实现DIV圆角效果完整代码
2012/10/10 HTML / CSS
阿拉伯书店:Jamalon
2019/07/24 全球购物
一家专门经营包包的英国网站:MyBag
2019/09/08 全球购物
水果连锁超市创业计划书
2014/01/24 职场文书
哈弗商学院毕业生求职信
2014/02/26 职场文书
学校后勤工作总结2015
2015/05/15 职场文书
服务行业标语口号
2015/12/26 职场文书
《一面五星红旗》教学反思
2016/02/23 职场文书
CSS实现隐藏搜索框功能(动画正反向序列)
2021/07/21 HTML / CSS
Apache Hudi的多版本清理服务彻底讲解
2022/03/31 Servers