<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) {//=== 严格等于 。。分数达到并且闯关到最后关
