首先html部分
<input type="button" id="btn1" value="开始游戏"/>
<span class="score">0</span>
其次简单css样式
.score{
display: none;
position: absolute;
top:0;
right: 0;
}
.letter{
position: absolute;
top:0;
left: 0;
width: 20px;
height: 20px;
background-color: red;
}
最后jquery实现打字游戏
$(function(){
var score1=0;
$("#btn1").click(function(){
$(this).hide();
$(".score").show();
createSpan();
});
function createSpan(){
var k=Math.floor(Math.random()*26)+65;
var ch=String.fromCharCode(k);
var i=parseInt(Math.random()*255);
var j=parseInt(Math.random()*255);
var m=parseInt(Math.random()*255);
var co=i+","+j+","+m;
var span=$("<span class='letter letter"+k+"'>"+ch+"</span>");
span.css("left",parseInt(Math.random()*document.documentElement.clientWidth));
span.css("top",parseInt(Math.random()*document.documentElement.clientHeight));
span.css("background-color","rgb("+co+")");
$("body").append(span);
setTimeout(createSpan,500);
}
$(document).keydown(function(e){
var clientheight=(document.documentElement.clientHeight+200);
$(".letter"+ e.keyCode).animate({top:clientheight+"px"},1000,function(){
$(this).remove();
score1+=10;
$(".score").html(score1);
});
})
})