原生js实现的金山打字小游戏（实例代码详解）
首先先来看一下效果图
如果感兴趣的就来看一下Js源码吧
//计分板
varboard={
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();
varletters=[];//目前的所有字母，一个字母就是一个对象
//字母的容器
vardivContainer=document.getElementById("letter-container");
/**
*产生一个字母对象，并将其加入到数组中
*/
functioncreateLetter(){
//创建img元素
varimg=document.createElement("img");
img.className="letter";
divContainer.appendChild(img);
//设置src路径
varcharNumber=getRandom(65,65+26);//字母的随机ASCII码
varchar=String.fromCharCode(charNumber);
img.src="img/letter/"+char+".png";
//left随机
varleft=getRandom(0,divContainer.clientWidth-img.width);
img.style.left=left+"px";
varletter={
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){
vardis=duration*this.speed;//计算距离
this.top+=dis;
this.render();
},
kill:function(){
//自杀
//从数组中移除
varindex=letters.indexOf(this);//找到字母在数组中的下标
if(index>=0){
letters.splice(index,1);
}
//移除dom元素
this.dom.remove();
}
};
letter.render();
letters.push(letter);
}
//根据最小值和最大值产生一个随机整数(不包含最大值)
functiongetRandom(min,max){
//Math.random()0~1
//Math.random()*(max-min)0~(max-min)
//Math.random()*(max-min)+minmin~max
returnMath.floor(Math.random()*(max-min)+min);
}
//游戏对象，统筹规划
vargame={
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;
}
varduration=0.016;//间隔时间，秒
this.timerMove=setInterval(function(){
for(vari=0;i=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(vari=0;i
仅仅使用js的面向对象编程，可爱的金山打字小游戏就实现了
总结
到此这篇关于原生js实现的金山打字小游戏的文章就介绍到这了,更多相关js金山打字游戏内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。