声明
1.每5秒增加玩家的速度1，起始速度应该始终为5。
1.只有当我的车（黄色）的尾部超过了敌人车（绿色）的尾部时，分数才会增加。每次超过的分数都会增加10分。其他情况下分数不会增加。
先决条件
1.重新启动游戏后启动速度不是5。
1.速度从5到6在不到5秒后重新启动游戏。
1.重新启动游戏3 - 4次后，速度增加得非常快。
1.当敌人的车而不是我的车通过屏幕末端时，分数增加。
1.有时候，当我的赛车在超车时也在向上移动时，分数在超车过程中不会增加。
1.评分仍像以前一样持续增加。
const score = document.querySelector('.score');
const startScreen = document.querySelector('.startScreen');
const gameArea = document.querySelector('.gameArea');
startScreen.addEventListener('click', initializeGame);
let player = {
speed: 5,
score: 0
};
let keys = {
ArrowUp: false,
ArrowDown: false,
ArrowLeft: false,
ArrowRight: false
}
document.addEventListener('keydown', keyDown);
document.addEventListener('keyup', keyUp);
function keyDown(e) {
e.preventDefault();
keys[e.key] = true;
}
function keyUp(e) {
e.preventDefault();
keys[e.key] = false;
}
function isCollide(a, b) {
aRectangle = a.getBoundingClientRect();
bRectangle = b.getBoundingClientRect();
return !((aRectangle.bottom < bRectangle.top) ||
(aRectangle.top > bRectangle.bottom) ||
(aRectangle.right < bRectangle.left) ||
(aRectangle.left > bRectangle.right))
}
function moveLines() {
let lines = document.querySelectorAll('.lines');
lines.forEach(function(item) {
if (item.y >= 700) {
item.y -= 750;
}
item.y += player.speed;
item.style.top = item.y + "px";
})
}
function endGame() {
player.start = false;
startScreen.classList.remove('hide');
startScreen.innerHTML = "Game over Your final score is " + player.score +
" press here to restart the game.";
}
function moveEnemy(myCar) {
let enemyCarList = document.querySelectorAll('.enemyCar');
enemyCarList.forEach(function(enemyCar) {
if (isCollide(myCar, enemyCar)) {
endGame();
}
if (enemyCar.y >= 750) {
enemyCar.y = -300;
enemyCar.style.left = Math.floor(Math.random() * 350) + "px";
}
enemyCar.y += player.speed;
enemyCar.style.top = enemyCar.y + "px";
})
}
function runGame() {
let car = document.querySelector('.myCar');
let road = gameArea.getBoundingClientRect();
if (player.start) {
moveLines();
moveEnemy(car);
if (keys.ArrowUp && player.y > (road.top + 150)) {
player.y -= player.speed
}
if (keys.ArrowDown && player.y < (road.bottom - 85)) {
player.y += player.speed
}
if (keys.ArrowLeft && player.x > 0) {
player.x -= player.speed
}
if (keys.ArrowRight && player.x < (road.width - 50)) {
player.x += player.speed
}
car.style.top = player.y + "px";
car.style.left = player.x + "px";
player.score++;
score.innerText = "Score: " + player.score + "\n Speed: " + player.speed;
}
}
function initializeGame() {
startScreen.classList.add('hide');
gameArea.innerHTML = "";
player.start = true;
player.score = 0;
window.requestAnimationFrame(runGame);
for (x = 0; x < 5; x++) {
let roadLine = document.createElement('div');
roadLine.setAttribute('class', 'lines');
roadLine.y = (x * 150)
roadLine.style.top = roadLine.y + "px";
gameArea.appendChild(roadLine);
}
let car = document.createElement('div');
car.setAttribute('class', 'myCar');
gameArea.appendChild(car);
player.x = car.offsetLeft;
player.y = car.offsetTop;
for (x = 0; x < 3; x++) {
let enemyCar = document.createElement('div');
enemyCar.setAttribute('class', 'enemyCar');
enemyCar.y = ((x + 1) * 350) * -1;
enemyCar.style.top = enemyCar.y + "px";
enemyCar.style.left = Math.floor(Math.random() * 350) + "px";
gameArea.appendChild(enemyCar);
}
}* {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
.hide {
display: none;
}
.car Game {
width: 100%;
height: 100vh;
background-image: ;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.my Car {
width: 50px;
height: 90px;
/* background: red; */
position: absolute;
bottom: 120px;
background-image: u r l('');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.enemy Car {
width: 30px;
height: 60px;
/* background: red; */
position: absolute;
bottom: 120px;
background-image: ('');
/* border-radius: 15px; */
background-repeat: no-repeat;
background-size: 100% 100%;
}
.lines {
width: 10px;
height: 100px;
background: white;
position: absolute;
margin-left: 195px;
}
.game Area {
width: 400px;
height: 100vh;
background: #2d3436;
margin: auto;
position: relative;
overflow: hidden;
border-right: 7px dashed #c8d6e5;
border-left: 7px dashed #c8d6e5;
}
.score {
position: absolute;
top: 15px;
left: 40px;
background: #10ac84;
width: 300px;
line-height: 70px;
text-align: center;
color: white;
font-size: 1.5rem;
font-family: Arial, Helvetica, sans-serif;
box-shadow: 0 5px 5px #777;
}
.start Screen {
position: absolute;
background-color: #ee5253;
left: 24%;
top: 40%;
transform: translate(-50% -50%);
color: white;
z-index: 1;
text-align: center;
border: 1px solid #ff6b6b;
padding: 15px;
margin: auto;
width: 50%;
cursor: pointer;
letter-spacing: 5;
font-size: 20px;
word-spacing: 3;
line-height: 30px;
text-transform: uppercase;
box-shadow: 0 5px 5px #777;
}<div class="carGame">
<div class="score"></div>
<div class="startScreen">
<p>
press here to start Arrow key to move if you hit another car you will lose.
</p>
</div>
<div class="gameArea"> </div>
</div>
1条答案
按热度按时间qv7cva1a1#