溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

JS/HTML5游戲常用算法之碰撞檢測 地圖格子算法實(shí)例詳解

發(fā)布時(shí)間：2020-09-26 20:42:24 來源：腳本之家 閱讀：384 作者：krapnik 欄目：web開發(fā)

本文實(shí)例講述了JS/HTML5游戲常用算法之碰撞檢測 地圖格子算法。分享給大家供大家參考，具體如下：

這種算法經(jīng)常用于RPG（早期的《最終幻想》、《DQ》、《仙劍奇?zhèn)b傳》）、SLG（《炎龍騎士團(tuán)》、《超級(jí)機(jī)器人大戰(zhàn)》）、PUZ（《俄羅斯方塊》、《寶石謎陣》）類型的游戲。這類游戲中，通常情況下整個(gè)地圖都是由一些地圖塊元素組成，在制作的時(shí)候首先給制作出地圖所需要的最基本的元素進(jìn)行編號(hào)，然后把這些編號(hào)的地圖塊組合起來就可以根據(jù)需要形成任意大小的地圖。

早期的RPG類型或者SLG類型的游戲可以明顯地看出游戲中的地圖是由一些小的地圖塊格子而成，采用這種方式組成地圖的好處是節(jié)約內(nèi)存的使用，并且不需要太多的地圖元素就可以任意組合成足夠大的地圖，簡單靈活，缺陷就是最后制作出的地圖不太美觀。但實(shí)際上為了便于游戲中的碰撞檢測，比如人物碰到NPC或者是碰到不可跨越的障礙等情況，在游戲中實(shí)際上還是保存了一張看不見的邏輯層。這個(gè)層的大小和地圖等大，并且也進(jìn)行了格子劃分，主要目的就是為了碰撞檢測，通常我們在游戲中對這個(gè)碰撞邏輯層使用一個(gè)數(shù)組描述信息，使用 1 表示不可以通過，0表示可以通過，假設(shè)人物和NPC在游戲中行走，這種情況下我們就很容易檢測地圖中人物是否碰到了NPC或者障礙物。

var mapArr = [
      1, 0, 0, 1,
      0, 0, 0, 1,
      0, 1, 0, 0,
      1, 0, 0, 1
    ];

代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta charset="UTF-8">
  <title>地圖格子算法</title>
  <style>
    #stage {
      border: 1px solid lightgray;
    }
  </style>
</head>
<body>
<canvas id="stage"></canvas>
</body>
<script>
  window.onload = function () {
    var stage = document.querySelector('#stage'),
      ctx = stage.getContext('2d');
    stage.width = 400;
    stage.height = 400;
    var mapArr = [
      1, 0, 0, 1,
      0, 0, 0, 1,
      0, 1, 0, 0,
      1, 0, 0, 1
    ],rectIdx = 5;
    //柵格線條
    function drawGrid(context, color, stepx, stepy) {
      context.strokeStyle = color;
      context.lineWidth = 0.5;
      for (var i = stepx + 0.5; i < context.canvas.width; i += stepx) {
        context.beginPath();
        context.moveTo(i, 0);
        context.lineTo(i, context.canvas.height);
        context.stroke();
      }
      for (var i = stepy + 0.5; i < context.canvas.height; i += stepy) {
        context.beginPath();
        context.moveTo(0, i);
        context.lineTo(context.canvas.width, i);
        context.stroke();
      }
    }
    function createRect(x, y, r, c) {
      ctx.beginPath();
      ctx.fillStyle = c;
      ctx.rect(x, y, r, r);
      ctx.fill();
    }
    document.onkeydown = function (event) {
      var e = event || window.event || arguments.callee.caller.arguments[0];
      //根據(jù)地圖數(shù)組碰撞將測
      switch (e.keyCode){
        case 37:
          console.log("Left");
          if (rectIdx - 1 >= 0 && (rectIdx - 1) % 4 !== 3 && !mapArr[rectIdx - 1]) {
            rectIdx -= 1;
          }
          break;
        case 38:
          console.log("Top");
          if (rectIdx - 4 >= 0 && !mapArr[rectIdx - 4]) {
            rectIdx -= 4;
          }
          break;
        case 39:
          console.log("Right");
          if ((rectIdx + 1) % 4 !== 0 && !mapArr[rectIdx + 1]) {
            rectIdx += 1;
          }
          break;
        case 40:
          console.log("Bottom");
          if (rectIdx + 4 < mapArr.length && !mapArr[rectIdx + 4]) {
            rectIdx += 4;
          }
          break;
        default:
          return false;
　　　　　　 }
    };
    function update() {
      ctx.clearRect(0, 0, 400, 400);
      drawGrid(ctx, 'lightgray', 100, 100);
      var rect = {
        x: rectIdx % 4 * 100,
        y: rectIdx % 4 === 0 ? rectIdx / 4 * 100 : Math.floor(rectIdx / 4) * 100,
        r: 100,
        c: "blue"
      };
      createRect(rect.x, rect.y, rect.r, rect.c);
      //根據(jù)地圖數(shù)組創(chuàng)建色塊
      for (var i = 0, len = mapArr.length; i < len; i++) {
        if (mapArr[i]) {
          createRect(i % 4 * 100, i % 4 === 0 ? i / 4 * 100 : Math.floor(i / 4) * 100, 100, "red");
        }
      }
      requestAnimationFrame(update);
    }
    update();
  };
</script>
</html>

使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測試運(yùn)行上述代碼，可得到如下運(yùn)行結(jié)果：

JS/HTML5游戲常用算法之碰撞檢測 地圖格子算法實(shí)例詳解

github地址：https://github.com/krapnikkk/JS-gameMathematics

采用這種方式判斷邏輯極其簡單，效率也比較高，但不太精確，如果A物體的大小比格子小很多，則物體行動(dòng)的時(shí)候可能看起來離B物體有些距離就無法行走了，所以做這種類型游戲最好保證格子足夠小或者保證人物大小和格子相差不大

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript數(shù)組操作技巧總結(jié)》、《JavaScript排序算法總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。

向AI問一下細(xì)節(jié)
AI
助
手