个人中心
gpt4 book ai didi

javascript - 为什么当我试图通过 let lines = document.querySelectorAll ('.line' 获取行时，节点列表为空；

转载 作者：行者123 更新时间：2023-12-05 05:36:20 27 4
gpt4 key购买 nike 

'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);
  }

关于javascript - 为什么当我试图通过 let lines = document.querySelectorAll ('.line' 获取行时，节点列表为空；，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/73315805/

27 4 0
文章推荐： flutter - 如何在 flutter 音频播放器应用程序中显示音乐栏
文章推荐： javascript - 剧作家 js - 我试图在单击按钮时进行验证，它会打开一个新选项卡，然后验证标题
文章推荐： c - 如何在 C 中用随机数据初始化结构？
文章推荐： android - 数据狗朗姆酒 : Is it possible to include HTTP request body in resource logging?
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com