完整專案下載：https://download.csdn.net/download/weixin_44893902/13131694
演示地址：https://url_777.gitee.io/typing-games/
效果圖：
實作代碼：
目錄結構：
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>打字游戲</title>
<link rel="stylesheet" href="css/new_file.css" />
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- 背景音樂 -->
<audio id="mus">
<source src="music/music_bg.mp3"></source>
</audio>
<!-- 主體部分 -->
<div id="box">
<div id="">
</div>
<!-- 左右的生命和音量圖示 -->
<img src="./img/生命.png" style="float: left; margin: 45px;" width="45" height="38" id="life" />
<img src="./img/volume.png" style="float: right; margin: 45px;" width="45" height="38" id="volume" />
<!-- 計分模塊 -->
<div class="score"><font>0</font></div>
<div id="game"></div>
<!-- 重新開始界面 -->
<div class="reload">
<input type="button" class="btn squick" value="重新開始" />
<a href="http://www.baidu.com"> <input type="button" class=" btn tu" value="退出游戲" /></a>
</div>
<!-- 按鈕 -->
<input type="button" class=" btn start" value="開 始 游 戲" />
<input type="button" class=" btn stop" value="暫 停 游 戲" />
<input type="button" class=" btn quick" value="增 加 難 度" />
</div>
</html>
CSS
*{
margin: 0;
padding: 0;
}
.btn{
width: 170px;
height: 70px;
border-radius: 20px;
border: 1px solid greenyellow;
outline: medium;
background: url(../img/background.jpg) no-repeat;
background-size:170px 70px;
float: left;
margin-left: 20px;
margin-top: 300px;
text-align: center;
/* cursor: pointer; */
/* user-select: none; */
font-weight: bold;
font-size: 30px;
color:white;
}
.btn:hover{
border: 3px solid greenyellow;
}
#box{
width: 100%;
height: 100vh;
background:url(../img/background.jpg) no-repeat;
background-size:100% 100%;
overflow: hidden;
}
.score{
width: 250px;
height: 355px;
background: url(../img/score.png) no-repeat;
background-size:100% 100%;
position: absolute;
right:10px;
/* bottom: -80px; */
font-size: 60px;
text-align: center;
line-height: 280px;
color: white;
cursor: pointer;
user-select: none;
margin-top: 395px;
}
.startorstop{
width: 100%;
height: 50px;
position: absolute;
bottom: 20px;
}
.reload{
width: 500px;
height: 350px;
background: url(../img/reload.gif) no-repeat;
background-size:350px 270px;
margin: 0 auto;
position: relative;
top: -650px;
}
.squick{
width: 130px;
height: 50px;
margin-top: 280px;
margin-left: 40px;
}
.tu{
width: 130px;
height: 50px;
margin-top: -49px;
margin-left: 210px;
}
#game img{
position: absolute;
}
#music_btn{
width: 70px;
height: 70px;
position: absolute;
left: 10px;
top: 20px;
cursor: pointer;
user-select: none;
}
.play-tips{
width: 500px;
height: 400px;
margin: 0 auto;
margin-top: 150px;
border: 1px solid red;
}
#buttons1{
width: 700px;
height: 200px;
margin-bottom: 100px;
}
JavaScript
$(function(){
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 f = true;
//開始游戲的標識
var speed = 1;
var start = $(".start");
var createImgInterval;
var downImgInterval;
//默認游戲的狀態
//點擊開始游戲按鈕所執行的函式
start.click(function(){
play(speed);
var music=document.getElementById("mus");
music.play();
flag = true;
if(f){
f = false;
}
});
//點擊暫停按鈕所執行的函式
$(".stop").click(function(){
if(flag){
flag = false;
$(this).val("繼 續 游 戲")
var music=document.getElementById("mus");
music.pause();
}else{
flag = true;
$(this).val("暫 停 游 戲")
var music=document.getElementById("mus");
music.play();
}
});
//增加難度
$(".quick").click(function(){
if(!f){
speed += 0.5;
play(speed);
}
});
//重新開始游戲
$(".reload").click(function(){
$(this).animate({top:"-350px"});
$("#game").children().remove();
score = 0;
$(".score").html(score);
flag = true;
f = true;
speed = 1;
play(speed);
console.log(speed)
});
//創建圖片
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='80' height='100' style='left:"+left+"px; top:-100px;' />");
}
}
//加載圖片
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);
//當前字母距離頂部的值
var Height = $("#box").height()-200;
if(Top<=Height){
img.style.top=(Top+2)+"px";
}else{
img.remove();
// error.play();
if(score==0){
score=0
}else{
score -= 10;
}
$(".score").html(score);
if(score <= 0){
flag = false;
$(".reload").animate({"top":"30px"});
// 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;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);
if(score <= 0){
// $(".tupian").animate({"bottom":"0px"});
window.clearInterval(createImgInterval);
window.clearInterval(downImgInterval);
}
return;
}
}
}
});
//定時器
function play(speed){
console.log(speed)
createImgInterval = window.setInterval(createImg,1000-speed*50);
downImgInterval = window.setInterval(downImg,20-speed/2);
}
//隨機范圍方法
function randomScope(minScope,maxScope){
return Math.floor(Math.random()*(maxScope-minScope+1)+minScope);
}
var music=document.getElementById("volume");
music.onclick = function(){
var i = true;
var mus=document.getElementById("mus");
if (mus.paused) {
mus.play();
// 暫停中
} else {
// 播放中
mus.pause();
}
}
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/226307.html
標籤：其他