Игра в стиле Pac-Man на JavaScript, помощь в разработке игрового процесса [закрыто] ⇐ CSS

[Anonymous]

Я работаю над игрой о ниндзя, в которой карта генерируется случайным образом с помощью элементов div. Иногда предметы для суши застревают между стенами. Я рассматриваю возможность реализации функции, позволяющей ниндзя сломать стену, съев определенное количество суши, чтобы пойманные суши стали частью сложности игры, а не ошибкой кода.
Однако , я не знаю, как добавить эту функцию в существующий код и как изменить функцию рисования, чтобы предотвратить захват суши. Кроме того, мне нужно реализовать функцию для отображения сообщения о победе в случае победы в игре.
HTML-код:

Код: Выделить всё

        .row {
line-height: 0;
}

.wall {
background-color: blue;
height: 40px;
width: 40px;
display: inline-block;
}

.sushi {
background-color: black;
height: 40px;
width: 40px;
display: inline-block;
background-image: url('sushi.png');
background-size: contain;
}

.onigiri {
background-color: black;
height: 40px;
width: 40px;
display: inline-block;
background-image: url('onigiri.png');
background-size: contain;
}

.blank {
background-color: black;
height: 40px;
width: 40px;
display: inline-block;
}

#ninjaman {
background-color: black;
height: 40px;
width: 40px;
display: inline-block;
background-image: url('ninja.gif');
background-size: contain;
position: absolute;
left: 40px;
top: 40px;
}

#score {
position: absolute;
top: 10px;
left: 10px;
color: white;
font-size: 20px;
}





Score: 0


var world;
var worldDict = {
0: 'blank',
1: 'wall',
2: 'sushi',
3: 'onigiri'
};

var ninjaman = {
x: 1,
y: 1
};

var score = 0;

function updateScore() {
document.getElementById('score').innerHTML = 'Score: ' + score;
}

function generateRandomWorld(rows, cols) {
var randomWorld = [];

for (var i = 0; i < rows; i++) {
var row = [];
for (var j = 0; j < cols; j++) {
row.push(Math.floor(Math.random() * 4));
}
randomWorld.push(row);
}

return randomWorld;
}

function drawWorld() {
var output = "";

for (var row = 0; row < world.length; row++) {
output += "";
for (var x = 0; x < world[row].length; x++) {
output += "";
}
output += "";
}
document.getElementById('world').innerHTML = output;
}

function drawNinjaman() {
document.getElementById('ninjaman').style.top = ninjaman.y * 40 + 'px';
document.getElementById('ninjaman').style.left = ninjaman.x * 40 + 'px';
}

function checkCollision() {
if (world[ninjaman.y][ninjaman.x] == 2) {
world[ninjaman.y][ninjaman.x] = 0;
score++;
updateScore();
} else if (world[ninjaman.y][ninjaman.x] == 3) {
world[ninjaman.y][ninjaman.x] = 0;
score += 2; // Puedes ajustar la puntuación por comer onigiri
updateScore();
} else if (world[ninjaman.y][ninjaman.x] == 1) {
ninjaman.x = 1;
ninjaman.y = 1;
}
}

function updateGame(e) {
if (e.keyCode == 37 && ninjaman.x > 0 && world[ninjaman.y][ninjaman.x - 1] != 1) {
ninjaman.x--;
}
if (e.keyCode == 39 && ninjaman.x < world[0].length - 1 && world[ninjaman.y][ninjaman.x + 1] != 1) {
ninjaman.x++;
}
if (e.keyCode == 38 && ninjaman.y > 0 &&  world[ninjaman.y - 1][ninjaman.x] != 1) {
ninjaman.y--;
}
if (e.keyCode == 40 && ninjaman.y < world.length - 1 && world[ninjaman.y + 1][ninjaman.x] != 1) {
ninjaman.y++;
}

checkCollision();
drawNinjaman();
drawWorld();
}

// Llamada a la función para generar el mundo aleatorio
world = generateRandomWorld(10, 10);
drawWorld();
drawNinjaman();
updateScore();

document.onkeydown = updateGame;

Ключевые моменты
Генерация случайной карты: генерирует сетку, в которой ячейками могут быть стены, суши или бонусы на основе случайных шансов.
Потребление суши: отслеживает количество съеденных суши. По достижении определенного числа стена разрушается.
Проверка победы: предупреждает игрока, когда все суши собраны.
Чтобы избежать ловушки суши, вы можете реализовать более сложный алгоритм генерации карты, который гарантирует суши не изолированы стенами или улучшите логику, чтобы сломать стены, блокирующие доступ к суши.
Хотите ли вы помочь с изменением логики создания карты, внедрением сообщения о победе или добавлением силы расширенная функциональность?
//en español

Код: Выделить всё

            .row {
line-height: 0;
}

.wall {
background-color: blue;
height: 40px;
width: 40px;
display: inline-block;
}

.sushi {
background-color: black;
height: 40px;
width: 40px;
display: inline-block;
background-image: url('sushi.png');
background-size: contain;
}

.onigiri {
background-color: black;
height: 40px;
width: 40px;
display: inline-block;
background-image: url('onigiri.png');  /* Asegúrate de tener una imagen para el onigiri */
background-size: contain;
}

.blank {
background-color: black;
height: 40px;
width: 40px;
display: inline-block;
}

#ninjaman {
background-color: black;
height: 40px;
width: 40px;
display: inline-block;
background-image: url('ninja.gif');
background-size: contain;
position: absolute;
left: 40px;
top: 40px;
}

#score {
position: absolute;
top: 10px;
left: 10px;
color: white;
font-size: 20px;
}





Score: 0


var world;
var worldDict = {
0: 'blank',
1: 'wall',
2: 'sushi',
3: 'onigiri'
};

var ninjaman = {
x: 1,
y: 1
};

var score = 0;

function updateScore() {
document.getElementById('score').innerHTML = 'Score: ' + score;
}

function generateRandomWorld(rows, cols) {
var randomWorld = [];

for (var i = 0; i < rows; i++) {
var row = [];
for (var j = 0; j < cols; j++) {
row.push(Math.floor(Math.random() * 4));
}
randomWorld.push(row);
}

return randomWorld;
}

function drawWorld() {
var output = "";

for (var row = 0; row < world.length; row++) {
output += "";
for (var x = 0; x < world[row].length; x++) {
output += "";
}
output += "";
}
document.getElementById('world').innerHTML = output;
}

function drawNinjaman() {
document.getElementById('ninjaman').style.top = ninjaman.y * 40 + 'px';
document.getElementById('ninjaman').style.left = ninjaman.x * 40 + 'px';
}

function checkCollision() {
if (world[ninjaman.y][ninjaman.x] == 2) {
world[ninjaman.y][ninjaman.x] = 0;
score++;
updateScore();
} else if (world[ninjaman.y][ninjaman.x] == 3) {
world[ninjaman.y][ninjaman.x] = 0;
score += 2; // Puedes ajustar la puntuación por comer onigiri
updateScore();
} else if (world[ninjaman.y][ninjaman.x] == 1) {
ninjaman.x = 1;
ninjaman.y = 1;
}
}

function updateGame(e) {
if (e.keyCode == 37 && ninjaman.x > 0 && world[ninjaman.y][ninjaman.x - 1] != 1) {
ninjaman.x--;
}
if (e.keyCode == 39 && ninjaman.x < world[0].length - 1 && world[ninjaman.y][ninjaman.x + 1] != 1) {
ninjaman.x++;
}
if (e.keyCode == 38 && ninjaman.y > 0 && world[ninjaman.y - 1][ninjaman.x] != 1) {
ninjaman.y--;
}
if (e.keyCode == 40 && ninjaman.y < world.length - 1 && world[ninjaman.y + 1][ninjaman.x] != 1) {
ninjaman.y++;
}

checkCollision();
drawNinjaman();
drawWorld();
}

// Llamada a la función para generar el mundo aleatorio
world = generateRandomWorld(10, 10);
drawWorld();
drawNinjaman();
updateScore();

document.onkeydown = updateGame;

в JavaScript я генерирую случайный мир с элементами div для карты игры ниндзя, но иногда некоторые суши блокируются
Я не знаю, как чтобы решить ее, не ломая все, у меня были некоторые творческие идеи, например, дать ниндзя возможность разбивать блок каждые «много» суши, которые он съедает, тогда вложенные суши были бы сложностью игры, а не ошибкой кода (? но я не смог создать сценарий, который стирал бы стену по количеству съеденных суши.
с другой стороны, я не знал, как добавить к Draw, который не включает суши , мне также нужно закодировать «вы выиграли»
здесь вы можете скачать jpg и т. д. https://github.com/TwestyMa77c/Pre-Boot ... /blob/main /index.html

Подробнее здесь: https://stackoverflow.com/questions/786 ... assistance