利用javascript实现一个很简单的打字游戏

最新推荐文章于 2024-08-12 03:46:42 发布

S117

最新推荐文章于 2024-08-12 03:46:42 发布

阅读量919

点赞数

分类专栏： javascript学习笔记文章标签： javascript div function button 游戏 timer

本文链接：https://blog.csdn.net/longtian1213/article/details/7774211

版权

javascript学习笔记专栏收录该内容

19 篇文章 0 订阅

订阅专栏

其实使用javascript做一个基本的打字游戏很简单，大概思路如下：

1、首先使用26个英文字母定义一个字符串数组；

2、每次随机从数组中取出一个值，然后以这个值为ID，使用document.getElementById方法查找当前页面中没有有以这个值为Id的div，如果有，则重新取值，如果没有，则以这个值为div的ID和内容构建一个DIV，然后添加到页面中；

3、使用一个计时器，控制div的生成和下降；

4‘、页面注册一个onkeydown事件，用于检测键盘那个键被按下，然后用String.fromCharCode方法把按键值转化为字母。去页面中匹配

大概思路就这么简单，做的也很原始，不是很完美！下面是代码：

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>打字游戏</title>
	<style type="text/css">
		.wordDiv {
			width: 800px;
			height: 600px;
			border: solid black 1px;
		}
	</style>
</head>
<html>
	<body οnkeydοwn="testWord.destory(event)">
		<div class="wordDiv" id="wordDiv">

		</div>
		<input type="button" value = "star" οnclick="testWord.star()"/>
		<label id="scoreLabel"></label>
		<input type="button" value="加速" οnclick="testWord.speedUp()">
		<input type="button" value="减速" οnclick="testWord.speedDown()">
	</body>
	<script type="text/javascript">
		var index = 1;
		var testWord = {
			score : 0,
			speed : 1000,
			timer : "",
			downSpeed : 1,
			scoreLabel : document.getElementById("scoreLabel"),
			charArray : new Array("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"),
			wordDiv : document.getElementById("wordDiv"),
			createDiv : function() {
				var index = Math.round(Math.random() * testWord.charArray.length - 1);
				if (index == -1) {
					index = 0;
				}
				var charValue = testWord.charArray[index];
				var div = document.getElementById(charValue);
				if (div == null) {
					div = document.createElement("div");
					div.innerHTML = charValue;
					div.id = charValue;
					div.style.position = "absolute";
					div.style.width = "10px";
					div.style.height = "10px";
					var width = Math.round(Math.random() * testWord.wordDiv.offsetWidth) + testWord.wordDiv.offsetLeft;
					div.style.top = testWord.wordDiv.offsetTop;
					div.style.left = width;
					testWord.wordDiv.appendChild(div);
				}
			},
			destory : function(event) {
				event = event || window.event;
				var keychar = "";
				if (window.event) {
					keyChar = event.keyCode;
				} else {
					keyChar = event.which;
				}
				var str = String.fromCharCode(keyChar);
				var div = document.getElementById(str);
				if (div) {
					div.parentNode.removeChild(div);
					div = null;
					testWord.score += 10;
				}
			},
			changeDiv : function() {
				for (var i = 0; i < testWord.charArray.length; i++) {
					var charValue = testWord.charArray[i];
					var div = document.getElementById(charValue);
					if (div) {
						var top = div.style.top;
						top = top.replace("px", "");
						var temp = top - 0 + testWord.downSpeed;
						div.style.top = temp;
						if (temp > testWord.wordDiv.offsetHeight) {
							div.parentNode.removeChild(div);
							div = null;
							testWord.score -= 10;
						}
					}
				}
			},
			init : function() {
				testWord.createDiv();
				testWord.changeDiv();
				testWord.scoreLabel.innerHTML = "当前得分:" + testWord.score;
				if (testWord.score > 0 && testWord.score % 100 == 0) {
					testWord.downSpeed++;
				}
			},
			star : function() {
				testWord.timer = setInterval("testWord.init()", testWord.speed);
			},
			speedUp : function() {
				testWord.downSpeed++;
			},
			speedDown : function() {
				if (testWord.downSpeed-- > 1) {
					testWord.downSpeed--;
				}
			}
		}
	</script>
</html>