Javascript 随机更换食物'；蛇游戏中的背景图像

我的想法是只在食物吃完后才改变背景图像。然而，它只是不断地在我列表中的图像之间来回变化。我想这是因为我在脚本中使用了requestAnimationFrame。 这是script.js

import { 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 = 0
let gameOver = 0;
let modal = document.getElementById('modal')
let easy = document.getElementById('easy')
let normal = document.getElementById('normal')
let hard = document.getElementById('hard')
let SNAKE_SPEED
easy.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()
}

---

如何在食用食物后只更改一次食物的图像？

您可以在food.js的

update

函数中更新您的foodImg

例如：（food.js）

从“/snake.js”导入{onSnake，expandSnake}
从“./grid.js”导入{randomGridPosition}
let food=getRandomPosition（）
let foodList=['assets/giraffe.png'、'assets/lion.png'、'assets/kangaro.png'；
让foodImg=foodList[Math.floor（Math.random（）*3）]//
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
const EXPANSION_RATE = 1
export function update() {
    if (onSnake(food)) {
        expandSnake(EXPANSION_RATE)
        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
}

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
}