快速实现一个简单的canvas迷宫游戏的示例


Posted in HTML / CSS onJuly 04, 2018

前言

(最近设计模式看的有点头大,一直面对纯js实在是有些枯燥-_-。所以写一点有趣的东西调剂一下)
现在canvas已经不算新鲜了,不过由于日常业务中并不常用,所以实践并不多,今天分享一下,如何实现简单canvas迷宫。这个例子来源于《html5秘籍》第二版,代码有稍微做了点调整。

由于中间有一步使用canvas获取图片信息的时候,必须使用服务器环境。所以我先写了一个样例扔在服务器上,大家可以先体验一下效果(用成就感作为驱动力哈哈哈)

点我体验

git地址

正文

实现这个小游戏也不难,让我们想想,一个迷宫游戏有哪些基本要素。

首先当然得有个地图,然后得有个移动的小人,这两个我们利用cavans来绘制;

接下来是物体移动的程序,这个程序主要包括2个方面:

1.让物体跟我们指定的指令来移动;
2.检测物体是否碰到墙体或者出口。

绘制迷宫的地图和移动的小人
绘制地图的主要步骤是:

  1. 获取一张地图的图片
  2. 利用cavans绘制图像。

迷宫地图的生成,可以借助谷歌的一个迷宫在线生成器来获得。

绘制小人也是一样直接找一个小人的图片即可,不过这里要注意的是,要找正方形的图片,因为一会我们需要做移动的碰撞检测,方形比较好判断。

接下来就要写绘制迷宫和小人的主要函数

function drawMaze(mazeFile, startingX, startingY) {
  var imgMaze = new Image()
  imgMaze.onload = function () {
    // 画布大小调整
    canvas.width = imgMaze.width
    canvas.height = imgMaze.height

    // 绘制笑脸
    var imgFace = document.getElementById("face")
    context.drawImage(imgMaze, 0, 0)

    x = startingX
    y = startingY
    context.drawImage(imgFace, x, y)
    context.stroke()
  }
  imgMaze.src = mazeFile
}

mazeFile是迷宫的图片地址,startingX和startingY,是起始点的坐标。在这里图片引入的方式用了2种,原因是小人的图片我不经常更换,就直接写在页面里,迷宫的地图打算做成可变的,所以在js里引入,你想把图片都直接用js引入也没有问题。其他部分比较简单,不再赘述。

移动函数

移动的主要原理是:

接受指定的用户输入(在这里是响应方向键),转换成对应的移动指令。然后周期性的检查移动指令,绘制对应的目标位置。举个简单的例子:

比如每按下一次方向键上,就记录下应该往上移动,然后每隔100毫秒检查当前的移动指令,绘制应该移动的目标地点,重复这个过程。代码也比较简单:

// 移动函数
function processKey(e) {
  dx = 0
  dy = 0
  // 上下左右方向键检测
  if (e.keyCode === 38) {
    dy = -1
  }
  if (e.keyCode === 40) {
    dy = 1
  }
  if (e.keyCode === 37) {
    dx = -1
  }
  if (e.keyCode === 39) {
    dx = 1
  }
}

// 绘制帧
function drawFrame() {
  if (dx != 0 || dy != 0) {
    // context.clearRect(x,y,canvas.width,canvas.height)
    // 绘制移动轨迹
    context.beginPath();
    context.fillStyle = "rgb(254,244,207)"
    context.rect(x, y, 15, 15)
    context.fill()
    x += dx
    y += dy
    // 碰撞检测
    if (checkForCollision()) {
      x -= dx
      y -= dy
      dx = 0
      dy = 0
    }
    
    //绘制小人应该移动的地点
    var imgFace = document.getElementById('face')
    context.drawImage(imgFace, x, y)

    if (canvas.height - y < 17) {
      // isFirst = false
      alert('恭喜你通关 游戏结束')
      return false
    }
    // 这里如果重置的话变成非自动移动,也就是每按下一次方向键只前进一步,由于目前体验不好所以先不做重置
    // dx = 0
    // dy = 0
  }
  setTimeout(drawFrame, 20)
}

上述代码中,移动函数比较简单,绘制帧的函数里面比较重要的就是碰撞检测函数,在下面详细解释。

碰撞检测

要检测物体与墙体是否碰撞,通常情况是要先把地图信息保存到内存里,然后在移动物体时检测是否与当前的某个墙体碰撞,但是由于我们的地图背景是黑白迷宫,所以可以使用颜色来检测碰撞。具体的做法是:

获取当前物体的坐标位置,利用canvas检测当前地图上这个位置的颜色是否为黑色,如果是,说是是墙体,不应该执行移动,下面就是代码:

function checkForCollision() {
  var imageData = context.getImageData(x - 1, y - 1, 15 + 2, 15 + 2)
  var pixels = imageData.data

  for (var i = 0, len = pixels.length; i < len; i++) {
    var red = pixels[i],
        green = pixels[i + 1]
        blue = pixels[i + 2]
        alpha = pixels[i + 3]

    // 检测是否碰到黑色的墙
    if (red === 0 && green === 0 && blue === 0) {
      return true
    }
  }
  return false
}

在这里,15是小人的宽度,我们检测小人两侧各1px范围(对应代码中的getImageData(x - 1, y - 1, 15 + 2, 15 + 2)可以稍微思考下这里为什么是+2),如果是黑色,说明检测到碰撞。

其余

在代码里,我加了一些其他的功能,比如提示答案等。至于更换地图也比较简单:把地图对应的文件地址,起点坐标,答案图片路径等存在一个对象里,然后设置一个地图数组,点击的时候切换地图并重新渲染就可以了。还有一些值得优化的地方,比如:

  1. 碰撞检测在拐弯的地方体验不佳;
  2. 当前情况运行时有轨迹,在答案模式下应该如何去掉轨迹?

有兴趣的同学可以试着自己实现下。

小结

这个例子相对比较简单,对js的要求不高,拿来玩一下还是挺不错的。

然后依然是每次都一样的结尾,如果内容有错误的地方欢迎指出;如果对你有帮助,欢迎点赞和收藏,转载请征得同意后著明出处,如果有问题也欢迎私信交流,主页有邮箱地址~溜了

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

HTML / CSS 相关文章推荐
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
Oct 10 HTML / CSS
详解如何在css中引入自定义字体(font-face)
May 17 HTML / CSS
CSS3 Flex 弹性布局实例代码详解
Nov 01 HTML / CSS
css和css3弹性盒模型实现元素宽度(高度)自适应
May 15 HTML / CSS
html5的新玩法——语音搜索
Jan 03 HTML / CSS
html5中canvas学习笔记2-判断浏览器是否支持canvas
Jan 06 HTML / CSS
HTML5地理定位实例
Oct 15 HTML / CSS
深入解析HTML5中的Blob对象的使用
Sep 08 HTML / CSS
html5用video标签流式加载的实现
May 20 HTML / CSS
面试必问:圣杯布局和双飞翼布局的区别
May 13 HTML / CSS
CSS变量实现主题切换的方法
Jun 23 HTML / CSS
el-form每行显示两列底部按钮居中效果的实现
Aug 05 HTML / CSS
HTML5中form如何关闭自动完成功能的方法
Jul 02 #HTML / CSS
Canvas实现保存图片到本地的示例代码
Jun 28 #HTML / CSS
html5手机端页面可以向右滑动导致样式受影响的问题
Jun 20 #HTML / CSS
canvas环形倒计时组件的示例代码
Jun 14 #HTML / CSS
canvas里面如何基于随机点绘制一个多边形的方法
Jun 13 #HTML / CSS
html5 canvas简单封装一个echarts实现不了的饼图
Jun 12 #HTML / CSS
基于canvas的骨骼动画的示例代码
Jun 12 #HTML / CSS
You might like
PHP实现返回JSON和XML的类分享
2015/01/28 PHP
Yii2 rbac权限控制之rule教程详解
2016/06/23 PHP
php插入含有特殊符号数据的处理方法
2016/11/24 PHP
利用PHP获取汉字首字母并且分组排序详解
2017/10/22 PHP
Laravel框架查询构造器简单示例
2019/05/08 PHP
使用JQUERY Tabs插件宿主IFRAMES
2010/01/01 Javascript
文本框中,回车键触发事件的js代码[多浏览器兼容]
2010/06/07 Javascript
JQuery开发的数独游戏代码
2010/10/29 Javascript
javascript之典型高阶函数应用介绍二
2013/01/10 Javascript
jquery js 重置表单 reset()具体实现代码
2013/08/05 Javascript
教你如何使用PHP输出中文JSON字符串
2014/05/22 Javascript
JavaScript基础篇(6)之函数表达式闭包
2015/12/11 Javascript
JS小数运算出现多为小数问题的解决方法
2016/06/02 Javascript
微信小程序 网络API发起请求详解
2016/11/09 Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
2016/11/18 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
2016/11/22 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
2017/05/17 Javascript
Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
2017/06/04 Javascript
windows下更新npm和node的方法
2017/11/30 Javascript
Javascript实现秒表倒计时功能
2018/11/17 Javascript
es6中比较有用的7个技巧小结
2019/07/12 Javascript
Node快速切换版本、版本回退(降级)、版本更新(升级)
2021/01/07 Javascript
[58:23]LGD vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python原始套接字编程示例分享
2014/02/21 Python
python自动从arxiv下载paper的示例代码
2020/12/05 Python
英国花园药房: The Garden Pharmacy
2017/12/28 全球购物
.NET概念性的面试题
2012/02/29 面试题
手术室护士自我鉴定
2013/10/14 职场文书
个人应聘自我评价分享
2013/11/18 职场文书
行政经理的岗位职责
2013/11/23 职场文书
参观接待方案
2014/03/17 职场文书
2014年度个人工作总结
2014/11/07 职场文书
教代会开幕词
2015/01/28 职场文书
处罚决定书范文
2015/06/24 职场文书
java中重写父类方法加不加@Override详解
2021/06/21 Java/Android
SQL Server中搜索特定的对象
2022/05/25 SQL Server