原生面向对象的简单金山打字游戏

最新推荐文章于 2022-11-05 22:39:33 发布

Spirit书生

最新推荐文章于 2022-11-05 22:39:33 发布

阅读量929

点赞数 2

分类专栏： js基础功能及各类插件基础使用

本文链接：https://blog.csdn.net/BookstoreSpirit/article/details/100740174

版权

这是一个介绍如何使用原生JavaScript创建金山打字小游戏的博客。游戏中，随机字母方块从顶部下落，玩家需按对应键消除，挑战打字速度。内容包括游戏介绍、设计思路以及详细代码解析，涉及方块生成、移动、键盘检测和分数计算等功能。

摘要由CSDN通过智能技术生成

金山打字小游戏

1.介绍及效果图

这是一个练习打字的游戏，当游戏开始后，界面从顶部不断落下内容为随机字母的方块，当按下相对应的按键时，就会清除对应方块

2.思路

1、如何确定难度？
2、方块如何生成？生成位置？如何移动？
3、如何键盘检测？对应后如何移除？
4、移除之后分数的累加？
5、游戏失败？弹窗，结算分数？

3.代码

1、body部分：

<div id="box">
			<div id="changeBox">
				<ul class="change">
					<p>金山打字</p> //标题
					<li>初级</li> //难度选项
					<li>中级</li>
					<li>高级</li>
				</ul>
			</div>
		</div>

2、css部分：

<style type="text/css">
   //清除默认margin、padding值
	*{margin: 0;padding: 0;box-sizing: border-box;}
	//大盒子样式设置
	#box{width: 500px;height: 800px;background: black;position: relative;/* overflow: hidden; */padding-top: 200px;}
	//方块样式设置
	.block{width: 30px;height: 30px;background: blue;position: absolute;top: 0px;text-align: center;
	       line-height: 30px;color:white;font-weight: bold;}
	//标题框样式设置
	#changeBox{width: 300px;height: 200px;ba