我用箭头移动和硬币创建了一个可运行的迷宫,但是试图显示一条一旦用户收集了全部6个奖励就会出现的消息,就会破坏游戏。
我试图从github复制某人的警报,并尽我所能将其应用到我的工作中,但是它只是打破了画布,浏览器中实际上没有任何显示。
我的代码如下:
character = {
x: 6,
y: 4
}
var el = document.getElementById('game');
function drawWorld() {
el.innerHTML = '';
for (var y = 0; y < map.length; y = y + 1) {
for (var x = 0; x < map[y].length; x = x + 1) {
if (map[y][x] === 1) {
el.innerHTML += "<div class='borders'></div>";
} else if (map[y][x] === 2) {
el.innerHTML += "<div class='reward'></div>";
} else if (map[y][x] === 3) {
el.innerHTML += "<div class='ground'></div>";
} else if (map[y][x] === 5) {
el.innerHTML += "<div class='character'></div>";
}
}
el.innerHTML += "<br>";
}
winGame();
}
function winGame() {
if (!map[5].includes(2))
alert("Well done!");
}
drawWorld();
document.onkeydown = function(event) {
if (event.keyCode === 37) {
if (map[character.y][character.x - 1] !== 1) {
map[character.y][character.x] = 3;
character.x = character.x - 1;
map[character.y][character.x] = 5;
drawWorld();
}
} else if (event.keyCode === 38) {
if (map[character.y - 1][character.x] !== 1) {
map[character.y][character.x] = 3;
character.y = character.y - 1;
map[character.y][character.x] = 5;
drawWorld();
}
} else if (event.keyCode === 39) {
if (map[character.y][character.x + 1] !== 1) {
map[character.y][character.x] = 3;
character.x = character.x + 1;
map[character.y][character.x] = 5;
drawWorld();
}
} else if (event.keyCode === 40) {
if (map[character.y + 1][character.x] !== 1) {
map[character.y][character.x] = 3;
character.y = character.y + 1;
map[character.y][character.x] = 5;
drawWorld();
}
}
console.log(map)
}