在蛇游戲中隨機改變食物的背景圖像

Question

我的想法是在食物吃完后才更改背景圖像。 然而，它只是在我列表中的圖像之間來回變化。 我認為這是因為我在腳本中使用了 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

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
}

如何在食用后僅更改一次食物的圖像？

Answer 1

您可以在 food.js 的update函數中更新您的 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
}