js做的打字小游戏
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>FirstGame</title>
<style type="text/css">
*{margin:0;padding:0;}
#box{width:100%;height:100vh;
background:url(img/bg.png) no-repeat;
background-size:100% 100%;
position:relative;
overflow:hidden;}
.score{width:150px;height:190px;
background:url(img/fs.png) no-repeat;
background-size:150px 190px;
position:absolute;
right:10px;bottom:20px;
font-size:40px;text-align:center;
line-height:150px;color:#33ff00;}
.startOrstop{width:100%;height:50px;
position:absolute;bottom:20px;}
.btn{width:130px;height:50px;
background:url(img/stop.png) no-repeat;
background-size:130px 50px;
float:left;text-align:center;
line-height:50px;cursor:pointer;
user-select:none;}
.start{margin:0 20px;}
.reload{width:500px;height:274px;
background:url(img/sp1.png) no-repeat;
background-size:500px 274px;
margin:0 auto;
position:relative;top:-350px;}
#game img{position:relative;}
</style>
</head>
<body>
<div id="box">
<div id="game"></div>
<div class="score">0</div>
<div class="reload"></div>
<div class="startOrstop">
<div class="btn stop">暂停游戏</div>
<div class="btn start">开始游戏</div>
<div class="btn quick">增加难度</div>
</div>
<audio id="ok" src="audio/ok.wav"></audio>
<audio id="error" src="audio/error.wav"></audio>
<audio id="gameOver" src="audio/gameOver.mp3"></audio>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
var chars = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
var score = 0;
var flag = true;
var ok = document.getElementById("ok");
var error = document.getElementById("error");
var gameOver = document.getElementById("gameOver");
var start = $(".start");
var f = true;//开始游戏的标识
var speed = 1;
$(".start").click(function(){
flag = true;
if(f){
play(speed);
f = false;}
});
$(".stop").click(function(){
if(flag){
flag = false;
}else {
flag = true;
}
});
$(".reload").click( function (){
$(this).animate({top:"-350px"});
$("#game").children().remove();
score = 0;
$(".score").html(score);
flag = true;
f = true;
speed = 1;
play(speed);
});
$(".quick").click(function () {
speed ++;
play(speed);
});
createImg();
function createImg(){
if(flag){
var random = randomScope(0,25);
var img = chars[random];
var Dwidth = $(document).width();
var left = randomScope(Dwidth-100,100);
$("#game").append("<img src='img/' "+img+" .png' width='50' height='50' style='left:+"+left+"px; top:10px;'/>");
}
}
function downImg(){
if(flag){
var imgs = $("#game").children();
for(var i = 0 ; i < imgs.length ; i++ ){
var img = imgs[i];
var Top = parseInt(img.style.top);
//alert(typeof Top);
var Height = $("#box").height()-200;
if(Top <= Height){
img.style.top = (Top+2)+"px";
}else{
img.remove();
score-=10;
$(".score").html(score);
error.play();
if(score == -100){
flag = false;
$(".reload").animate( {"top":"-50px"} );
gameOver.play();
window.clearInterval(createImgInterval);
window.clearInterval(downImgInterval);
}
}
}
}
}
//play();
$(window).keyup(function (e){
var eve = window.event || e;
var imgs = $("#game").children();
var code = eve.KeyCode;
if(flag){
for( var i = 0 ; i<imgs.length ; i++ ){
var img = imgs[i];
var imgSrc = img.src.split("/");
var name = imgSrc[imgSrc.length-1].split(".")[0];
if(name == chars[code-65]){
img.remove();
score+=10;
$(".score").html(score);
ok.play();
return ;
}
}
}
});
function play(speed){
var createImgInterval = window.setInterval(createImg,800-speed*50);
var downImgInterval = window.setInterval(downImg,10-speed/2);
}
function randomScope(minScope,maxScope){
return Math.floor(Math.random()*(maxScope-minScope+1)+minScope);
}
</script>
</body>
</html>
5036
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
