南强小屋 Design By 杰米
这是昨天用原生的js写的打字动画游戏，主要用的间歇定时器，对象，还有Math方法，感觉还行，主要看消除字母的时间快慢，但是也有bug，就是字母都是一次性生成的，所以一开始，看起来感觉会有种爆炸的感觉，如果能够一次性生成一批，然后分批往下掉就好了，求大神帮忙改改，大家也可以参考参考。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body,button{
margin: 0;
padding: 0;
}
body {
background: #333;
}
#game {
width: 400px;
margin: 0 auto;
}
#start {
width: 80px;
height: 40px;
}
span {
margin: 20px;
color: white;
}
.letter {
position: absolute;
color: yellow;
font: bold 30px "Arial";
}
</style>
<script>
window.onload= function () {
var start = document.getElementById("start");
var scroll = document.getElementById("scroll");
var time = document.getElementById("time");
var g = 1 ;//Gravity
var timenum = 0 ;//时间的计数
var num = 0 ;//成绩的计数
var gameover = false ;
var timeandtime = null;
var letters = null ;
//字母放在一个字符串里面，随机选取
var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
//点击开始按钮，字母会自动生成，从顶部，以随机速度落下
//用户操作：按钮对应字母的按钮，然后字母就会消失
//用户没有点击到的按钮到达底部以后会回到顶上重新落下；
//用户清除所有字母后，弹出对话框，显示分数和文字。
//封装一个对象，里面包含获取事件对象，页面位置，清除冒泡，获取事件目标的兼容性方法
var eventUtil = {
getEvent: function (event) {
return event || window.event;
},
getPageX: function (event) {
return event.pageX || event.clientX + document.documentElement.scrollLeft;
},
getPageY: function (event) {
return event.pageY || event.clientY + document.documentElement.scrollTop;
},
stopPropagation: function (event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
},
getTarget: function (event) {
return event.target || event.srcElement;
}
};
start.onclick= function () {
for(var i = 0 ;i<26;i++){
new letter();
}
letters = document.body.children;//将页面中所有的div全部放入一个伪数组中，第一个除外，属于game，因此遍历从1开始
//在键盘上，按下对应的字母键，字母会立即消失，同时分数会增加，并且在上面重新生成；
document.onkeydown = function (event) {
var evt = eventUtil.getEvent(event);
var keychar = String.fromCharCode(evt.keyCode);//将按下的字母键盘码转换成直接的大写字母
for(var i = 1 ;i<letters.length;i++){
if(keychar===letters[i].innerHTML){
num++;
scroll.innerHTML = num;
document.body.removeChild(letters[i]);
}
}
}
timeandtime=setInterval(function () {
timenum = timenum + 1 ;
console.log(letters);
if(letters.length==1){//当伪数组的长度只有一个时，那么游戏就结束
gameover = true ;
clearInterval(timeandtime);
alert("用时"+timenum+"秒，再接再厉！突破10秒！");
} else {
time.innerHTML = timenum;
}
},1000)
}
//封装函数
function letter(){
this.x=Math.random()*900+100; //设置位置在100-1000之间
this.y=0;
this.speedY = Math.random()*4+1; //速度随机设置在1-5之间
this.value = str[parseInt(Math.random()*25)]; //在26个字母中随机生成一个字母
var letDiv = document.createElement("div");
letDiv.className = "letter";
letDiv.style.top = this.y+"px";
letDiv.style.left = this.x+ "px";
letDiv.innerHTML = this.value;
document.body.appendChild(letDiv);
//字母往下掉
var that = this ;
this.timer=setInterval(function () {
//leader = leader + step;
that.y = that.y + that.speedY;
if(that.y>=client().height-letDiv.offsetHeight){
that.y = 0;
that.x = Math.random()*900+100;
}
if(!gameover){
letDiv.style.left = that.x + "px";
letDiv.style.top = that.y + "px";
} else {
clearInterval(that.timer);
}
},15)
}
// 获取可视窗口的宽度和高度窗,兼容性问题
function client() {
return {
width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0,
height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0
};
}
}
</script>
</head>
<body>
<div id="game">
<button id="start">开始</button>
<span>得分:<i id="scroll">0</i></span>
<span>计时:<i id="time">0</i></span>
</div>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！
标签：
js打字游戏,js实现打字效果
南强小屋 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
南强小屋 Design By 杰米
暂无原生js实现打字动画游戏的评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。