'use strict';
const score = document.querySelector('.score');
const popup = document.querySelector('.popup');
const gameArea = document.querySelector('.gameArea');
const gameBoard = document.querySelector('.gameBoard');
let player = { speed: 5, start: false };
let keys = {
ArrowUp: false,
ArrowDown: false,
ArrowLeft: false,
ArrowRight: false,
};
gameBoard.addEventListener('click', start);
document.addEventListener('keydown', keyDown);
document.addEventListener('keyup', keyUp);
function keyDown(e) {
e.preventDefault();
keys[e.key] = true;
// console.log(keys);
}
function keyUp(e) {
e.preventDefault();
keys[e.key] = false;
// console.log(keys);
}
function gamePlay() {
console.log('game started');
let car = document.querySelector('.car');
let carD = car.getBoundingClientRect();
let road = gameArea.getBoundingClientRect();
if (player.start) {
if (keys.ArrowDown && player.y < road.height - carD.height)
player.y += player.speed;
if (keys.ArrowUp && player.y > road.height * 0.3) player.y -= player.speed;
if (keys.ArrowLeft && player.x > 0) player.x -= player.speed;
if (keys.ArrowRight && player.x < road.width - carD.width)
player.x += player.speed;
car.style.top = player.y + 'px';
car.style.left = player.x + 'px';
window.requestAnimationFrame(gamePlay);
}
}
function movesLines() {
let lines = document.querySelectorAll('.line');
console.log(lines);
lines.forEach(function (item) {
item.y += player.speed;
item.style.top = item.y + 'rem';
});
}
function start() {
if (player.start) return;
movesLines();
popup.classList.add('hide');
player.start = true;
window.requestAnimationFrame(gamePlay);
for (let i = 0; i < 6; i++) {
let roadLine = document.createElement('div');
roadLine.setAttribute('class', 'line');
roadLine.y = i * 15;
roadLine.style.top = roadLine.y + 'rem';
gameArea.appendChild(roadLine);
}
let car = document.createElement('div');
car.setAttribute('class', 'car');
gameArea.appendChild(car);
player.x = car.offsetLeft;
player.y = car.offsetTop;
// console.log('top position' + car.offsetTop);
// console.log('Left position' + car.offsetLeft);
}/*
SPACING SYSTEM (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
FONT SIZE SYSTEM (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
*/
* {
margin:0;
padding:0;
box-sizing: border-box;
}
html{
font-size: 62.5%;
}
.gameBoard {
display: flex;
background-color: lightgreen;
overflow-x: hidden;
overflow-y: hidden;
}
.score {
position: absolute;
top: 1rem;
left: 1rem;
width: 10rem;
height: 5rem;
border: 2px solid green;
}
.popup {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%);
color: black;
font-weight: bold;
padding: 2rem;
border-radius: 11px;
background-color: #777;
z-index: 999;
}
.gameArea {
position: relative;
width: 40vw;
height: 100vh;
background-color: #333;
margin-left: auto;
margin-right: auto;
}
.car {
position: absolute;
bottom: 1rem;
width: 8rem;
height: 10rem;
background-color: red;
}
.enemy {
position: absolute;
bottom: 1rem;
width: 8rem;
height: 10rem;
background-color: blue;
}
.line {
position: absolute;
width: 1rem;
height: 10rem;
background-color: white;
left: 50%;
transform: translateX(-50%);
}
.hide {
display: none;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Game</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="gameBoard">
<div class="score"></div>
<div class="popup">
Click or Press any arrow to start!!
</div>
<div class="gameArea"></div>
</div>
<script src="./script.js"></script>
</body>
</html>function movesLines() {
let lines = document.querySelectorAll('.line');
console.log(lines);
lines.forEach(function (item) {
item.y += player.speed;
item.style.top = item.y + 'rem';
});
};
在这里，这些线导致了一个空的节点列表，我无法纠正为什么会发生这种情况——实际上，这个函数用于一次又一次地移动道路线，这样看起来就像那辆车在行驶。。。在这里，这些线导致了一个空的节点列表，我无法纠正为什么会发生这种情况——实际上，这个函数用于一次又一次地移动道路线，这样看起来就像那辆车在行驶。。。在这里，这些线导致了一个空的节点列表，我无法纠正为什么会发生这种情况——实际上，这个函数用于一次又一次地移动道路线，这样看起来就像那辆车在行驶。。。
因为movesLines函数是在将.line元素插入DOM之前执行的，在start函数中。
movesLines();
popup.classList.add('hide');
player.start = true;
window.requestAnimationFrame(gamePlay);
for (let i = 0; i < 6; i++) {
let roadLine = document.createElement('div');
roadLine.setAttribute('class', 'line');
roadLine.y = i * 15;
roadLine.style.top = roadLine.y + 'rem';
gameArea.appendChild(roadLine);
}