纯JS的打字游戏算是JavaScript入门的一个检验吧,我开始做的时候也是各种蒙圈,确实作为前端小白有点不知道该怎么入手,但是学习了那么久的知识,总得磨刀霍霍向猪羊…啊呸,总得实践出真知啊。所以在网上研究了和分析了别人的程序(我想知道实现的思路却全都是代码,大概别人都觉得这个太简单了吧-,-),花了一段时间把代码写出来了,现在来分享一下我的成果~
一、太长不看我只要代码
Edition 1:(点这里下载版本1代码)
这部分代码是属于完全的功能的堆砌,没有对JavaScript代码进行对象化处理,属于人家一看就觉得low但是作为初学者的我好理解的类型(ps: 为了美观起见,我还是不是纯JS的代码,有部分样式设计)。关门,放代码:
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Typing Game</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<!-- 显示游戏提示 -->
<div id="tools">
<div class="list">
<h2>单词大战</h2>
<p>
到达底线消灭游戏框中出现的字母
</p>
</div>
<div class="list">
<h2>游戏得分</h2>
<p>首局游戏需得分<span id="need">10</span>分
</p>
</div>
</div>
<!-- 背景盒 -->
<div id="box" style="height: 640px; width: 760px;">
<div id="panel">得分:<span id="score">0</span></div>
<button id="start" class="btn">开始游戏</button>
<button id="stop" class="btn">停止游戏</button>
<!-- 游戏的部分 -->
<div id="gameBox" style="height: 610px; width: 585px;">
</div>
<div id="danger">
<hr/>
</div>
</div>
</div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
/* style.css */
* {
margin: 0;
padding: 0;
}
html, body {
/* Box-model */
height: 100%;
/* Typography */
color: #fff;
font-family: helvetica, arial, sans-serif;
/* Visual */
background: -webkit-linear-gradient(#3a3a3a, #c3c3c3);
background: -o-linear-gradient(#3a3a3a, #c3c3c3);
background: -moz-linear-gradient(#3a3a3a, #c3c3c3);
background: linear-gradient(#3a3a3a, #c3c3c3);
}
#container {
/* Positioning */
position: relative;
margin-left: auto;
margin-right: auto;
/* Box-model */
display: block;
width: 80%;
max-width: 1140px;
}
#tools {
/* Positioning */
position: absolute;
top: 32%;
left: 25%;
margin-top: 50px;
z-index: 100;
/* Box-model */
display: block;
padding: 5px;
}
#tools .list {
/* Positioning */
margin-bottom: 35px;
/* Typography */
font-family: "Microsoft YaHei UI", "微软雅黑";
}
#panel {
/* Positioning */
position: absolute;
right: 5%;
top: 5%;
z-index: 100;
/* Box-model */
display: none;
/* Typography */
font-family: "Microsoft YaHei UI", "微软雅黑";
font-weight: 700;
/* Visual */
text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.5);
/* Misc */
}
.btn {
/* Positioning */
z-index: 100;
/* Box-model */
display: inline-block;
width: 80px;
height: 40px;
/* Typography */
font-family: helvetica, Arial, sans-serif;
line-height: 40px;
text-align: center;
/* Visual */
color: #fff;
background-color: #999;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: 0 0 2px 5px rgba(255, 255, 255, 0.5);
-moz-box-shadow: 0 0 2px 5px rgba(255, 255, 255, 0.5);
box-shadow: 0 0 2px 5px rgba(255, 255, 255,