原生js实现打字游戏
本文实例为大家分享了js实现打字游戏的具体代码,供大家参考,具体内容如下
1、HTML代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>打字游戏</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!-- 开始界面 -->
<div class="start-box">
<div class="start-message">
<!-- 文字 -->
<img src="img/start-font.png" alt="消消乐">
<!-- 人物 -->
<img src="img/start-gril.png" alt="小女孩">
<!-- 开始按钮 -->
<img src="img/play-btn.png" alt="开始" class="start">
</div>
</div>
<!-- 游戏中 -->
<div class="play-box">
<!-- 游戏信息 -->
<div class="play-message">
<!-- 血条 -->
<div class="life">
<img src="img/life.png" alt="血条">
<span class="blood"></span>
</div>
<!-- 分数 -->
<div class="score">
<img src="img/score.png" alt="分数">
<span class="score-num"></span>
</div>
<!-- 音量 -->
<div class="sound">
<img src="img/sound-on.png" alt="音量">
</div>
</div>
<!-- 游戏主界面 -->
<div class="main">
</div>
<!-- 游戏结束界面 -->
<div class="play-tips">
<img class="level" src="img/level.png">
<span class="play-msg">游戏结束</span>
<img class="reload-btn" src="img/reload-btn.png">
</div>
<embed src="music/music_bg.mp3" hidden="true" autostart="true" loop="true">
</div>
</body>
<script src="js/index.js"></script>
</html>
2、CSS代码如下
html,body{
height: 100%;
}
*{
/* 去除浏览器默认样式 */
margin: 0;
padding: 0;
}
/* 开始界面 */
.start-box{
width: 100%;
height: 100%;
background: url('../img/bg.png') no-repeat center / cover;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
.start-message{
width: 700px;
position: absolute;
top: 50%;
margin-top: -160px;
left: 50%;
margin-left: -350px;
}
.start-message img:nth-child(1){
width: 700px;
position: relative;
z-index: 999;
}
.start-message img:nth-child(2){
width: 300px;
position: absolute;
right: 100px;
top: -150px;
}
.start-message img:nth-child(3){
width: 80px;
position: absolute;
left: 50%;
margin-left: -40px;
cursor: pointer;
animation: run 0.5s infinite alternate;/* 无限次播放,奇数次正向播放,偶数次反向播放 */
}
@keyframes run{
0%{
}
100%{
transform: scale(1.1);/* 转换,放大1.1倍 */
}
}
/* 游戏中 */
.play-box{
width: 100%;
height: 100%;
background: url('../img/bg.png') no-repeat center /cover;
padding-top: 40px;
box-sizing: border-box;
position: absolute;
left: 0;
top: 0;
}
/* 游戏信息 */
.play-box .play-message{
width: 1000px;
height: 50px;
position: absolute;
left: 50%;
margin-left: -500px;
}
.play-box .play-message img{
height: 50px;
}
.play-box .play-message .life{
float: left;
position: relative;
margin-right: 60px;
}
.play-box .play-message .life span{
line-height: 50px;
width: 140px;
height: 50px;
color: #fff;
position: absolute;
top: 0px;
left: 120px;
}
.play-box .play-message .score span{
line-height: 50px;
width: 88px;
height: 50px;
color: #fff;
position: absolute;
top: 4px;
left: 100px;
}
.play-box .play-message .score{
float: left;
position: relative;
}
.play-box .play-message .sound{
float: right;
}
.play-box .main{
width: 1000px;
height: 100%;
position: absolute;
left: 50%;
margin-left: -500px;
top: 0;
overflow: hidden;
}
.play-tips{
position: absolute;
left:50%;
margin-left:-250px;
top:50%;
margin-top:-200px;
width:500px;
display:none;
}
.play-tips .level{
width:100%;
}
.play-tips .play-msg{
position: absolute;
width:100%;
height:48px;
top:280px;
font-size:48px;
text-align:center;
color:#8B5511;
}
.play-tips .reload-btn{
position: absolute;
width:100px;
top:350px;
left:50%;
margin-left:-50px;
}
3、JS代码如下
//1. 生成26个字母图片
//2. 下落,字母消失。血条减1
//3. 按键效果,分数加1
var cl = document.documentElement.clientHeight;
var nums = 5;
var speed = 5;
var main = document.querySelector(".main");
var letter = ["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 blood = 10;
var score = 0;
var bloods = document.querySelector(".blood");
var scoreNum = document.querySelector(".score-num");
bloods.innerText = blood;
scoreNum.innerText = score;
var playTips = document.querySelector(".play-tips");
var reloadBtn = document.querySelector(".reload-btn");
//生成26个字母图片
function getLetter(num)
{
for(let i=0;i<num;i++)
{
var number = Math.floor(Math.random()*26);
var lett = letter[number];
//创建一个img标签,最后放到main里面
var img = document.createElement("img");
img.src = `img/letter/${lett}.png`;
//y轴方向偏移量,top
var t = -80 - Math.random()*100;
//x轴方向偏移量,left
var l = Math.random()*970;
img.style.cssText = `width:70px;position:absolute;left:${l}px;top:${t}px;`
img.className = lett;
main.appendChild(img);
}
}
getLetter(nums);
var t = null;
//下落,字母消失。血条减1
function play()
{
t = setInterval(function()
{
var letters = document.querySelectorAll(".main img");
if(letters.length < nums)
{
console.log("获取");
getLetter(nums - letters.length);
}
for(let i=0;i<letters.length;i++)
{
var ltop = letters[i].offsetTop;
letters[i].style.top = ltop + speed + "px";
if(ltop>cl-80)
{
main.removeChild(letters[i]);
blood--;
bloods.innerText = blood;
if(blood <= 0)
{
clearInterval(t);
main.innerHTML = "";
playTips.style.display = "block";
}
}
}
},50)
document.onkeydown = function(e)
{
var keyCode = e.key;
var all = document.querySelectorAll(".main img");
for(let i=0;i<all.length;i++)
{
if(all[i].className == keyCode)
{
main.removeChild(all[i]);
score ++;
scoreNum.innerText = score;
break;
}
}
}
}
play();
reloadBtn.onclick = function()
{
blood = 10;
score = 0;
bloods.innerText = blood;
scoreNum.innerText = score;
playTips.style.display = "none";
play();
}