javascript - TETRIS html5 GAME代码检查

Question

我正在为大学做一个俄罗斯方 block 元素。我有大部分功能可以工作，除了一个。预期流程如下:

1. 带有加载游戏按钮的索引页
2. 点击按钮，游戏开始播放背景音频(现在是示例音频)
3. 暂停/玩游戏时音频也应该停止
4. 音频结束后，游戏应该停止并更改为带有一些文本/问卷的 div 元素。

我已经完成了第 1-3 步，但在第 4 步遇到了一些问题。该页面是使用 js 呈现的。我添加了 $('.tetrisGame').innerHTML = '<H1>GAME OVER</H1>';到 music.oneded功能。它不呈现 innerHTML。所以在音乐停止后，控制台会显示消息，仅此而已。

我也尝试在html文件中添加一个隐藏的div元素，并在音乐结束后显示它，但是innerhtml返回null(可能是因为js用js中呈现的元素替换了html文件中的元素文件。

需要帮助:请检查代码并告诉我如何在音乐停止后显示 div 元素。

添加验证代码。有关代码的任何进一步信息，请告诉我。

谢谢

var NUM_ROWS = 20;
var NUM_COLS = 10;
var BLOCK_WIDTH = 30;
var BLOCK_HEIGHT = 30;
var TICK_MS = 400;

var pieces = [
  [
    [0, 0, 0, 0],
    [0, 1, 1, 0],
    [0, 1, 1, 0],
    [0, 0, 0, 0]
  ],
  [
    [0, 0, 1, 0],
    [0, 0, 1, 0],
    [0, 0, 1, 0],
    [0, 0, 1, 0]
  ],
  [
    [0, 0, 1, 0],
    [0, 1, 1, 0],
    [0, 0, 1, 0],
    [0, 0, 0, 0]
  ],
  [
    [0, 0, 0, 0],
    [0, 0, 1, 1],
    [0, 1, 1, 0],
    [0, 0, 0, 0]
  ],
  [
    [0, 0, 0, 0],
    [0, 1, 1, 0],
    [0, 0, 1, 1],
    [0, 0, 0, 0]
  ],
  [
    [0, 0, 1, 0],
    [0, 0, 1, 0],
    [0, 1, 1, 0],
    [0, 0, 0, 0]
  ],
  [
    [0, 1, 0, 0],
    [0, 1, 0, 0],
    [0, 1, 1, 0],
    [0, 0, 0, 0]
  ]
];

var KEY_ENTER = 13;
var KEY_SPACE = 32;
var KEY_LEFT = 37;
var KEY_RIGHT = 39;
var KEY_DOWN = 40;
var KEY_A = 65;
var KEY_D = 68;
var KEY_R = 82;
var music = new Audio('http://www.sample-videos.com/audio/mp3/india-national-anthem.mp3');
//music = new Audio('http://techslides.com/demos/samples/sample.mp3');



function rotateLeft(piece) {
  return [
    [piece[0][3], piece[1][3], piece[2][3], piece[3][3]],
    [piece[0][2], piece[1][2], piece[2][2], piece[3][2]],
    [piece[0][1], piece[1][1], piece[2][1], piece[3][1]],
    [piece[0][0], piece[1][0], piece[2][0], piece[3][0]]
  ];
}

function rotateRight(piece) {
  return [
    [piece[3][0], piece[2][0], piece[1][0], piece[0][0]],
    [piece[3][1], piece[2][1], piece[1][1], piece[0][1]],
    [piece[3][2], piece[2][2], piece[1][2], piece[0][2]],
    [piece[3][3], piece[2][3], piece[1][3], piece[0][3]]
  ];
}

function intersects(rows, piece, y, x) {
  for (var i = 0; i < 4; i++)
    for (var j = 0; j < 4; j++)
      if (piece[i][j])
        if (y + i >= NUM_ROWS || x + j < 0 || x + j >= NUM_COLS || rows[y + i][x + j])
          return true;
  return false;
}

function apply_piece(rows, piece, y, x) {
  var newRows = [];
  for (var i = 0; i < NUM_ROWS; i++)
    newRows[i] = rows[i].slice();
  for (var i = 0; i < 4; i++)
    for (var j = 0; j < 4; j++)
      if (piece[i][j])
        newRows[y + i][x + j] = 1;
  return newRows;
}

function kill_rows(rows) {
  var newRows = [];
  var k = NUM_ROWS;
  for (var i = NUM_ROWS; i-- > 0;) {
    for (var j = 0; j < NUM_COLS; j++) {
      if (!rows[i][j]) {
        newRows[--k] = rows[i].slice();
        break;
      }
    }
  }
  for (var i = 0; i < k; i++) {
    newRows[i] = [];
    for (var j = 0; j < NUM_COLS; j++)
      newRows[i][j] = 0;
  }
  return {
    'rows': newRows,
    'numRowsKilled': k,
  };
}

function randomPiece() {
  return pieces[Math.floor(Math.random() * pieces.length)];
}

function TetrisGame() {
  this.gameOver = false;
  this.score = 0;
  this.currentPiece = randomPiece();
  this.nextPiece = randomPiece();
  this.pieceY = 0;
  this.pieceX = 3;
  this.rows = [];
  for (var i = 0; i < NUM_ROWS; i++) {
    this.rows[i] = []
    for (var j = 0; j < NUM_COLS; j++) {
      this.rows[i][j] = 0;
    }
  }
  playMusic();;
}

TetrisGame.prototype.tick = function() {
  if (this.gameOver)
    return false;
  if (intersects(this.rows, this.currentPiece, this.pieceY + 1, this.pieceX)) {
    /* burn current piece into board */
    this.rows = apply_piece(this.rows, this.currentPiece, this.pieceY, this.pieceX);
    var r = kill_rows(this.rows);
    this.rows = r.rows;
    this.score += r.numRowsKilled;
    /* fetch next piece */
    if (intersects(this.rows, this.nextPiece, 0, NUM_COLS / 2 - 2)) {
      this.gameOver = true;
    } else {
      this.currentPiece = this.nextPiece;
      this.pieceY = 0;
      this.pieceX = NUM_COLS / 2 - 2;
      this.nextPiece = randomPiece();
    }
  } else {
    this.pieceY += 1;
  }
  return true;
}

TetrisGame.prototype.steerLeft = function() {
  if (!intersects(this.rows, this.currentPiece, this.pieceY, this.pieceX - 1))
    this.pieceX -= 1;
}

TetrisGame.prototype.steerRight = function() {
  if (!intersects(this.rows, this.currentPiece, this.pieceY, this.pieceX + 1))
    this.pieceX += 1;
}

TetrisGame.prototype.steerDown = function() {
  if (!intersects(this.rows, this.currentPiece, this.pieceY + 1, this.pieceX))
    this.pieceY += 1;
}

TetrisGame.prototype.rotateLeft = function() {
  var newPiece = rotateLeft(this.currentPiece);
  if (!intersects(this.rows, newPiece, this.pieceY, this.pieceX))
    this.currentPiece = newPiece;
}

TetrisGame.prototype.rotateRight = function() {
  var newPiece = rotateRight(this.currentPiece);
  if (!intersects(this.rows, newPiece, this.pieceY, this.pieceX))
    this.currentPiece = newPiece;
}

TetrisGame.prototype.letFall = function() {
  while (!intersects(this.rows, this.currentPiece, this.pieceY + 1, this.pieceX))
    this.pieceY += 1;
  this.tick();
}

TetrisGame.prototype.get_rows = function() {
  return apply_piece(this.rows, this.currentPiece, this.pieceY, this.pieceX);
}

TetrisGame.prototype.get_next_piece = function() {
  return this.nextPiece;
}

TetrisGame.prototype.get_score = function() {
  return this.score;
}

TetrisGame.prototype.get_game_over = function() {
  return this.gameOver;
}

function draw_blocks(rows, num_rows, num_cols) {
  var boardElem = document.createElement('div');
  for (var i = 0; i < num_rows; i++) {
    for (var j = 0; j < num_cols; j++) {
      var blockElem = document.createElement('div');
      blockElem.classList.add('tetrisBlock');
      if (rows[i][j])
        blockElem.classList.add('habitated');
      blockElem.style.top = (i * BLOCK_HEIGHT) + 'px';
      blockElem.style.left = (j * BLOCK_WIDTH) + 'px';
      boardElem.appendChild(blockElem);
    }
  }
  return boardElem;
}

function draw_tetrisGame(game, isPaused) {
  var leftPaneElem = draw_tetrisLeftPane(game, isPaused);
  var rightPaneElem = draw_tetrisRightPane(game);
  var gameElem = document.createElement('div');
  gameElem.classList.add('tetrisGame');
  gameElem.appendChild(leftPaneElem);
  gameElem.appendChild(rightPaneElem);
  return gameElem;

}

function draw_tetrisLeftPane(game, isPaused) {
  var scoreElem = draw_tetrisScore(game, isPaused);
  var previewElem = draw_tetrisPreview(game);
  var usageElem = draw_tetrisUsage(game);
  var leftPaneElem = document.createElement('div');
  leftPaneElem.classList.add('tetrisLeftPane');
  leftPaneElem.appendChild(previewElem);
  leftPaneElem.appendChild(scoreElem);
  leftPaneElem.appendChild(usageElem);
  return leftPaneElem;
}

function draw_tetrisRightPane(game) {
  var boardElem = draw_tetrisBoard(game);
  var rightPaneElem = document.createElement('div');
  rightPaneElem.classList.add('tetrisRightPane');
  rightPaneElem.appendChild(boardElem);
  return rightPaneElem;
}

function draw_tetrisBoard(game) {
  var rows = game.get_rows();
  var boardElem = draw_blocks(rows, NUM_ROWS, NUM_COLS);
  boardElem.classList.add('tetrisBoard');
  return boardElem;
}


function draw_tetrisScore(game, isPaused) {
  var score = game.get_score();
  var scoreElem = document.createElement('div');
  scoreElem.classList.add('tetrisScore');
  scoreElem.innerHTML = '<p>SCORE: ' + score + '</p>';
  //showscore = "YOUR SCORE: " + score;
  if (isPaused)
    scoreElem.innerHTML += '<p class="blink_text">PAUSED</p>'
  if (game.get_game_over())
    scoreElem.innerHTML += '<p>GAME OVER</p>' + '<h4 class= "blink_text">PRESS <b>R</b> TO RESTART</h4>';
  return scoreElem;

}

function draw_tetrisPreview(game) {
  var piece = game.get_next_piece();
  var pieceElem = draw_blocks(piece, 4, 4);
  var previewElem = document.createElement('div');
  previewElem.classList.add('tetrisPreview');
  previewElem.appendChild(pieceElem);
  return previewElem;
}

function draw_tetrisUsage(game) {
  var usageElem = document.createElement('div');
  usageElem.classList.add('tetrisUsage');
  usageElem.innerHTML =
    "<table>" +
    "<tr><th>Keyboard Keys</th><td>Function</td></tr>" +
    "<tr><th>a/d</th><td>Rotate</td></tr>" +
    "<tr><th>Space bar</th><td>Let fall</td></tr>" +
    "<tr><th>Enter</th><td>Toggle pause</td></tr>" +
    "<tr><th>r</th><td>Restart game</td></tr>" +
    "</table>";
  return usageElem;
}

function redraw(game, isPaused, containerElem) {
  var gameElem = draw_tetrisGame(game, isPaused);
  containerElem.innerHTML = "<center style='margin-top:0;'><font size='15'>TETRIS</font><h3>Test your active listening skills</h3></center><br>";
  containerElem.appendChild(gameElem);

}

function playMusic(game) {
  music.play();
  music.onended = function(game) {
    var msg = "audio playback has ended";
    console.log(msg);
    $('.tetrisGame').innerHTML = '<H1>GAME OVER</H1>';
    //location.href = "intrimlandingpage.html";
  }
}


function tetris_run(containerElem) {
  var game = new TetrisGame();
  play1();
  playMusic();

  function play1() {
    var intervalHandler = setInterval(
      function() {
        if (game.tick())
          redraw(game, false, containerElem);
      },
      TICK_MS
    );

    function keyHandler(kev) {
      if (kev.shiftKey || kev.altKey || kev.metaKey)
        return;
      var consumed = true;
      var mustpause = false;

      if (kev.keyCode === KEY_ENTER) {
        mustpause = true;
        music.pause();
      } else if (kev.keyCode === KEY_R) {

        location.replace(location);
      } else if (kev.keyCode === KEY_LEFT) {
        game.steerLeft();
      } else if (kev.keyCode === KEY_RIGHT) {
        game.steerRight();
      } else if (kev.keyCode === KEY_DOWN) {
        game.steerDown();
      } else if (kev.keyCode === KEY_A) {
        game.rotateLeft();
      } else if (kev.keyCode === KEY_D) {
        game.rotateRight();
      } else if (kev.keyCode === KEY_SPACE) {
        game.letFall();
      } else {
        consumed = false;
      }
      if (consumed) {
        kev.preventDefault();
        if (mustpause) {
          containerElem.removeEventListener('keydown', keyHandler);
          clearInterval(intervalHandler);
          pause();

        } else {
          redraw(game, false, containerElem);
        }
      }
    }

    containerElem.addEventListener('keydown', keyHandler);
  }

  function pause() {
    function keyHandler(kev) {
      if (kev.keyCode == KEY_ENTER) {
        containerElem.removeEventListener('keydown', keyHandler);
        play1();
        music.play();
      }
    }

    containerElem.addEventListener('keydown', keyHandler);

    redraw(game, true, containerElem);
  }
}

div.tetrisGame {
  position: relative;
  margin: auto;
  padding: auto;
  border: none;
  width: 600px;
  height: 600px;
  float: left;
  right: -27%;
}

#audio1 {
  display: none;
}

div.tetrisGame div.tetrisLeftPane {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
}

div.tetrisLeftPane div.tetrisScore {
  position: absolute;
  top: 150px;
  left: 0;
  font-size: 20pt;
}

div.tetrisLeftPane div.tetrisPreview {
  position: absolute;
  left: 150px;
  width: 120px;
  /* 4 cols * 30px */
  height: 120px;
  /* 4 rows * 30px */
}

div.tetrisLeftPane div.tetrisUsage {
  position: absolute;
  left: 0;
  top: 350px;
}

div.tetrisLeftPane div.tetrisUsage th,
div.tetrisLeftPane div.tetrisUsage td {
  text-align: left;
}

div.tetrisLeftPane div.tetrisUsage td {
  padding-left: 1em;
}

div.tetrisRightPane {
  position: absolute;
  left: 300px;
  top: 0px;
  width: 300px;
  /* 10 cols * 30px */
  height: 600px;
  /* 20 rows * 30px */
}

div.tetrisRightPane div.tetrisBoard {
  position: absolute;
  left: 0;
  top: 0;
  width: 300px;
  /* 10 cols * 30px */
  height: 600px;
  /* 20 rows * 30px */
}

div.tetrisBlock {
  position: absolute;
  width: 29px;
  height: 29px;
  border: 1px solid black;
  background-color: #EAEAEA;
}

div.tetrisBlock.habitated {
  border: 1px solid black;
  background-color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="author" content="Andrew Patrick">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tetris</title>
  <link rel="stylesheet" type="text/css" href="tetris.css">
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <style>
    #footer {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 60px;
      /* Height of the footer */
    }
    
    body {
      color: #666;
      font-family: sans-serif;
      line-height: 1.4;
    }
    
    h1 {
      color: #444;
      font-size: 1.2em;
      padding: 14px 2px 12px;
      margin: 0px;
    }
    
    h1 em {
      font-style: normal;
      color: #999;
    }
    
    a {
      color: #888;
      text-decoration: none;
    }
    
    #player {
      width: 400px;
      margin: auto;
    }
    
    ol {
      padding: 0px;
      margin: 0px;
      list-style: decimal-leading-zero inside;
      color: #ccc;
      width: 460px;
      border-top: 1px solid #ccc;
      font-size: 0.9em;
    }
    
    ol li {
      position: relative;
      margin: 0px;
      padding: 9px 2px 10px;
      border-bottom: 1px solid #ccc;
      cursor: pointer;
    }
    
    ol li a {
      display: block;
      text-indent: -3.3ex;
      padding: 0px 0px 0px 20px;
    }
    
    li.playing {
      color: #aaa;
      text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3);
    }
    
    li.playing a {
      color: #000;
    }
    
    li.playing:before {
      content: '♬';
      width: 14px;
      height: 14px;
      padding: 3px;
      line-height: 14px;
      margin: 0px;
      position: absolute;
      left: -24px;
      top: 17px;
      color: #000;
      font-size: 13px;
      text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2);
    }
    
    #shortcuts {
      position: fixed;
      bottom: 0px;
      width: 100%;
      color: #666;
      font-size: 0.9em;
      margin: 60px 0px 0px;
      padding: 20px 20px 15px;
      background: #f3f3f3;
      background: rgba(240, 240, 240, 0.7);
    }
    
    #shortcuts div {
      width: 460px;
      margin: 0px auto;
    }
    
    #shortcuts h1 {
      margin: 0px 0px 6px;
    }
    
    #shortcuts p {
      margin: 0px 0px 18px;
    }
    
    #shortcuts em {
      font-style: normal;
      background: #d3d3d3;
      padding: 3px 9px;
      position: relative;
      left: -3px;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      -o-border-radius: 4px;
      border-radius: 4px;
      -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
      -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
      -o-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
      box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    }
    
    @media screen and (max-device-width: auto) {
      #player {
        position: relative;
      }
    }
    
    .blink_text {
      animation: 1s blinker linear infinite;
      -webkit-animation: 1s blinker linear infinite;
      -moz-animation: 1s blinker linear infinite;
      color: red;
    }
    
    @-moz-keyframes blinker {
      0% {
        opacity: 1.0;
      }
      50% {
        opacity: 0.0;
      }
      100% {
        opacity: 1.0;
      }
    }
    
    @-webkit-keyframes blinker {
      0% {
        opacity: 1.0;
      }
      50% {
        opacity: 0.0;
      }
      100% {
        opacity: 1.0;
      }
    }
    
    @keyframes blinker {
      0% {
        opacity: 1.0;
      }
      50% {
        opacity: 0.0;
      }
      100% {
        opacity: 1.0;
      }
    }
  </style>
  <script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
  <script src="tetris.js"></script>
</head>

<body>
  <div id="header" style="margin-top:600px; background-image:url('Header.jpg');background-size: contain; display: block; width: 100%; height: auto; padding: 0px; margin: 0px; border: none;">
    <br><br><br><br><br><br><br><br><br><br><br><br />
    <center>
      <font size="15" color="white">TETRIS</font>
      <h3>
        <font color="white">Test your active listening skills</h3>
      </font>
    </center>
  </div><br>
  <div class="container">
    <center>
      <div class="col-xs-12">
        <button id="gamerun" type="button" style="margin-top:1px ; margin-bottom:1px" onclick="tetris_run(document.body)" class="btn btn-raised btn-success btn-lg"> Start Game</button>
      </div>
    </center>
  </div>

  <center>
    <div id="footer"><b>Project Tertris 2017</b></div>
  </center>
</body>

</html>

Answer 1

调用 $('.tetrisGame') 将返回一个类似 jQuery 对象的数组，它是与给定类匹配的元素列表 - 您将 不能 调用innerHTML。而是像这样调用:

$('.tetrisGame')[0].innerHTML = '<H1>GAME OVER</H1>'

或者如果您有多个俄罗斯方 block 游戏，那么您可以像这样调用 each 函数:

$('.tetrisGame').each((callback, args) => { /* do stuff */ })

或者使用 Array.prototype.slice.call($('.tetrisGame')) 获取一个 Array 而不是运行 forEach在。