Html 速度汽车游戏

问题描述 投票：0回答：2

声明

  1. 每 5 秒将玩家的速度增加 1，起始速度应始终为 5。
  2. 仅当我的汽车（黄色）的后端超过敌方汽车（绿色）的后端时才增加分数。每次通过时分数应增加 10。在任何其他情况下分数不应增加。

先决条件

  1. 重新启动游戏后启动速度不是5。
  2. 重新启动游戏后，速度从 5 变为 6，不到 5 秒。
  3. 重新启动游戏3-4次后，速度增加得非常快。
  4. 当敌方汽车而不是我的汽车通过屏幕末端时，分数就会增加。
  5. 有时，通过时分数不会增加，而我的车在通过时也在向上移动。
  6. 分数仍然像以前一样不断增加。

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>

html css logic game-development flowchart
2个回答
0
投票
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style>
            *{margin: 0; padding: 0; font-family: Arial, Helvetica, sans- 
              serif;}
            .hide{ display: none; }
            .carGame{
                width: 100%;
                height: 100vh;
                background-image: url('bg.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;

            }
            .myCar{
                width: 50px;
                height: 90px;
                /* background: red; */
                position: absolute;
                bottom: 120px;
                background-image: url('car2.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;   
            }
            .enemyCar{
                width: 30px;
                height: 60px;
                /* background: red; */
                position: absolute;
                bottom: 120px;
                background-image: url('car4.png');
                /* border-radius: 15px; */
                background-repeat: no-repeat;
                background-size: 100% 100%;   
            }
            .lines{
                width: 10px;
                height: 100px;
                background: white;
                position: absolute;
                margin-left: 195px;   
            }
            .gameArea{
                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;
            }
            .startScreen{
                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;
            }
        </style>
    </head>

    <body>
        <div class="carGame">
            <div class="score"></div>
            <div class="startScreen">
                <p>
                    press here to start <br>
                    Arrow key to move <br>
                    if you hit another car you will lose.
                </p>
            </div>
            <div class="gameArea ">  </div>
        </div>

        <script>
            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){
                aRect = a.getBoundingClientRect();
                bRect = b.getBoundingClientRect();

                return !((aRect.bottom < bRect.top) || 
                         (aRect.top > bRect.bottom) || 
                         (aRect.right < bRect.left) || 
                         (aRect.left > bRect.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 <br> Your final socre is " + player.score
                + " <br> 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";

                    window.requestAnimationFrame(runGame);

                    player.score++;
                    score.innerText = "Score: " + player.score + "\nSpeed: " + 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);
                }
            }
        </script>

    </body>
</html>
0
投票

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>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.