超级大乐透开奖结果:快速实现一个简单的canvas迷宫游戏的示例

  发布时间:2018-07-04 16:27:13   作者:安歌   我要评论

本篇文章主要介绍了快速实现一个简单的canvas迷宫游戏的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

前言

(最近设计模式看的有点头大,一直面对纯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的要求不高,拿来玩一下还是挺不错的。

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

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

相关文章

  • 浅谈移动端网页图片预加载方案

    这篇文章主要介绍了浅谈移动端网页图片预加载方案 的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-05
  • 使用HTML5 IndexDB存储图像和文件的示例

    这篇文章主要介绍了使用HTML5 IndexDB存储图像和文件的示例的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-05
  • H5 canvas中width、height和style的宽高区别详解

    这篇文章主要给大家介绍了关于H5 canvas中width、height和style的宽高区别的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需
    2018-11-02
  • Canvas中设置width与height的问题浅析

    这篇文章主要给大家介绍了关于Canvas中设置width与height问题的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下
    2018-11-01
  • html5 postMessage前端跨域并前端监听的方法示例

    这篇文章主要介绍了html5 postMessage前端跨域并前端监听的方法示例的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-01
  • 详解rem 适配布局

    当今手机种类繁多,所以不可能每一款手机都要写一套布局样式,rem 就是用来自适应布局的,本文就详细的介绍了rem 适配布局,具有一定的参考价值,感兴趣的小伙伴们可以参考
    2018-10-31
  • HTML5之消息通知的使用(Web Notification)

    通知可以说是web中比较常见且重要的功能,私信、在线提问、或者一些在线即时通讯工具我们总是希望第一时间知道对方有了新的反馈。本篇文章主要介绍了HTML5之消息通知的使用
    2018-10-30
  • HTML高亮关键字的实现代码

    这篇文章主要介绍了HTML高亮关键字的实现代码的相关资料,本以为一个 innerHTML replace 就能实现的简单操作,却遇到了许多的问题。本文就记录这些问题和最终的完美解决办
    2018-10-22
  • 教你如何一步一步用Canvas写一个贪吃蛇

    贪吃蛇是很常见的一种小游戏,这篇文章主要介绍了教你如何一步一步用Canvas写一个贪吃蛇,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-22
  • 详解Html5页面实现下载文件(apk、txt等)的三种方式

    这篇文章主要介绍了详解Html5页面实现下载文件(apk、txt等)的三种方式,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-22

最新评论

769| 265| 841| 589| 831| 674| 139| 41| 660| 542|