使用Js实现的迷宫游戏

游戏的展示

项目概述

1. 界面初始化

        整个棋盘的大小通过读取可视窗口来计算，通过vue的onMountd钩子来调用棋盘初始化，根据玩家所选的难度生成不同的障碍物地形数量和npc数量以及npc的移动速度。

2. 玩家的移动

        通过键盘事件监听正确的玩家按键来决定玩家下一步的方位，通过下一步的按键找到对应的格子通过格子定位到玩家的下一步正确位置，对边界进行判断无法移动到边界和障碍物地形。同时调用碰撞检测函数是否与npc发生碰撞。

3.npc的移动

        开始以后，给予npc移动状态、随机时间、移动速度，使得npc们错位时间下移动随机位置，并调用判断周围是否有玩家函数，如果有玩家那么调用A*寻路算法追逐玩家。

4.游戏结束

        当玩家抵达右下角后清除所有定时器，调用胜利弹窗

        当玩家爱心数量为0时，调用失败弹窗

 

代码逻辑

初始化游戏

根据容器大小设置初始化格子

  function init() {
    //获取屏幕宽高
    h = document.querySelector(".game-container").offsetHeight
    w = document.querySelector(".game-container").offsetWidth
    containerSytle.value.width = w + 'px'
    containerSytle.value.height = h + 'px'
    //盒子宽度设置好  
    box = document.querySelector(".game-container")

    boxItem.value.width = w / 30 - 0.04 + 'px'
    boxItem.value.height = h / 15 - 0.04 + 'px'
    //起点终点
    startRow = 0,
      startCol = 0,
      endRow = 14,
      endCol = 29
    //初始化容器
    ground = [],
      annimalList = []
    canWInFlag = false;
    moveTarget = new Array(300).fill(0)
    //初始化玩家及其血条
    const spanPlaer = document.createElement("span")
    spanPlaer.id = "player"
    spanPlaer.style.width = boxItem.value.width
    spanPlaer.style.height = boxItem.value.height
    const xt = document.createElement("span")
    xt.className = "groth"

    for (let i = 1; i <= 3; i++) {
      const img = document.createElement("img")
      img.src = './GameIcon/爱心.png'
      xt.appendChild(img)

    }
    xt.style.bottom = offsetH - 10 + 'px'
    spanPlaer.appendChild(xt)
    box.appendChild(spanPlaer)


    player = document.getElementById("player")
    animalSpan = []
    animalHas = []
    moveIndex = {
      left: 0,
      top: 0,
    };
    offsetW = w / 30
    offsetH = h / 15


    board = Array.from({ length: 15 }).map(() =>
      Array.from({ length: 30 }).fill(0)
    )
    vis = Array.from({ length: 15 }).map(() =>
      Array.from({ length: 30 }).fill(0)
    )
    dangerAnimal = Array.from({ length: 15 }).map(() =>
      Array.from({ length: 30 }).fill(0)
    )


//初始化棋盘
    for (let i = 1; i <= 450; i++) {
      let div = document.createElement("div")
      div.className = "game-item"
      div.style.width = boxItem.value.width
      div.style.height = boxItem.value.height
      box.appendChild(div)
    }

变量声明，dx和dy为四个方向偏移量 

var dx = [-1, 0, 1, 0],