javascript - 使用 canvas + css 动画构建棋盘游戏

您好，我正在尝试构建一个棋盘游戏，您可以在其中掷骰子 (math.random)，并且您的 token 会根据掷骰结果移动空格。我决定使用 canvas 来绘制板本身，但我对如何让 token 移动感到困惑。我已经绘制出每个图 block 的坐标(底部:''，左侧:'')，还创建了一个用于收集骰子结果的数组。我想我的问题是如何使这些结果相加，以及如何使 Sum Total 代表板上的坐标。要遵循的代码。

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var tokenSum = [];
var tknSum = [];
var element = document.getElementById('rollbtnid');

if (canvas.getContext) {
  make_base();

  function make_base() {
    base_image = new Image();
    base_image.src = '0.5x/SymBoardBrdr_1@0.5x.png';
    base_image.onload = function() {
      ctx.drawImage(base_image, 0, 0);
    }
  }
} else {
  alert('Your browser doesnt support HTML canvas please upgrade it');
}

window.addEventListener('DOMContentLoaded', function() {
  const buttonDiceroll = document.querySelector('.rollbtn');

  function rollDice() {
    const dice = document.getElementById('dice');
    const status = document.getElementById('rollWords');

    const rollTotal = Math.floor(Math.random() * 6) + 1;
    const diceTotal = rollTotal;
    tokenSum.push(rollTotal);
    console.log(tokenSum);

    status.innerHTML = 'You rolled ' + diceTotal + '.';
  }

  buttonDiceroll.addEventListener('click', rollDice, false);
}, false);

.redtoken {
  position: relative;
  bottom: 500px;
  left: 850px;
}

.bluetoken {
  position: relative;
  bottom: 790px;
  left: 200px;
}

body {
  background-image: url("0.5x/dragonscaleSmall@0.5x.png");
  background-repeat: repeat;
}

#myCanvas {
  position: relative;
  left: 10%;
  background-color: white;
}

#rollWords {
  position: relative;
  margin-left: 20px;
  font-size: 36pt;
}

.actionBx {
  height: 80%;
  width: 20%;
}

.statusbx {
  position: relative;
  bottom: 50%;
  left: 65%;
  height: 20%;
  width: 20%;
}

.narratebox {
  position: relative;
  left: 15%;
  bottom: 38%;
  width: 40%;
  height: 100px;
}

.rollbtn {
  position: absolute;
  bottom: 80%;
  right: 20%;
  color: white;
  background-color: black;
  border: 1.5px solid white;
  box-shadow: 2px 3px 2px 0px grey;
  width: 125px;
  height: 30px;
}

<body>
  <canvas id="myCanvas" width="1200" height="575" style="border:2px solid 
      #000000;"></canvas>
  <button class="rollbtn" id='rollbtnid'>
         <h5> Roll</h5>
      </button>
  <div class="statusbx" id="statusbxid">
    <h6 id='rollWords'></h6>
  </div>
  <div class="narratebox" id="narrateboxid">
    <h7 id='narrateWords'></h7>
  </div>
  <div class='redtoken' id='redtokenid'><img src='0.5x/SmLvTkn@0.5x.png'>
  </div>
  <div class='bluetoken' id='bluetokenid'><img src='0.5x/SmWhtTkn@0.5x.png'>
  </div>
  <script src="GoT_Canvas_test.js"></script>
</body>

最佳答案

很难 100% 准确地回答这个问题，因为您没有提供有效的示例，但我可能会这样做(如果我正确理解您的游戏):

将图 block 存储在数组 [{left: 0, top: 0}, {/* ... */},/* ... */]
将当前位置存储为变量(与 tiles 数组中的 tile 索引相关)
如果用户掷骰子，将掷骰子数量加到当前，你就有了新的方 block 位置

// meta code
const tiles = [
  {left: 0, top: 0},
  {left: 10, top: 10},
  {left: 20, top: 20},
  {left: 30, top: 30},
  {left: 40, top: 40},
  {left: 50, top: 50},
  {left: 60, top: 60},
  {left: 70, top: 70},
  {left: 80, top: 80},
  {left: 90, top: 90},
  {left: 100, top: 100},
  {left: 110, top: 110},
  {left: 120, top: 120},
];

let rollHistory = [];
let currentPosition = 0; // starting positon

function rollDice() {
  return Math.floor(Math.random() * 6) + 1;
}

// show roll history
const el = document.getElementById('roll-history');

function updateHistory(roll) {
  rollHistory.push(roll);
  el.innerHTML = '';
  rollHistory.forEach((record, i) => {
    const recordDiv = document.createElement('div');
    recordDiv.innerHTML = `${(i + 1)}: ${record}`;
    el.appendChild(recordDiv);
  });
}

// draw tiles
const tilesWrapper = document.getElementById('tiles-wrapper');

tiles.forEach(tile => {
  const tileDiv = document.createElement('div');
  tileDiv.className = 'tile';
  tileDiv.style.left = tile.left + 'px';
  tileDiv.style.top = tile.top + 'px';
  tilesWrapper.appendChild(tileDiv);
});


// button and position logic
const button = document.getElementById('roll-button');
const piece = document.getElementById('piece');

button.addEventListener('click', (e) => {
  const roll = rollDice();
  updateHistory(roll);

  if (currentPosition + roll >= tiles.length) {
    // not enought tiles left, go to last
    currentPosition = tiles.length - 1;
  } else {
    currentPosition += roll;
  }
  
  piece.style.left = tiles[currentPosition].left + 'px';
  piece.style.top = tiles[currentPosition].top + 'px';
  
  // if on last, WIN!
  if (currentPosition === tiles.length - 1) {
    setTimeout(() => alert('You win!'), 1);
  }
});

#roll-button {
  position: absolute;
  right: 50%;
  top: 10px;
}

#piece {
  position: absolute;
  top: 0;
  left: 0;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background: #000;
}

.tile {
  position: absolute;
  height: 10px;
  width: 10px;
  border: 1px solid red;
}

.history {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 150px;
  background: #eee;
}

<button id="roll-button">Roll</button>

<div class="history">
  History (move: roll) <br /> <br />
  <div id="roll-history"></div>
</div>

<div id="piece"></div>
<div id="tiles-wrapper"></div>

关于javascript - 使用 canvas + css 动画构建棋盘游戏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53771204/

javascript - 使用 canvas + css 动画构建棋盘游戏

上一篇：css - 手机、平板电脑中的应用程序样式问题

下一篇：css - 在 Visual Studio Code 中保存 CSS 文件时出现问题