打字游戏

Posted blast

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了打字游戏相关的知识,希望对你有一定的参考价值。

<! DOCTYPE html>

<html lang="cn">

<head>

<meta charset="UTF-8">

<title>打字游戏</title>

<style>

*{margin:0;

padding:0;

}

#div1{

width:100px;

height:30;

background-color:blue;

text-align:center;

position:absoulute;

z-index:1;

}

</style>

</head>

<body>

<div id="box">

<div id="div1">开始</div>

<div id="div2"></div>

</div>

<script>

var  oBox=document.getElementById("box");

var oDiv1=document.getElementById("div1");

var winWidth=document.getElementElement.scrollWidth; 

var winHeight=document.getElementElement.scrollHeight;

oDiv1.onclick=function(){ //开始按钮的点击事件

game();//调用函数

}

function game(){

var all=setInterval(function(){

var oLetter=document.createElement("div");//创建一个新的div

oBox.appendChild(oLetter);//把新建的div赋值给box

oLetter.style.color=colorsl();//随机字母颜色

oLetter.style.fontSize = size1() + "px";//随机字体大小

oLetter.style.position = "absolute";//定位

oLetter.style.marginLeft = place1()+"px";//随机位置

oLetter.style.top = "-100px"//设置初始下来的位置

var random = String.fromCharCode(letter1());//随机字母

oLetter.innerHTML = random;

//下落运动定时器 每10ms落下6px

var arr = setInterval(function () {

oLetter.style.top = oLetter.offsetTop + 1 + "px";

//当偏移量超出页面时自焚

if (oLetter.offsetTop >winHeight) {

oLetter.remove();

}

},10)

},2000)

//添加键盘事件

document.onkeydown = function (ev) {

var ev = ev || window.event;

for (var i = 0; i < oBox.children.length; i++) {

//当键盘按下的字母=出现的oBox.children中字母相同时自焚

if (String.fromCharCode(ev.keyCode) == oBox.children[i].innerHTML) {

oBox.children[i].remove();

}

}
}
}

function  place1(){//设置随机距离

retrun Math.floor(Math.random()*(winWidth-1+1)+1)

}

function colors1(){

var r = Math.floor(Math.random() * 256);

var g = Math.floor(Math.random() * 256);

var b = Math.floor(Math.random() * 256);

return "rgb(" + r + "," + g + "," + b + ")"

}

function  letter1(){//随机字母

return Math.floor(Math.random() * (90 - 65 + 1) + 65);

}

function size1(){//随机字母大小

return Math.floor(Math.random() * (90 - 50 + 1) + 50);

}

 

 

 

 

</script>

</body>

</html>

以上是关于打字游戏的主要内容,如果未能解决你的问题,请参考以下文章

打字游戏

Python:游戏:测试打字速度

打字游戏

打字游戏

Java JUI打字小游戏项目

c#实现简单金山打字小游戏(源码)