迅速完成1个简易的canvas迷宫手机游戏的示例

日期:2021-02-23 类型:科技新闻 

关键词:h5平台,手机端网页,手机端网页模板,免费的h5场景制作平台,h5制作工具

序言

(近期设计方案方式看的有点点头大,1直应对纯js确实是一些枯燥乏味-_-。因此写1点趣味的物品调解1下)
如今canvas早已不算新鮮了,但是因为平常业务流程中其实不常见,因此实践活动其实不多,今日共享1下,怎样完成简易canvas迷宫。这个事例来源于于《html5秘籍》第2版,编码有略微做了点调剂。

因为正中间有1步应用canvas获得照片信息内容的情况下,务必应用服务器自然环境。因此我先写了1个样例扔在服务器上,大伙儿能够先体验1下实际效果(用造就感做为驱动器力哈哈哈)

点我体验

git详细地址

文章正文

完成这个小手机游戏也不难,让大家想一想,1个迷宫手机游戏有哪些基础要素。

最先自然得有个地形图,随后得有个挪动的奸险小人,这两个大家运用cavans来绘图;

接下来是物件挪动的程序流程,这个程序流程关键包含2个层面:

1.让物件跟大家特定的命令来挪动;
2.检验物件是不是碰到墙体或出口。

绘图迷宫的地形图和挪动的奸险小人
绘图地形图的关键流程是:

  1. 获得1张地形图的照片
  2. 运用cavans绘图图象。

迷宫地形图的转化成,能够依靠谷歌的1个迷宫线上转化成器来得到。

绘图奸险小人也是1样立即找1个奸险小人的照片便可,但是这里要留意的是,要找正方形的照片,由于1会大家必须做挪动的碰撞检验,方形较为好分辨。

接下来就要写绘图迷宫和奸险小人的关键涵数

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引进也沒有难题。别的一部分较为简易,已不赘述。

挪动涵数

挪动的关键基本原理是:

接纳特定的客户键入(在这里是回应方位键),变换成对应的挪动命令。随后周期性的查验挪动命令,绘图对应的总体目标部位。举个简易的事例:

例如每按下1次方位键上,就纪录下应当往上挪动,随后每隔100毫秒查验当今的挪动命令,绘图应当挪动的总体目标地址,反复这个全过程。编码也较为简易:

// 挪动涵数
function processKey(e) {
  dx = 0
  dy = 0
  // 左右上下方位键检验
  if (e.keyCode === 38) {
    dy = ⑴
  }
  if (e.keyCode === 40) {
    dy = 1
  }
  if (e.keyCode === 37) {
    dx = ⑴
  }
  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
    }
    // 这里假如重设的话变为非全自动挪动,也便是每按下1次方位键只前行1步,因为现阶段体验不太好因此先不做重设
    // 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些别的的作用,例如提醒回答等。至于拆换地形图也较为简易:把地形图对应的文档详细地址,起始点座标,回答照片相对路径等存在1个目标里,随后设定1个地形图数字能量数组,点一下的情况下切换地形图并再次3D渲染便可以了。也有1些值得提升的地区,例如:

  1. 碰撞检验在转弯的地区体验不佳;
  2. 当今状况运作时有运动轨迹,在回答方式下应当怎样去掉运动轨迹?

有兴趣爱好的同学能够试着自身完成下。

小结

这个事例相对性较为简易,对js的规定不高,拿来玩1下還是挺非常好的。

随后仍然是每次都1样的末尾,假如內容有不正确的地区欢迎指出;假如对你有协助,欢迎点赞和个人收藏,转载请征得愿意后著明出处,假如有难题也欢迎私信沟通交流,首页有电子邮箱详细地址~溜了

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。

上一篇:HTML5 Canvas完成变大镜实际效果示例 返回下一篇:没有了