JQuery蛇游戏记分板在游戏结束后消失

Question

我用jQuery和HTML语言开发了一个蛇游戏。我在游戏板上显示分数。一切都进行得很顺利，但是当游戏结束并需要重新启动时，分数会消失，并且不会再次显示。当我重新加载页面时，它再次显示。

因为我不能在文本较少的情况下发布这个问题，所以我输入了所有这些随机的段落。对此我很抱歉。

​

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function($) {
   var score;
   init();
});
var score=0;
var move;
function init() {
    board.initBoard();
    createSnake();
    food.createFood();
}

function play() {

    $('.newGame').hide();
    $('.playgame').hide();
    moveSnake();
    getSnakeDir();
}

function gameover() {
 console.log(score);
    clearTimeout(move);
    $('.newGame').show();
}

function playGame() {
score=0;
    
    $('#gameboard').empty();
    $('.newGame').hide();
    init();
    play();
}

var board = {
    DIM: 20,
    initBoard: function() {
        for (var i = 0; i < board.DIM; i++) {
            var row = $('<div class="row-' + i + '"></div>');
            
            for (var j = 0; j < board.DIM; j++) {
                var col = ('<div class="col-' + j + '-' + i + '"></div>');
                $(row).append(col);
            }
            $("#gameboard").append(row);
        }
    }
}

var snake = {
    position: ['10-10', '10-11', '10-12'],
    direction: 'r',
    speed: 200,
};

function createSnake() {
    $('.col-10-10').addClass('snake');
    $('.col-11-10').addClass('snake');
    snake.position = ['10-10', '10-11', '10-12'];
}

function getSnakeDir() {
    $(document).keydown(function(event) {
        //event.preventDefault();
        if (event.which == 38) {
            snake.direction = 'u';
        } else if (event.which == 39) {
            snake.direction = 'r';
        } else if (event.which == 40) {
            snake.direction = 'd';
        } else if (event.which == 37) {
            snake.direction = 'l';
        }
    });
}

function moveSnake() {
    var tail = snake.position.pop();
    $('.col-' + tail).removeClass('snake');

    var coords = snake.position[0].split('-');
    var x = parseInt(coords[0]);
    var y = parseInt(coords[1]);

    if (snake.direction == 'r') {
        x = x + 1;
    } else if (snake.direction == 'd') {
        y = y + 1;
    } else if (snake.direction == 'l') {
        x = x - 1;
    } else if (snake.direction == 'u') {
        y = y - 1;
    }
    
    var currentcoords = x + '-' + y;
    snake.position.unshift(currentcoords);

    $('.col-' + currentcoords).addClass('snake');

    //when snake eats food
    if (currentcoords == food.coords) {
        console.log('true');
        score= score+10;
        $('#scoreb').html("Score :" +score);
        $('.col-' + food.coords).removeClass('food');
        snake.position.push(tail);
        food.createFood();
    }

    //game over
    if (x < 0 || y < 0 || x > board.DIM || y > board.DIM) {
        gameover();
        $('#scoreb').show();
        return;
    
    }

    //if snake touch itself
    if (hitItself(snake.position) == true) {
        gameover();
        return;
    }
    
    move=setTimeout(moveSnake, 200);
}

var food = {
    coords: "",

    createFood: function() {
        var x = Math.floor(Math.random() * (board.DIM-1)) + 1;
        var y = Math.floor(Math.random() * (board.DIM-1)) + 1;
        var fruitCoords = x + '-' + y;
        $('.col-' + fruitCoords).addClass('food');
        food.coords = fruitCoords;
    },
}

function hitItself(array) {
    var valuesSoFar = Object.create(null);
    for (var i = 0; i < array.length; ++i) {
        var value = array[i];
        if (value in valuesSoFar) {
            return true;
        }
        valuesSoFar[value] = true;
    }
    return false;
}
</script>
<style>
.buttonnewgame {
     position: relative;
}

.newGame {
    position: absolute;
    top: 45%;
    left: 20%;
    padding: 15px;
    font-size: 1em;
     font: normal;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    
    font-weight: bold;
    font-size: 1em;
    background-color: #FF69B4;
       
}
.instructions
{
margin-left: 5px;
float: left;
position : relative;
color: #c603fc;
    font: normal;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: bold;

}
.gameContainer{
    width:100%;
}
#scoreb
{
z-index: 999;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
}
#gameboard {
    background-color:#eee;
    padding:3px;
}

.playgame {
    position: absolute;
    top: 45%;
    left: 20%;
    padding: 15px;
    font: normal;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    
    font-weight: bold;
    font-size: 1em;
    background-color: #FF69B4;
       
}

/* styling the board */
div[class^='row'] {
    height: 15px;
    text-align: center;
}

div[class*='col']{
    display: inline-block;
    border: 1px solid grey;
    width: 15px;
    height: 15px;
}

/*display the snake*/
.snake {

    background-color: blue;
    z-index: 99;
}

.food {
    background: red;
    z-index: 99;
}
</style>
<table>
<tr>
<td><div class="game">
    <div class="buttonnewgame">
       <center><input type="button" name="New game" value="Game over! New game" class="newGame" style="display:none;" onclick="playGame()" />
        <button class="playgame" onclick="play()">Play Game</button></center> 
        <div class="gameContainer">
      
            <div id="gameboard">
          <div id="scoreb"> Score : </div>               
               <!-- snake game in here -->
            </div>
        </div>
        </div></div></td>
        <td width="150">
    <div class="instructions" >
      OBJECT: Get as many pieces of "food" as possible using your arrow keys.  Each time you do this, you will grow.   You want to try to get as big as possible without crashing into a wall or back onto yourself.  Good Luck!!
      </div></td></tr></table>

​

Answer 1

您清空了#gameboard中的所有标记，但您需要清空除scoreb之外的所有标记。因此使用$('#gameboard').find('*').not('#scoreb').remove();而不是$('#gameboard').empty();

注意，您必须通过：$('#scoreb').text("Score :0")重置score的值

​

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function($) {
   var score;
   init();
});
var score=0;
var move;
function init() {
    board.initBoard();
    createSnake();
    food.createFood();
}

function play() {

    $('.newGame').hide();
    $('.playgame').hide();
    moveSnake();
    getSnakeDir();
}

function gameover() {
 console.log(score);
    clearTimeout(move);
    $('.newGame').show();
}

function playGame() {
score=0;
    
    //$('#gameboard').empty();
    $('#gameboard').find('*').not('#scoreb').remove();
    $('#scoreb').text("Score :0")
    $('.newGame').hide();
    init();
    play();
}

var board = {
    DIM: 20,
    initBoard: function() {
        for (var i = 0; i < board.DIM; i++) {
            var row = $('<div class="row-' + i + '"></div>');
            
            for (var j = 0; j < board.DIM; j++) {
                var col = ('<div class="col-' + j + '-' + i + '"></div>');
                $(row).append(col);
            }
            $("#gameboard").append(row);
        }
    }
}

var snake = {
    position: ['10-10', '10-11', '10-12'],
    direction: 'r',
    speed: 200,
};

function createSnake() {
    $('.col-10-10').addClass('snake');
    $('.col-11-10').addClass('snake');
    snake.position = ['10-10', '10-11', '10-12'];
}

function getSnakeDir() {
    $(document).keydown(function(event) {
        //event.preventDefault();
        if (event.which == 38) {
            snake.direction = 'u';
        } else if (event.which == 39) {
            snake.direction = 'r';
        } else if (event.which == 40) {
            snake.direction = 'd';
        } else if (event.which == 37) {
            snake.direction = 'l';
        }
    });
}

function moveSnake() {
    var tail = snake.position.pop();
    $('.col-' + tail).removeClass('snake');

    var coords = snake.position[0].split('-');
    var x = parseInt(coords[0]);
    var y = parseInt(coords[1]);

    if (snake.direction == 'r') {
        x = x + 1;
    } else if (snake.direction == 'd') {
        y = y + 1;
    } else if (snake.direction == 'l') {
        x = x - 1;
    } else if (snake.direction == 'u') {
        y = y - 1;
    }
    
    var currentcoords = x + '-' + y;
    snake.position.unshift(currentcoords);

    $('.col-' + currentcoords).addClass('snake');

    //when snake eats food
    if (currentcoords == food.coords) {
        console.log('true');
        score= score+10;
        $('#scoreb').html("Score :" +score);
        $('.col-' + food.coords).removeClass('food');
        snake.position.push(tail);
        food.createFood();
    }

    //game over
    if (x < 0 || y < 0 || x > board.DIM || y > board.DIM) {
        gameover();
        $('#scoreb').show();
        return;
    
    }

    //if snake touch itself
    if (hitItself(snake.position) == true) {
        gameover();
        return;
    }
    
    move=setTimeout(moveSnake, 200);
}

var food = {
    coords: "",

    createFood: function() {
        var x = Math.floor(Math.random() * (board.DIM-1)) + 1;
        var y = Math.floor(Math.random() * (board.DIM-1)) + 1;
        var fruitCoords = x + '-' + y;
        $('.col-' + fruitCoords).addClass('food');
        food.coords = fruitCoords;
    },
}

function hitItself(array) {
    var valuesSoFar = Object.create(null);
    for (var i = 0; i < array.length; ++i) {
        var value = array[i];
        if (value in valuesSoFar) {
            return true;
        }
        valuesSoFar[value] = true;
    }
    return false;
}
</script>
<style>
.buttonnewgame {
     position: relative;
}

.newGame {
    position: absolute;
    top: 45%;
    left: 20%;
    padding: 15px;
    font-size: 1em;
     font: normal;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    
    font-weight: bold;
    font-size: 1em;
    background-color: #FF69B4;
       
}
.instructions
{
margin-left: 5px;
float: left;
position : relative;
color: #c603fc;
    font: normal;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: bold;

}
.gameContainer{
    width:100%;
}
#scoreb
{
z-index: 999;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
}
#gameboard {
    background-color:#eee;
    padding:3px;
}

.playgame {
    position: absolute;
    top: 45%;
    left: 20%;
    padding: 15px;
    font: normal;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    
    font-weight: bold;
    font-size: 1em;
    background-color: #FF69B4;
       
}

/* styling the board */
div[class^='row'] {
    height: 15px;
    text-align: center;
}

div[class*='col']{
    display: inline-block;
    border: 1px solid grey;
    width: 15px;
    height: 15px;
}

/*display the snake*/
.snake {

    background-color: blue;
    z-index: 99;
}

.food {
    background: red;
    z-index: 99;
}
</style>
<table>
<tr>
<td><div class="game">
    <div class="buttonnewgame">
       <center><input type="button" name="New game" value="Game over! New game" class="newGame" style="display:none;" onclick="playGame()" />
        <button class="playgame" onclick="play()">Play Game</button></center> 
        <div class="gameContainer">
      
            <div id="gameboard">
          <div id="scoreb"> Score : </div>               
               <!-- snake game in here -->
            </div>
        </div>
        </div></div></td>
        <td width="150">
    <div class="instructions" >
      OBJECT: Get as many pieces of "food" as possible using your arrow keys.  Each time you do this, you will grow.   You want to try to get as big as possible without crashing into a wall or back onto yourself.  Good Luck!!
      </div></td></tr></table>

​

Answer 2

您的记分板在#gameboard中。执行行$('#gameboard').empty();时，将删除记分板。

将行<div id="scoreb"> Score : </div>移出#gameboard。

​

jQuery(document).ready(function($) {
  var score;
  init();
});
var score = 0;
var move;

function init() {
  board.initBoard();
  createSnake();
  food.createFood();
}

function play() {

  $('.newGame').hide();
  $('.playgame').hide();
  moveSnake();
  getSnakeDir();
}

function gameover() {
  console.log(score);
  clearTimeout(move);
  $('.newGame').show();
}

function playGame() {
  score = 0;

  $('#gameboard').empty();
  $('.newGame').hide();
  init();
  play();
}

var board = {
  DIM: 20,
  initBoard: function() {
    for (var i = 0; i < board.DIM; i++) {
      var row = $('<div class="row-' + i + '"></div>');

      for (var j = 0; j < board.DIM; j++) {
        var col = ('<div class="col-' + j + '-' + i + '"></div>');
        $(row).append(col);
      }
      $("#gameboard").append(row);
    }
  }
}

var snake = {
  position: ['10-10', '10-11', '10-12'],
  direction: 'r',
  speed: 200,
};

function createSnake() {
  $('.col-10-10').addClass('snake');
  $('.col-11-10').addClass('snake');
  snake.position = ['10-10', '10-11', '10-12'];
}

function getSnakeDir() {
  $(document).keydown(function(event) {
    //event.preventDefault();
    if (event.which == 38) {
      snake.direction = 'u';
    } else if (event.which == 39) {
      snake.direction = 'r';
    } else if (event.which == 40) {
      snake.direction = 'd';
    } else if (event.which == 37) {
      snake.direction = 'l';
    }
  });
}

function moveSnake() {
  var tail = snake.position.pop();
  $('.col-' + tail).removeClass('snake');

  var coords = snake.position[0].split('-');
  var x = parseInt(coords[0]);
  var y = parseInt(coords[1]);

  if (snake.direction == 'r') {
    x = x + 1;
  } else if (snake.direction == 'd') {
    y = y + 1;
  } else if (snake.direction == 'l') {
    x = x - 1;
  } else if (snake.direction == 'u') {
    y = y - 1;
  }

  var currentcoords = x + '-' + y;
  snake.position.unshift(currentcoords);

  $('.col-' + currentcoords).addClass('snake');

  //when snake eats food
  if (currentcoords == food.coords) {
    console.log('true');
    score = score + 10;
    $('#scoreb').html("Score :" + score);
    $('.col-' + food.coords).removeClass('food');
    snake.position.push(tail);
    food.createFood();
  }

  //game over
  if (x < 0 || y < 0 || x > board.DIM || y > board.DIM) {
    gameover();
    $('#scoreb').show();
    return;

  }

  //if snake touch itself
  if (hitItself(snake.position) == true) {
    gameover();
    return;
  }

  move = setTimeout(moveSnake, 200);
}

var food = {
  coords: "",

  createFood: function() {
    var x = Math.floor(Math.random() * (board.DIM - 1)) + 1;
    var y = Math.floor(Math.random() * (board.DIM - 1)) + 1;
    var fruitCoords = x + '-' + y;
    $('.col-' + fruitCoords).addClass('food');
    food.coords = fruitCoords;
  },
}

function hitItself(array) {
  var valuesSoFar = Object.create(null);
  for (var i = 0; i < array.length; ++i) {
    var value = array[i];
    if (value in valuesSoFar) {
      return true;
    }
    valuesSoFar[value] = true;
  }
  return false;
}

.buttonnewgame {
  position: relative;
}

.newGame {
  position: absolute;
  top: 45%;
  left: 20%;
  padding: 15px;
  font-size: 1em;
  font: normal;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 1em;
  background-color: #FF69B4;
}

.instructions {
  margin-left: 5px;
  float: left;
  position: relative;
  color: #c603fc;
  font: normal;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: bold;
}

.gameContainer {
  width: 100%;
}

#scoreb {
  z-index: 999;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
}

#gameboard {
  background-color: #eee;
  padding: 3px;
}

.playgame {
  position: absolute;
  top: 45%;
  left: 20%;
  padding: 15px;
  font: normal;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 1em;
  background-color: #FF69B4;
}


/* styling the board */

div[class^='row'] {
  height: 15px;
  text-align: center;
}

div[class*='col'] {
  display: inline-block;
  border: 1px solid grey;
  width: 15px;
  height: 15px;
}


/*display the snake*/

.snake {
  background-color: blue;
  z-index: 99;
}

.food {
  background: red;
  z-index: 99;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <div class="game">
        <div class="buttonnewgame">
          <center><input type="button" name="New game" value="Game over! New game" class="newGame" style="display:none;" onclick="playGame()" />
            <button class="playgame" onclick="play()">Play Game</button></center>
          <div class="gameContainer">

            <div id="scoreb"> Score : </div>
            <div id="gameboard">
              <!-- snake game in here -->
            </div>
          </div>
        </div>
      </div>
    </td>
    <td width="150">
      <div class="instructions">
        OBJECT: Get as many pieces of "food" as possible using your arrow keys. Each time you do this, you will grow. You want to try to get as big as possible without crashing into a wall or back onto yourself. Good Luck!!
      </div>
    </td>
  </tr>
</table>

​