原生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; //只移除一个
 }
 }
};