jQuery实现打字小游戏
<HTML>
<HEAD>
<TITLE>jQuery实现打字小游戏t TITLE>
<meta charset="utf-8"/>
<style type="text/css">
*{margin: 0;padding: 0;}
#box{width: 100%;height: 100vh;background:url(img/bg11.jpg)no-repeat;background-size:100% 100%;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: green;cursor: pointer;user-select: none;}
.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;font-weight: bold;color: green;}
.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;cursor: pointer;user-select: none;}
#game img{position: absolute;}
#music_btn{width: 70px;height: 70px;position: absolute;left: 10px;top: 20px;cursor: pointer;user-select: none;}
.tupian{width: 600px;height: 350px;background:url(img/lay.png)no-repeat;backgroung-size:600px 350px;position: relative;bottom: -400px;cursor: pointer;user-select: none;}
style>
HEAD>
<BODY>
<div id="box">
<div id="game">div>
<div class="score">0div>
<div class="reload">div>
<div class="startorstop">
<div class="btn stop">暂停游戏div>
<div class="btn start">开始游戏div>
<div class="btn quick">增加难度div>
div>
<div class="tupian">div>
<div id="btn"><img src="img/no.png" id="music_btn" />div>
<audio id="boss" src="music/Boss.mp3" loop="loop">audio>
<audio id="ok" src="music/ok.wav">audio>
<audio id="error" src="music/error.wav">audio>
<audio id="gameOver" src="music/gameOver.mp3">audio>
<audio id="yixing" src="http://sxyd.sc.chinaz.com/Files/DownLoad/sound1/201705/8738.wav">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','T','J','K','L','M','N','O','P','Q','R','S','G','U','V','W','X','Y','Z'];
//积分
var score = 0;
//默认游戏的状态
var flag = true;
//音乐
var yixing = document.getElementById("yixing");
var boss = document.getElementById("boss");
var ok = document.getElementById("ok");
var error = document.getElementById("error");
var gameOver = document.getElementById("gameOver");
var start = $(".start");
var f = true;//开始游戏的标识
var speed = 1;
var createImgInterval;
var downImgInterval;
//点击开始游戏按钮所执行的函数
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);
});
//开始
$(".tupian").click(function(){
$(this).animate({bottom:"-400px"});
play(speed);
});
//增加难度
$(".quick").click(function(){
if(!f){
speed++;
play(speed);
}
});
//音乐
$("#btn").click(function(){
if(boss.paused){
boss.play();
$("#music_btn").attr("src","img/no.png");
}else{
boss.pause();
$("#music_btn").attr("src","img/off.png");
}
});
//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/"</span>+img+<span class="hljs-string">".png)
");
}
}
function downImg(){
if(flag){
var imgs = $("#game").children();//获取生成的所有字母
for(var i=0;ivar img = imgs[i];//当前字母
var Top = parseInt(img.style.top);//当前字母距离顶部的值
var Height = $("#box").height()-200;
if(Top<=Height){
img.style.top=(Top+2)+"px";
}else{
img.remove();
error.play();
score -= 10;
$(".score").html(score);
if(score == -100){
flag = false;
$(".reload").animate({"top":"-50px"});
gameOver.play();
window.clearInterval(createImgInterval);
window.clearInterval(downImgInterval);
return;
}
}
}
}
}
$(window).keyup(function(e){
var eve = window.event || e;//获取事件对象
var imgs = $("#game").children();//获取所生成的字母
var code = eve.keyCode;//获取用户按下的键值
if(flag){
for(var i =0;ivar 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();
if(score == 200){
$(".tupian").animate({"bottom":"0px"});
yixing.play();
window.clearInterval(createImgInterval);
window.clearInterval(downImgInterval);
}
return;
}
}
}
});
//play();
//定时器
function play(speed){
createImgInterval = window.setInterval(createImg,1500-speed*50);
downImgInterval = window.setInterval(downImg,50-speed/2);
}
//随机范围方法
function randomScope(minScope,maxScope){
return Math.floor(Math.random()*(maxScope-minScope+1)+minScope);
}
script>
BODY>
HTML>
“`
实现的效果图:
“