原生js實現的金山打字小游戲（實例代碼詳解）

//計分板
var board = {
 dom: document.getElementById("score"),
 maxLost: 3, //最大丟失量
 lost: 0, //當前丟失了多少個
 score: 0, //當前分數
 render: function() {
 //顯示
 this.dom.innerHTML =
  "<p>得分：" +
  this.score +
  "</p><p>丟失：" +
  this.lost +
  " / " +
  this.maxLost +
  "</p>";
 },
 //增加一個丟失數
 addLost: function() {
 if (this.lost === this.maxLost) {
  return; //游戲已經結束了
 }
 this.lost++;
 if (this.lost === this.maxLost) {
  //丟失量達到最大
  game.gameOver();
 }
 this.render();
 },
 reset: function() {
 this.lost = 0;
 this.score = 0;
 this.render();
 },
 //增加得分
 addScore: function(number) {
 if (this.lost === this.maxLost) {
  //已經結束了
  return;
 }
 this.score += number;
 this.render();
 }
};

board.render();

var letters = []; //目前的所有字母，一個字母就是一個對象
//字母的容器
var divContainer = document.getElementById("letter-container");
/**
 * 產生一個字母對象，并將其加入到數組中
 */
function createLetter() {
 //創建img元素
 var img = document.createElement("img");
 img.className = "letter";

 divContainer.appendChild(img);

 //設置src路徑
 var charNumber = getRandom(65, 65 + 26); //字母的隨機ASCII碼
 var char = String.fromCharCode(charNumber);
 img.src = "img/letter/" + char + ".png";

 //left隨機
 var left = getRandom(0, divContainer.clientWidth - img.width);
 img.style.left = left + "px";

 var letter = {
 dom: img,
 char: char,
 left: left,
 top: -img.height, //初始的top值
 speed: getRandom(100, 500), //速度: 像素/秒
 render: function() {
  this.dom.style.top = this.top + "px";
 },
 // 每調用一次該方法，字母移動一段距離
 // duration是經過的時間: 秒
 move: function(duration) {
  var dis = duration * this.speed; //計算距離
  this.top += dis;
  this.render();
 },
 kill: function() {
  //自殺
  // 從數組中移除
  var index = letters.indexOf(this); //找到字母在數組中的下標
  if (index >= 0) {
  letters.splice(index, 1);
  }
  // 移除dom元素
  this.dom.remove();
 }
 };

 letter.render();

 letters.push(letter);
}

// 根據最小值和最大值產生一個隨機整數(不包含最大值)
function getRandom(min, max) {
 // Math.random() 0~1
 // Math.random() * (max - min) 0 ~ (max - min)
 // Math.random() * (max - min) + min min ~ max
 return Math.floor(Math.random() * (max - min) + min);
}

//游戲對象，統籌規劃
var game = {
 timerProduce: null, //自動產生字母的timerid
 timerMove: null, //自動移動的timerid
 isOver: false,
 //自動的，不斷的，產生字母
 startProduce: function() {
 if (this.timerProduce) {
  return; //正在產生中，什么也不做
 }
 this.timerProduce = setInterval(createLetter, 500);
 },
 //停止自動產生字母
 stopProduce: function() {
 clearInterval(this.timerProduce);
 this.timerProduce = null;
 },
 //開始不斷的移動所有字母
 startMove: function() {
 if (this.timerMove) {
  return;
 }
 var duration = 0.016; //間隔時間，秒
 this.timerMove = setInterval(function() {
  for (var i = 0; i < letters.length; i++) {
  var letter = letters[i]; //要移動的字母
  letter.move(duration);
  //判斷該字母是不是可以消除了
  if (letter.top >= divContainer.clientHeight) {
   letter.kill();
   i--;
   //丟失
   board.addLost();
  }
  }
 }, duration * 1000);
 },
 //停止移動所有字母
 stopMove: function() {
 clearInterval(this.timerMove);
 this.timerMove = null;
 },
 gameOver: function() {
 this.stopMove();
 this.stopProduce();
 document.getElementById("over").style.display = "block";
 this.isOver = true;
 },
 restart: function() {
 //清空字母
 for (var i = 0; i < letters.length; i++) {
  var letter = letters[i];
  letter.kill();
  i--;
 }
 this.startMove();
 this.startProduce();
 board.reset();
 this.isOver = false;
 document.getElementById("over").style.display = "none";
 }
};

game.startProduce();
game.startMove();

//注冊事件
window.onkeydown = function(e) {
 if (game.isOver) {
 return;
 }
 var key = e.key.toUpperCase();
 //匹配
 for (var i = 0; i < letters.length; i++) {
 var letter = letters[i];
 if (letter.char === key) {
  letter.kill();
  board.addScore(10);
  return; //只移除一個
 }
 }
};