投稿
  1. 边看边学首页
  2. 文章

不咕鸟cos:Flappy鸟代码不工作-JavaScript

作者：Kie • • 阅读 51

我想在 javascript 中编写一个 flappy bird 游戏，但是当我在浏览器中打开它时，它似乎不起作用。css 工作。js 中的第 147 、 154 、 31 和 160 行似乎都是错误，但我不明白如何修复它们。

这是我的 HTML：

var poles;
var bird;
var pole1;
var pole2;
var scoreSpan;
var speedSpan;
var speed;
var score;
var flapping;
var playing;
var scoreUpdated;
var gameArea;
var restartBtn;
var containerWidth;
var containerHeight;
function load() {
    bird = doent.getElementById("bird")
    poles = doent.getElementById("poles")
     pole1 = doent.getElementById("pole-1")
     pole2 = doent.getElementById("pole-2")
     scoreSpan = doent.getElementById("score")
    speedSpan = doent.getElementById("speed")
    gameArea = doent.getElementById("game-area");
    restartBtn = doent.getElementById("restart-btn");
    containerWidth = gameArea.clientWidth;
    containerHeight = gameArea.clientHeight;
}
function restart() {
    restartBtn.removeEventListener('click', restart);
    speed = 2;
    score = 0;
    scoreUpdated = false;
    flapping = false;
    playing = true;
    speedSpan.textContent = speed;
    scoreSpan.textContent = score;
    poles.forEach((pole) => {
        pole.style.right = 0;
    });
    bird.style.top = 20 + "%";
    gameLoop();
}
function update() {
    var polesCurrentPos = pFloat(window.getComputedStyle(poles[0]).getPropertyValue("right"));
    if (polesCurrentPos > containerWidth * 0.85) {
        if (!scoreUpdated) {
            score += 1;
            scoreUpdated = true;
        }
        scoreSpan.textContent = score;
    }
    if (polesCurrentPos > containerWidth) {
        var newHeight = pInt(Math.random() * 100);
        // ùéðåé âåáä îåè
        pole1.style.height = 100 + newHeight + "px";
        pole2.style.height = 100 - newHeight + "px";
        polesCurrentPos = 0;
        speed += 0.25;
        speedSpan.textContent = pInt(speed);
        scoreUpdated = false;
    }
    poles.forEach((pole) => {
        pole.style.right = polesCurrentPos + speed + "px";
    });
    let birdTop = pFloat(window.getComputedStyle(bird).getPropertyValue("top"));
    if (flapping) {
        bird.style.top = birdTop + -2 + "px";
    } else if (birdTop < containerHeight - bird.clientHeight) {
        bird.style.top = birdTop + 2 + "px";
    }
    if (collision(bird, pole1) || collision(bird, pole2) || birdTop <= 0 || birdTop > containerHeight - bird.clientHeight) {
        gameOver();
    }
}
function gameOver() {
    window.console.log("game over");
    playing = false;
    restartBtn.addEventListener('click', restart);
}
function gameLoop() {
    update();
    if (playing) {
        requestAnimationFrame(gameLoop);
    }
}
function collision(gameDiv1, gameDiv2) {
    let left1 = gameDiv1.getBoundingRect().left;
    let top1 = gameDiv1.getBoundingRect().top;
    let height1 = gameDiv1.clientHeight;
    let width1 = gameDiv1.clientWidth;
    let bottom1 = top1 + height1;
    let right1 = left1 + width1;
    let left2 = gameDiv2.getBoundingRect().left;
    let top2 = gameDiv2.getBoundingRect().top;
    let height2 = gameDiv2.clientHeight;
    let width2 = gameDiv2.clientWidth;
    let bottom2 = top2 + height2;
    let right2 = left2 + width2;
    if (bottom1 < top2 || top1 > bottom2 || right1 < left2 || left1 > right2)
        return false;
    return true;
}
doent.addEventListener("keydown", function (e) {
    var key = e.key;
    if (key === " " && playing) {
        flapping = true;
    }
});
doent.addEventListener("keyup", function (e) {
    e.preventDefault(); // Stops weird behaviour where releasing e calls restart()
    var key = e.key;
    if (key === " " && playing) {
        flapping = false;
    }
});
gameArea.addEventListener("mousedown", function (e) {
    if (playing) {
        flapping = true;
    }
});
gameArea.addEventListener("mouseup", function (e) {
    if (playing) {
        flapping = false;
    }
});
restart();
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta cht="utf-8" />
    <le>Flappy Bird</le>
    <link rel="stylesheet" type="text/css" xxx="stylesheet1.css" media="screen" />
    <script src="game.js"></script>
</head>
<body onload="load();">
    <div id="game">
        <div id="game-area">
            <div id="bird"></div>
            <div cl="pole" id="pole-1"></div>
            <div cl="pole" id="pole-2"></div>
        </div>
        <div id="game-info">
            <p>Score:<span id="score">0</span></p>
            <on id="restart-btn">Restart</on>
            <p>Speed:<span id="speed">2</span></p>
        </div>
    </div>
</body>
</html>

js 中有很多错误，当我运行它，我似乎无法理解为什么。

0

解决问题的一种方法是将事件移动到load并在脚本中调用load：

var poles;
var bird;
var pole1;
var pole2;
var scoreSpan;
var speedSpan;
var speed;
var score;
var flapping;
var playing;
var scoreUpdated;
var gameArea;
var restartBtn;
var containerWidth;
var containerHeight;
function load() {
  bird = doent.getElementById("bird")
  poles = doent.querySelectorAll(".pole")
  pole1 = doent.getElementById("pole-1")
  pole2 = doent.getElementById("pole-2")
  scoreSpan = doent.getElementById("score")
  speedSpan = doent.getElementById("speed")
  gameArea = doent.getElementById("game-area");
  restartBtn = doent.getElementById("restart-btn");
  containerWidth = gameArea.clientWidth;
  containerHeight = gameArea.clientHeight;
  gameArea.addEventListener("mousedown", function(e) {
    if (playing) {
      flapping = true;
    }
  });
  gameArea.addEventListener("mouseup", function(e) {
    if (playing) {
      flapping = false;
    }
  });
}
function restart() {
  restartBtn.removeEventListener('click', restart);
  speed = 2;
  score = 0;
  scoreUpdated = false;
  flapping = false;
  playing = true;
  speedSpan.textContent = speed;
  scoreSpan.textContent = score;
  poles.forEach((pole) => {
    pole.style.right = 0;
  });
  bird.style.top = 20 + "%";
  gameLoop();
}
function update() {
  var polesCurrentPos = pFloat(window.getComputedStyle(poles[0]).getPropertyValue("right"));
  if (polesCurrentPos > containerWidth * 0.85) {
    if (!scoreUpdated) {
      score += 1;
      scoreUpdated = true;
    }
    scoreSpan.textContent = score;
  }
  if (polesCurrentPos > containerWidth) {
    var newHeight = pInt(Math.random() * 100);
    // ùéðåé âåáä îåè
    pole1.style.height = 100 + newHeight + "px";
    pole2.style.height = 100 - newHeight + "px";
    polesCurrentPos = 0;
    speed += 0.25;
    speedSpan.textContent = pInt(speed);
    scoreUpdated = false;
  }
  poles.forEach((pole) => {
    pole.style.right = polesCurrentPos + speed + "px";
  });
  let birdTop = pFloat(window.getComputedStyle(bird).getPropertyValue("top"));
  if (flapping) {
    bird.style.top = birdTop + -2 + "px";
  } else if (birdTop < containerHeight - bird.clientHeight) {
    bird.style.top = birdTop + 2 + "px";
  }
  if (collision(bird, pole1) || collision(bird, pole2) || birdTop <= 0 || birdTop > containerHeight - bird.clientHeight) {
    gameOver();
  }
}
function gameOver() {
  window.console.log("game over");
  playing = false;
  restartBtn.addEventListener('click', restart);
}
function gameLoop() {
  update();
  if (playing) {
    requestAnimationFrame(gameLoop);
  }
}
function collision(gameDiv1, gameDiv2) {
  let left1 = gameDiv1.getBoundingRect().left;
  let top1 = gameDiv1.getBoundingRect().top;
  let height1 = gameDiv1.clientHeight;
  let width1 = gameDiv1.clientWidth;
  let bottom1 = top1 + height1;
  let right1 = left1 + width1;
  let left2 = gameDiv2.getBoundingRect().left;
  let top2 = gameDiv2.getBoundingRect().top;
  let height2 = gameDiv2.clientHeight;
  let width2 = gameDiv2.clientWidth;
  let bottom2 = top2 + height2;
  let right2 = left2 + width2;
  if (bottom1 < top2 || top1 > bottom2 || right1 < left2 || left1 > right2)
    return false;
  return true;
}
doent.addEventListener("keydown", function(e) {
  var key = e.key;
  if (key === " " && playing) {
    flapping = true;
  }
});
doent.addEventListener("keyup", function(e) {
  e.preventDefault(); // Stops weird behaviour where releasing e calls restart()
  var key = e.key;
  if (key === " " && playing) {
    flapping = false;
  }
});
load();
restart();
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta cht="utf-8" />
    <le>Flappy Bird</le>
    <link rel="stylesheet" type="text/css" xxx="stylesheet1.css" media="screen" />
    <script src="game.js" defer></script>
</head>
<body>
    <div id="game">
        <div id="game-area">
            <div id="bird"></div>
            <div cl="pole" id="pole-1"></div>
            <div cl="pole" id="pole-2"></div>
        </div>
        <div id="game-info">
            <p>Score:<span id="score">0</span></p>
            <on id="restart-btn">Restart</on>
            <p>Speed:<span id="speed">2</span></p>
        </div>
    </div>
</body>
</html>

我将poles = doent.getElementById("poles")替换为poles = doent.querySelectorAll(".pole")以查找所有极点。

本站系公益性非盈利分享网址，本文来自用户投稿，不代表边看边学立场，如若转载，请注明出处

赞 (185)
怎么看cpu频率:xkcd api 怎么看解释
上一篇
C#向下取整:需要始终在SQL中取整(round up in sql)
下一篇

相关推荐

发表评论

登录 后才能评论

评论列表（68条）