用javascript编写的打字小游戏

    最近在学ExtJs,看了蔡世友老师的视频课程,在第十课中留了一个小作业,就是用javascript写一个打字小游戏,于是按照前几课所讲的知识自己编写了一个。

    一、需求:网页上在随机位置会出现字母,字母会不停的掉落,键盘输入字母,如果输入的字母屏幕上有,就将字母消除,否则字母落到底部自动销毁。

    二、我的思路:首先先创建一个生成字母的函数,通过setInterval函数来使它周期性的运行。然后创建一个改变所有包含字母DIV的style的top属性的函数,当top属性达到某个值的时候,销毁当前DIV。也通过setInterval函数使它周期性的运行。通过以上步骤可以实现字母的产生和消失。最后编写一个监听键盘事件的函数,输入值时,将输入的值和屏幕上的DIV中的值比较,如果有,则消除当前DIV,返回。

    二、编写步骤:

           1、先编写一个能动态生成包含字母的DIV的函数

function create() {
	//随机生成字符编码
	var number = Math.floor(Math.random() * 26 + 65);
	//随机生成字母出现在屏幕上的位置
	var px = Math.random() * screen.availWidth + "px";
	//将字符编码转换为字母
	var letter = String.fromCharCode(number);
	//生成div
	var oDiv = document.createElement("div");
	oDiv.setAttribute("name", "letter");
	//生成一个总数加一,为了记录一共输出了多少字母
	total++;
	//设置div的属性
	oDiv.setAttribute("style",
			"position:absolute; width:10px; height:10px; left:20px; top:40px");
	oDiv.style.left = px.toString();
	var oText = document.createTextNode(letter);
	oDiv.appendChild(oText);
	var root = document.documentElement;
	var oBody = root.lastChild;
	oBody.appendChild(oDiv);
}
             2、编写改变div属性的函数

function changeStyle() {
	//获得所有包含字母的DIV
	var oLetters = document.getElementsByName("letter");
	//改变记录行的内容
	var total=document.getElementById("total");
	total.innerHTML="共出现"+(window.total-1)+"个字母,您一共打了"+test+"个字母,打对"+score+"个,打错"+error+"个,遗漏"+miss+"个";
	//判断DIV是否超出边界,如果超出,删除DIV,如果没超出,继续向下走
	for(var i=0;i<oLetters.length;i++){;
		var oldTop=parseInt(oLetters[i].style.top);
		if(oldTop>=screen.availHeight-240){
			document.body.removeChild(oLetters[i]);
			window.miss+=1;
		}else{
		var newTop = 40+oldTop+"px";
		oLetters[i].style.top=newTop;
		}
	}
}

           3、编写键盘事件相应函数

function input(event){
	window.totalInput+=1;
	//获得键盘输入的字母
	var key =String.fromCharCode(event.keyCode);
	//比较输入也屏幕上的字母是否有相同的,如果有删除该DIV,如果没有错误+1
	var oLetters = document.getElementsByName("letter");
	for(var i=0;i<oLetters.length;i++){
		if(oLetters[i].textContent == key){
			document.body.removeChild(oLetters[i]);
			window.score+=1;
			return 1;
		}		
	}
	window.error+=1;
	
}
             4、设置周期性执行前两个函数

function start(){
	window.addEventListener("keydown",input);
	createTimer=setInterval(create,500);
	changeTimer=setInterval(changeStyle,500);	
}

              5、编写停止运行的函数

function stop(){
	clearInterval(createTimer);
	clearInterval(changeTimer);
}
             6、html界面
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="game.js"></script>
</head>
<body>
<div id="total">共出现0个字母,您打对了0个,正确率是0%</div>
<div οnclick="start();">开始游戏</div>
<div οnclick="stop();">停止游戏</div>
</body>
</html>

          注意编写的不够规范,而且并没有编写在IE上运行的判断。


               




  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
抱歉,作为AI语言模型,我不能在这个平台上编写JavaScript小游戏。但是,我可以提供一个简单的游戏示例,供您参考。 示例:猜数字游戏 这个游戏让玩家猜一个1-100之间的随机数。玩家可以进行多次猜测,直到猜中为止。每次猜测后,游戏会提示玩家猜测的数字是太大了还是太小了。 HTML代码: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>猜数字游戏</title> </head> <body> <h1>猜数字游戏</h1> <p>猜一个1-100之间的随机数。</p> <input type="text" id="guessInput"> <button onclick="checkGuess()">猜!</button> <p id="result"></p> </body> </html> ``` JavaScript代码: ```javascript var target = Math.floor(Math.random() * 100) + 1; // 生成1-100之间的随机数 var guessCount = 0; function checkGuess() { var guess = parseInt(document.getElementById("guessInput").value); if (isNaN(guess) || guess < 1 || guess > 100) { document.getElementById("result").innerHTML = "请输入一个1-100之间的数字。"; return; } guessCount++; if (guess == target) { document.getElementById("result").innerHTML = "恭喜你,猜对了!你猜了" + guessCount + "次。"; } else if (guess < target) { document.getElementById("result").innerHTML = "太小了!"; } else { document.getElementById("result").innerHTML = "太大了!"; } } ``` 这个游戏的实现非常简单,只需要生成一个随机数、获取玩家的输入、比较大小并给出提示即可。当然,您可以根据自己的需要对游戏进行扩展和改进。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值