问题描述
我正在尝试制作 2d 赛车游戏。启动时它工作顺利,但一段时间后它开始滞后。我在这个游戏中使用类和 requestAnimationFrame。 我不知道为什么 stackoverflow 说得更多,因为我已经完成了。我的问题是我不知道为什么它会滞后,我想是因为如果对象是在循环中创建的,我不知道。我是初学者。
这是代码。
import { Car,RoadStrip,ObsCar } from "./engine.js";
// requestAnimationFrame support //
const requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimationFrame;
// VARIABLES //
const gameArea = document.querySelector(".gameArea");
const road = document.querySelector(".road");
const upBtn = document.querySelector(".n-up");
const downBtn = document.querySelector(".n-down");
const rightBtn = document.querySelector(".n-right");
const leftBtn = document.querySelector(".n-left");
const roadArea = road.getBoundingClientRect();
const score = document.querySelector(".score_counter");
// Player Car //
const playerCar = new Car();
playerCar.pushInDOM();
const car = playerCar.carElement;
// Lines on Road //
let lines = [];
let lineVeLocity = 7;
for (let i = 0; i <= 400; i += 80) {
const line = new RoadStrip();
line.create();
line.top = (i) + (line.topDiff + i);
line.lineNode.style.top = `${line.top}px`;
lines.push(line);
}
// Obstacle Cars //
let obsCars = [];
for (let i = 0; i < 3; i++) {
const obsCar = new ObsCar(roadArea.width);
obsCar.y = ((i+1) * 300) * -1;
obsCar.respawn(roadArea.height,roadArea.width);
obsCars.push(obsCar);
}
// Controller Btns //
let directions = {
ArrowUp: false,ArrowDown: false,ArrowRight: false,ArrowLeft: false
};
[upBtn,downBtn,leftBtn,rightBtn].forEach(btn => {
btn.addEventListener("touchstart",startInteract);
btn.addEventListener("touchend",endInteract);
});
// Functions //
function startInteract(e) {
e.preventDefault();
const clickedKey = e.target.dataset.dir;
directions[clickedKey] = true;
if (!playerCar.gameStart) {
getThingsstart();
obsCarHandler();
}
if (playerCar.gameStart === false) {
playerCar.gameStart = true;
}
moveCar();
}
function endInteract(e) {
e.preventDefault();
const clickedKey = e.target.dataset.dir;
directions[clickedKey] = false;
}
function stripHandler() {
lines.forEach(line => {
line.top += lineVeLocity;
line.runStrips(line.lineNode);
if (line.lineNode !== undefined && line.top > roadArea.height + 80) {
line.restash(line.lineNode);
}
});
}
function obsCarHandler() {
obsCars.forEach(car => {
car.create();
car.getIn(car.ObsCarElement);
if (crash(playerCar.carElement,car.ObsCarElement)) {
playerCar.gameStart = false;
}
});
}
function crash(car,obscar) {
let carBound = car.getBoundingClientRect();
let obsCarBound = obscar.getBoundingClientRect();
return !((carBound.bottom < obsCarBound.top) || (carBound.top > obsCarBound.bottom) || (carBound.right < obsCarBound.left) || (carBound.left > obsCarBound.right));
}
function getThingsstart() {
if (Number(score.textContent) > 100) {
lineVeLocity = 8;
} else if (Number(score.textContent) > 200) {
lineVeLocity = 9;
} else if (Number(score.textContent) > 300 && Number(score.textContent) < 400) {
lineVeLocity = 10;
} else {
lineVeLocity = 12;
}
stripHandler();
let needscore = Number(score.textContent);
needscore += 0.1;
score.textContent = needscore.toFixed(1);
if (Number(score.textContent) >= 20 && Number(score.textContent) % 30 === 0) {
}
window.requestAnimationFrame(getThingsstart);
}
function moveCar() {
let anim;
if (directions.ArrowUp && playerCar.y < (roadArea.height - (car.height + 4))) {
playerCar.y += playerCar.veLocity;
playerCar.animate();
let anim = window.requestAnimationFrame(moveCar);
} if (directions.ArrowDown && playerCar.y > 0) {
playerCar.y -= playerCar.veLocity;
playerCar.animate();
let anim = window.requestAnimationFrame(moveCar);
} if (directions.ArrowLeft && playerCar.x > 0) {
playerCar.x -= playerCar.veLocity;
playerCar.animate();
let anim = window.requestAnimationFrame(moveCar);
} if (directions.ArrowRight && playerCar.x < (roadArea.width - (car.width + 5))) {
playerCar.x += playerCar.veLocity;
playerCar.animate();
let anim = window.requestAnimationFrame(moveCar);
}
}
和类的代码。(你不需要阅读这个,但如果你可以)
class Car {
constructor() {
this.x = 8;
this.y = 10;
this.veLocity = 4;
this.carModel = "Audi";
this.carElement = null;
this.gameStart = false;
}
pushInDOM() {
const carNode = document.createElement("img");
carNode.setAttribute("src",`./assets/vehicles/${this.carModel}.png`);
carNode.setAttribute("alt","Car");
carNode.setAttribute("class","car");
carNode.style.left = "8px";
carNode.style.bottom = "10px";
document.querySelector(".road").appendChild(carNode);
this.carElement = carNode;
}
animate() {
if (this.carElement) {
this.carElement.style.bottom = `${this.y}px`;
this.carElement.style.left = `${this.x}px`;
}
window.requestAnimationFrame(() => {
this.animate();
});
}
}
class RoadStrip {
constructor() {
this.top = 0;
this.lineNode = undefined;
this.topDiff = 25;
}
create() {
const line = document.createElement("div");
this.lineNode = line;
line.classList.add("line");
document.querySelector(".road").appendChild(line);
}
runStrips(lineNode) {
lineNode.style.top = `${this.top}px`;
}
restash(lineNode) {
this.top = -105;
lineNode.style.top = `${this.top}px`;
}
}
const obsCarModels = ["Black_viper","Mini_truck","Ambulance","Mini_van","Police","taxi","truck","Car"];
class ObsCar {
constructor(width) {
this.x = Math.trunc((Math.random() * Math.trunc(width - 48)) + 1);
this.y = -100;
this.model = obsCarModels[Math.trunc(Math.random() * obsCarModels.length)];
this.ObsCarElement = null;
}
create() {
const carNode = document.createElement("img");
carNode.setAttribute("src",`./assets/vehicles/${this.model}.png`);
carNode.setAttribute("alt","Obstacle Car");
carNode.setAttribute("class","car");
this.ObsCarElement = carNode;
carNode.style.left = `${this.x}px`;
carNode.style.zIndex = "3";
carNode.style.top = `${this.y}px`;
document.querySelector(".road").appendChild(carNode);
}
getIn(node) {
this.y += 2;
node.style.top = `${this.y}px`;
window.requestAnimationFrame(() => {
this.getIn(node);
});
}
respawn(height,width) {
if (this.y > Math.trunc(height)) {
this.y = -100;
this.x = Math.trunc((Math.random() * Math.trunc(width - 48)) + 1);
this.ObsCarElement.style.left = `${this.x}px`;
this.model = obsCarModels[Math.trunc(Math.random() * obsCarModels.length)];
this.ObsCarElement.setAttribute("src",`./assets/vehicles/${this.model}.png`);
}
window.requestAnimationFrame(() => {
this.respawn(height,width);
});
}
}
export { Car,ObsCar };
如果有人帮忙,那就太棒了。
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)