<html>
<head>
<meta charset="utf-8">
<style>
body{
background:url(1.html);
}
#main{
margin:120px;
width:600px;
height:500px;
border:1px solid #eee;
position: relative;
background-image: url(data/begin1.jpg);
}
#getscore{
font-size:18px;
font-weight:bold;
position:absolute;
margin-top:5px;
margin-left:5px;
color:#fff;
z-index:2;
}
#getCorrect{
font-size:18px;
font-weight:bold;
position:absolute;
margin-top:35px;
margin-left:5px;
color:#fff;
z-index:2;
}
#stopButton{
width:35px;
height:35px;
border:3px solid #333;
color:#333;
border-radius:40px;
text-align:center;
line-height:32px;
float:right;
margin-right:10px;
margin-top:10px;
cursor:pointer;
font-weight: bolder;
z-index:10;
}
#begin{
width:600px;
height:410px;
padding-top:100px;
position:absolute;
z-index:10;
background-image: url(data/begin2.jpg);
left:50%;
margin-left:-300px;
display:block;
}
#stop{
width:600px;
height:400px;
padding-top:100px;
position:absolute;
z-index:10;
background-color:rgba(0,0,0,0.6);
left:50%;
margin-left:-300px;
top:120px;
display:none;
}
.button{
width:150px;
height:50px;
color:#fff;
background-color:rgba(0,0,0,0.6);
text-align:center;
line-height:50px;
border-radius:20px;
font-size:20px;
font-weight:bolder;
margin:0 auto;
margin-top:10px;
cursor:pointer;
}
a:link
{
color:white;
}
a{
margin-top:120px;
}
</style>
</head>
<body>
<div align="center">
<audio id="music" src="data/bgmusic.mp3" preload onclick="begingame()"></audio>
<audio id="bubble" src="data/bubble.mp3" preload onkeydown="keyup"></audio>
<div id="begin">
<div class="button" onclick="begingame()">开始游戏</div>
<a href="rank.jsp">
<button class="button" value="排行">排行</button></a>
</div>
<div id=main>
<div align="left" id="getscore">
<span>积分:</span>
<span id="score">0</span>分
</div>
<div align="left" id="getCorrect">
<span>正确率:</span>
<span id="correct">0</span>
</div>
<div id ="stopButton" onclick="mystopButton()" >||</div>
<div id="container"></div>
</div>
<div id="stop">
<div class="button" onclick="continuegame()">继续游戏</div>
<div class="button" onclick="newgame()">新的游戏</div>
<div class="button" onclick="closegame()">退出游戏</div>
</div>
</div>
</body>
<script>
var count=0;
var music=document.getElementById("music");
var bubble=document.getElementById("bubble");
var econtainer = document.getElementById("container");
var gScore = document.getElementById("score");
var gCorrect = document.getElementById("correct");
var showArr = []; //字符对象的列表
var stop =document.getElementById("stop");
var begin =document.getElementById("begin");
var shoted = 0;
var keyup;
var sum=0;
var correct=0;
//随机一个字符对象， 包含了字符的运动速度，字符的值
//让showArr这个数组的数据运动;
var c = function() {//清除下面添加的2个方法，（键盘敲击清除字母，字母有速度下落）及运行到此游戏处于结束或胜利
clearInterval(time);
window.removeEventListener("keyup", keyup);
}
function begingame(){
music.play();
begin.style.display="none";
game(1, 10);
}
function mystopButton(){
document.getElementById("stopButton").innerHTML="🍉";
stop.style.display="block";
c();
}
function continuegame(){
document.getElementById("stopButton").innerHTML="||";
stop.style.display="none";
time=setInterval(run,gamePad[count].speed);
window.addEventListener("keyup", keyup);//addEventListener() 方法用于向指定元素添加事件句柄。获取到键盘的敲击
}
function newgame(){
document.getElementById("stopButton").innerHTML="||";
stop.style.display="none";
showArr = [];
shoted=0;
game(1, 10);
}
function closegame(){
location.reload();
}
var gamePad = {
1 : {
speed : 100
},
2 : {
speed : 90
},
3 : {
speed : 70
},
4 : {
speed : 40
},
5 : {
speed : 20
}
}
var getRandom = function(){
var charCode = 97+Math.floor(Math.random()*26); //随即一个97到122的字符;
var speed = Math.ceil(Math.random()*4);//返回大于或者等于指定表达式的最小整数
return {
code : String.fromCharCode(charCode),//通过数字返回26个字母中的一个
speed : speed,
y : 0,//字母的y坐标
x : Math.floor(Math.random()*390),//字母的x坐标，范围：0-390
}
};
var run = function() {
//随机生成字符对象
//控制添加的数量
if(Math.random()>0.9) {
var obj = getRandom();//对象中包含 字母 速度 y坐标 x坐标
showArr.push(obj);//将对象添加到showArr列表中
}
//让元素运动
var y=0;
for(var i=0 ;i < showArr.length; i++) {
showArr[i].y+=showArr[i].speed;//每个的速度+y坐标 产生新的y的位置
if(showArr[i].y>476) {
var tim=setTimeout(function(){
y=1;
if (window.localStorage) {
localStorage.name = gScore.innerHTML;
window.location.href="http://localhost/打字游戏/submit.html";
}
},1);
if(y==1)
{clearInterval(tim);}
//alert("游戏结束！"+"你的得分是："+gScore.innerHTML);
return;
}
}
econtainer.innerHTML="";
//让元素添加到界面中;
for(var i=0 ;i < showArr.length; i++) {
var gSpan = document.createElement("span");
gSpan.style.position = "absolute";//Object.style.position=static|relative|absolute|fixed。position 属性把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
gSpan.style.width="30px";
gSpan.style.height="30px";
gSpan.style.fontSize="20px";
gSpan.style.backgroundImage = "url('data/c.png')";
gSpan.innerHTML = showArr[i].code;//将字母显示到页面
gSpan.style.left = showArr[i].x;//置元素的左边缘距离父元素左边缘的左边或右边的距离
gSpan.style.top = showArr[i].y;//设置元素的顶边缘距离父元素顶边缘的之上或之下的距离
econtainer.appendChild(gSpan);//appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。
//也就是将新产生的字母追加到页面上
}
}
function game( n , score ) {
count=n;
gScore.innerHTML=0;
gCorrect.innerHTML=0+"%";
run();
/*
键盘敲击
*/
keyup = function(ev) {
sum++;
for(var i=0 ;i < showArr.length; i++) {
bubble.play();
if(showArr[i].code === ev.key || String.fromCharCode(ev.keyCode).toLowerCase() == showArr[i].code) {
//fromCharCode() 可接受一个指定的 Unicode 值，然后返回一个字符串。
//个新的字符串，在其中 stringObject 的所有大写字符全部被转换为了小写字符。toLowerCase() 方法用于把字符串转换为小写。
showArr.splice(i,1);//splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。
shoted++;//消除的子母数
gScore.innerHTML = shoted;//显示到页面上
if(shoted === score && gamePad[n+1] === undefined) {//=== 严格等于 。。分数达到并且闯关到最后关
打字游戏.zip （12个子文件） 
打字游戏 
submit.html 2KB data 
bgmusic.mp3 3.49MB bubble.mp3 6KB
c.png 928B
begin.jpg 93KB begin1.jpg 67KB a.png 611B timg1.jpg 85KB begin2.jpg 82KB rank.jsp 3KB login.jsp 2KB 打字游戏.html 9KB资源评论
路畔阳光
- 粉丝: 1
- 资源: 3
最新资源
- 基于Pygame库实现新年烟花效果的Python代码
- 浪漫节日代码 - 爱心代码、圣诞树代码
- 睡眠健康与生活方式数据集，睡眠和生活习惯关联分析（）
- 国际象棋检测10-YOLO（v5至v9）、COCO、CreateML、Paligemma数据集合集.rar
- 100个情侣头像，唯美手绘情侣头像
- 自动驾驶不同工况避障模型（perscan、simulink、carsim联仿），能够避开预设的（静态）障碍物
- 使用Python和Pygame实现圣诞节动画效果
- 数据分析-49-客户细分-K-Means聚类分析
- 车辆轨迹自适应预瞄跟踪控制和自适应p反馈联合控制，自适应预苗模型和基于模糊p控制均在simulink中搭建 个人觉得跟踪效果相比模糊pid效果好很多，轨迹跟踪过程，转角控制平滑自然，车速在36到72
- 企业可持续发展性数据集，ESG数据集，公司可持续发展性数据（可用于多种企业可持续性研究场景）
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
