原生js实现的金山打字小游戏（实例代码详解）

首先先来看一下效果图

如果感兴趣的就来看一下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; //只移除一个
 }
 }
};

仅仅使用js的面向对象编程，可爱的金山打字小游戏就实现了

总结

到此这篇关于原生js实现的金山打字小游戏的文章就介绍到这了,更多相关js金山打字游戏内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木！