원생 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; //     
 }
 }
};