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

嗨，我正试图构建一个棋盘游戏，在这里你掷骰子(math.random(，你的代币根据掷骰子的结果移动空格。我决定用画布自己画木板，但我一直在思考如何让代币移动。我已经为每个瓦片绘制了坐标(底部："，左侧："(，还创建了一个用于收集掷骰子结果的数组。我想我的问题是如何使这些结果相加，以及如何使总和表示棋盘上的坐标。要遵循的代码。

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%准确地回答这个问题，因为你没有提供工作示例，但我可能会这样做(如果我正确理解你的游戏(：

在数组[{left: 0, top: 0}, {/* ... */}, /* ... */]中存储瓦片
将当前位置存储为变量(与瓦片阵列中瓦片的索引相关(
如果用户滚动，则将滚动量添加到当前滚动量，您就有了新的平铺位置

// 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>

您需要获得每个瓦片的像素位置，并随着时间的推移将玩家碎片转换到相应的瓦片位置。根据电路板的不同，你也可以完全使用运行时数学来完成，但对于初学者，我建议将它们存储起来。由于它是一个画布，您必须在每个帧之后清除并重新绘制整个画布，否则它将继续添加到当前帧中。理想情况下，您应该将png存储为base64，并且不要每次都重新请求它。

相关内容

最新更新

热门标签：