Using canvas to implement a maze game

This article mainly introduces the use of canvas to implement maze games. It has certain reference value. Now I share it with you. Friends in need can refer to it.

Preface

(recent design The pattern is a bit overwhelming, and it is a bit boring to face pure js all the time -_-. So write something interesting to spice it up)
Nowcanvas is not new anymore, but due to daily business It is not commonly used in , so there is not much practice. Today I will share how to implement a simple canvas maze. This example comes from the second edition of "html5 cheats", and the code has been slightly adjusted.

Because there is a step in the middle when using canvas to obtain image information, must use the server environment. So I first wrote a sample and threw it on the server. You can experience the effect first (use the sense of achievement as the driving force hahaha)

Text

It is not difficult to implement this small game. Let's think about the basic elements of a maze game.

Of course there must be a map first, and then there must be a moving villain. We use cavans to draw these two;

Continue The following is the object movement program. This program mainly includes two aspects:

1. Let the object move according to the instructions we specify;
2. Detect whether the object touches the wall body or export.

Drawing the map of the maze and the moving villain

The main steps to draw the map are:

1. Get a picture of the map

2. Use cavans to draw images.

The generation of the maze map can be obtained with the help of an online maze generator from Google.

The same is true for drawing a villain. Just look for a picture of a villain. However, what you need to pay attention to here is that you need to find a square picture, because we will need to do mobile collision detection later. , square shape is easier to judge.

The next step is to write the main function for drawing the maze and the villain

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 is the image address of the maze, startingX and startingY is the coordinate of the starting point. There are two ways to introduce pictures here. The reason is that I don’t change the pictures of the villain often, so I write them directly on the page. The map of the maze is intended to be variable, so I introduce it in js. If you want to There is no problem if you import it directly using js. The other parts are relatively simple and will not be described again.

Move function

The main principle of movement is:
Accept specified user input (here, the response direction key) and convert it into the corresponding movement instruction. Then periodically check the movement instructions and draw the corresponding target position. To give a simple example:

For example, every time the up direction key is pressed, it is recorded that it should move upward, and then the current movement command is checked every 100 milliseconds, the target location where it should be moved is drawn, and the process is repeated. . The code is also relatively simple:

// 移动函数
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)
}

In the above code, the movement function is relatively simple. The more important function of drawing the frame is the collision detection function, which is explained in detail below.

Collision detection

To detect whether an object collides with a wall, Usually is to save the map information into the memory first, and then detect whether it collides with the wall when moving the object. The current wall collides, but since our map background is a black and white maze, we can use color to detect collision. The specific method is:

Get the coordinate position of the current object, and use canvas to detect whether the color of this position on the current map is black. If so, it is said to be a wall. The movement should not be performed, the following is the code:

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
}

Here, 15 is the width of the villain, we detect the 1px range on both sides of the villain (corresponding to the # in the code ##getImageData(x - 1, y - 1, 15 2, 15 2)You can think about why it is 2). If it is black, it means that a collision has been detected.

The rest

In the code, I added some other functions, such as prompting answers, etc. As for changing the map, it is relatively simple: store the file address, starting point coordinates, answer image path, etc. corresponding to the map in an object, then set a map array, switch the map and re-render when clicked. There are also some areas worth optimizing, such as:

1. The collision detection experience is not good at corners;

2. There is a trajectory when running in the current situation , how to remove tracks in answer mode?

Interested students can try to implement it themselves.

Summary

This example is relatively simple and does not have high requirements for js. It is quite good to play with it.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

HTML5 Canvas API to create a simple guessing game

HTML5 Canvas to achieve special effects of fireworks

The above is the detailed content of Using canvas to implement a maze game. For more information, please follow other related articles on the PHP Chinese website!