原生js实现打字游戏

最新推荐文章于 2022-09-21 17:16:58 发布

it_czh

最新推荐文章于 2022-09-21 17:16:58 发布

阅读量2k

点赞数 8

分类专栏： js 文章标签： js游戏开发 js游戏打字游戏打字游戏源码原生js游戏

本文链接：https://blog.csdn.net/IT_czh/article/details/88673207

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文实例为大家分享了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();
}

了解更多，点击下载源代码

it_czh

关注

8
点赞
踩
15

收藏

觉得还不错? 一键收藏
打赏
3
评论
原生js实现打字游戏

本文实例为大家分享了js实现打字游戏的具体代码，供大家参考，具体内容如下1、HTML代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>打字游戏</title> <link rel="stylesh...
复制链接

扫一扫