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
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
}
如何在食用后仅更改一次食物的图像?
解决方案
你可以在 food.js 中更新你的 foodImgupdate
函数。
例如:(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
}
推荐阅读
- mysql - 如何在没有插入选项的情况下将新数据插入到我的 SQL 查询中?
- android - 设备中的系统 UI 崩溃,当我安装由 Android Studio 创建的应用程序时
- canvas - GWT Canvas 绘制填充多边形中的错误
- android - 如何从 ArrayList 添加价格
- php - nginx 将请求传递给不正确的 php-fpm 池
- java - 有没有办法从java中的单个方法返回一个Double AND一个String?
- delphi - 有没有办法只执行来自放置在共享驱动器上的大 exe 的单元中的代码?
- android - 如何将 Firebase 消息传递仅设置为我的应用程序的一种风格?
- angular - Angular 6:从兄弟姐妹路由到兄弟姐妹的孩子
- symfony - Symfony 403 以正确的角色抛出