html网页做一个打字小游戏,原生js实现的金山打字小游戏（实例代码详解）
首先先来看一下效果图
如果感兴趣的就来看一下Js源码吧
//计分板
var board = {
dom: document.getElementById("score"),
maxLost: 3, //最大丢失量
lost: 0, //当前丢失了多少个
score: 0, //当前分数
render: function() {
//显示
this.dom.innerHTML =
"
得分：" +
this.score +
"
丢失：" +
this.lost +
" / " +
this.maxLost +
"
";
},
//增加一个丢失数
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金山打字游戏内容请参考脚本之家以往的相关文章或继续查看后续推荐内容。如能继续得到脚本之家的支持与鼓励，则将是我们持续努力的动力！