在蛇游戏中随机更改食物的背景图像

Question

我的想法是只有在食物被吃完后才改变背景图像。然而，它只是在我列表中的图像之间来回变化。我认为这是因为我在脚本中使用了 requestAnimationFrame。这是 script.jsimport { update as updateSnake, draw as drawSnake, getSnakeHead, snakeIntersection } from './snake.js'import { update as updateFood, draw as drawFood} from './food.js'import { outsideGrid } from './grid.js'let lastRenderTime = 0let gameOver = 0;let modal = document.getElementById('modal')let easy = document.getElementById('easy')let normal = document.getElementById('normal')let hard = document.getElementById('hard')let SNAKE_SPEEDeasy.onclick = function() {    modal.style.display = "none"    chooseDifficulty(easy)}normal.onclick = function() {    modal.style.display = "none"    chooseDifficulty(normal)}hard.onclick = function() {    modal.style.display = "none"    chooseDifficulty(hard)}const gameBoard = document.getElementById('game-board')function chooseDifficulty(difficulty) {    switch (difficulty) {        case easy:            SNAKE_SPEED = 5;            break;        case normal:            SNAKE_SPEED = 8;            break;        case hard:            SNAKE_SPEED = 12;            break;    }    }function main(currentTime) {    if (gameOver) {        if (confirm('You lost. Press OK to restart')) {            location.reload()        }        return    }    window.requestAnimationFrame(main)    const secondsSinceLastRender = (currentTime - lastRenderTime) / 1000    if (secondsSinceLastRender < 1 / SNAKE_SPEED) return    lastRenderTime = currentTime;    update()    draw()}window.requestAnimationFrame(main)function update() {    updateSnake()    updateFood()    checkDeath()}function draw() {    gameBoard.innerHTML = ''    drawSnake(gameBoard)    drawFood(gameBoard)}function checkDeath() {    gameOver = outsideGrid(getSnakeHead()) || snakeIntersection()}如何在吃完食物后只改变一次食物的图像？

Answer 1

update您可以在 food.js 中更新您的 foodImg函数。

例如：(food.js)

import { onSnake, expandSnake } from './snake.js'

import { randomGridPosition } from './grid.js'

let food = getRandomPosition()

let foodList = ['assets/giraffe.png','assets/lion.png','assets/kangaroo.png'];

let foodImg = foodList[Math.floor(Math.random() * 3)]; // <---- here get random food image

const EXPANSION_RATE = 1

export function update() {

    if (onSnake(food)) {

        expandSnake(EXPANSION_RATE);

        foodImg = foodList[Math.floor(Math.random() * 3)]; // <-- here get new foodImg after food eaten.

        food = getRandomPosition();

    }

    

}

export function draw(gameBoard) {

        const foodElement = document.createElement("div")

        foodElement.style.gridRowStart = food.y

        foodElement.style.gridColumnStart = food.x

        foodElement.classList.add('food')

        // foodImg = foodList[Math.floor(Math.random() * 3)]

        foodElement.style.backgroundImage = 'url(' + foodImg + ')'

        gameBoard.appendChild(foodElement)

        

}

function getRandomPosition() {

    let newFoodPosition

    while (newFoodPosition == null || onSnake(newFoodPosition)) {

        newFoodPosition = randomGridPosition()

    }

    return newFoodPosition

}