教你如何写js小游戏----打字母
从上面掉落字母键盘输入字母，正确通过，错误下一个字母知道错几个
写这个小游戏知道几个关键的东西
1、 onkeydown事件，当鼠标按下时
2、onclick事件，点击
3、var a=(Math.random()*500);
Math.random()随机产生0-1的小数
4、String.fromCharCode(65+(a*100)%26)
将数字转换成char类型的字母
5、event.keyCode
键盘按下的键对应的值
String.fromCharCode(event.keyCode)
6、setTimeout("setHeight()",20);
每个多少毫米调用。。方法
只要知道这几个就差不多了，基本上的js小游戏就差不多了
----------------------下面是我的源码，里面有jquery，不过就用了选择器，方便嘛不用谢document.getElementById（），其他的没用-------------
<html>
<head>
<title>
测试
</title>
<style>
td{
width:70px;
border:10px double
}
.tr1{
background:#eeeeee
}
.td1{
background:#ff0000
}
.gamediv1{
background:#eeeeee;
height:400px;
width:600px;
background-image:url("2Q3415W224.jpg");
}
.box{
background:#aa9900;
height:30px;
width:30px;
text-align:center
}
</style>
</head>
<script src="jquery-1.4.2.js"></script>
<script>
$(document).ready(function(){
$("tr").hover(
function () {
$(this).addClass("tr1");
},
function () {
$(this).removeClass("tr1");
}
);
$("td").hover(
function () {
$(this).addClass("td1");
},
function () {
$(this).removeClass("td1");
}
);
});
function load(){
$("#s").fadeIn("slow");
}
function show(){
$("#s").fadeIn("slow");
}
function out(){
$("#s").fadeOut("slow");
}
var zimu;
var height;
var width;
var rightcount=0;
var errcount=0;
function startGame(){
var c= createob();
zimu=c;
var a=(Math.random()*500);
width=a;
height=20;
setHeight();
//setTimeout(startGame,1000);
//$("#div1").keydown=checkob(c);
}
function restartGame(){
rightcount=0;
errcount=0;
var c= createob();
zimu=c;
var a=(Math.random()*500);
width=a;
height=20;
setHeight();
//setTimeout(startGame,1000);
//$("#div1").keydown=checkob(c);
}
function createob(){
var b='a';
var a=Math.random();
return String.fromCharCode(65+(a*100)%26);
}
function checkob(){
if(zimu==String.fromCharCode(event.keyCode)){
$("#div1").attr("innerHTML","");
rightcount+=1;
startGame();
}else{
errcount+=1
startGame();
}
}
function setHeight(){
var square="<div class='box' STYLE='position:relative;left:"+width+"px;top:"+height+"px;'>"+zimu+"<div>";
$("#div1").attr("innerHTML",square);
height+=1;
if(errcount>2){
var square="<div class='box' STYLE='position:relative;left:"+200+"px;top:"+100+"px;font:italic normal bolder 19pt Arial'>"+"游戏结束答对："+rightcount+"<div>";
$("#div1").attr("innerHTML",square);
}else{
if(height<=300){
setTimeout("setHeight()",20);
}else{
startGame();
}
}
}
</script>
<body onload="load()" onkeydown="checkob()">
<input type="button" onclick="show()" id="show" value="显示"/>
<input type="button" onclick="out()" id="out" value="去除"/>
<table id="s">
<tr>
<td>sdf</td>
<td>asdf</td>
<td>sdfa</td>
<td>asdf</td>
</tr>
<tr>
<td>asdf</td>
<td>asdf</td>
<td>asdgf</td>
<td>1asdf</td>
</tr>
<tr>
<td>asdf</td>
<td>sdf</td>
<td>sdf</td>
<td>sadf</td>
</tr>
<tr>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
</tr>
</table>
<input type="button" onclick="startGame()" id="out2" value="开始"/>
<input type="button" onclick="restartGame()" id="out3" value="重新开始"/>
<div id="div1" class="gamediv1" onkeydown="checkob()">
</div>
<div id="div2"></div>
</body>
</html>
补充：web前端 , JavaScript ,
