之前发了简单版本打字游戏，现在增加图片，设置开始按钮，记录分数，字母显示也改成对象数组，直接操作对象而不是操作对象属性，孰好孰坏，我也不懂，我也是初学者。
直接上代码
字母类
//字母类
function Letters(){
//改变之前属性数组使用，这次使用对象数组，屏幕上显示几个不同字母对象
//通过对象比较对象属性，这样能够更好理解oop，实际上我也是云里雾里
this.x;
this.y;
this.Ax;//苹果座标
this.Ay;
this.aLive;//字母是否消失
this.spd;//速度
this.lett;//字母，每个字母对象有个对应字母
this.lePic;//字母背景(苹果)
this.ctx;//画笔
this.letters;
this.fColor;
}
//苹果背景图，字母显示在苹果上
Letters.prototype.leBackground=function(){
this.Ay+=this.spd*speed*detalTime;
this.y+=this.spd*speed*detalTime;
// console.log(this.aLive);
if(this.aLive){
this.ctx.save();
this.ctx.drawImage(this.lePic,this.Ax,this.Ay,55,55);//苹果大小为55*55
//设置字体样式
this.ctx.font = "40px Courier New";
//设置字体填充颜色
this.ctx.fillStyle =''+this.fColor+'';
//从座标点(50,50)开始绘制文字
this.ctx.fillText(this.lett, this.x, this.y);
this.ctx.restore();
}
}
图片绘制类，包括背景图片，字母图片
//绘制类，用于绘画背景，字母图片
var letter;//字母类实例
function draw(){
this.x;//画布背景座标
this.y;
this.ctx;//画笔
this.bgPic;//背景
this.le;//显示数组，保存字母对象实例
}
//初始化
draw.prototype.init=function(){
this.le=[];
for(var i=0;i<5;i++){//屏幕上有8个字母
newLe();
this.le.push(letter);//将字母对象加入数组
}
this.x=0;
this.y=0;
this.bgPic=new Image();//图片类型
this.bgPic.src='images/bg2.png';
}
draw.prototype.ImgDraw=function(){
//绘制图片
this.ctx.drawImage(this.bgPic,this.x,this.y,632,472);//背景
for(var i=0;i<this.le.length;i++){
this.le[i].leBackground();//画出字母
if(this.le[i].Ay>=432){
this.born(i);
}
}
}
//生成字母
draw.prototype.born=function(i){
this.le[i].aLive=false;//消失
this.le[i].letters=['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',
'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'];
this.le[i].ctx=this.ctx;
this.le[i].x=Math.floor(Math.random()*400)+80;;
this.le[i].y=0;
this.le[i].Ax=this.le[i].x-15;//注意这里苹果座标
this.le[i].Ay=this.le[i].y-40;
this.le[i].aLive=true;//默认激活
this.le[i].spd=Math.random()*0.017+0.003;//速度区间在[0.01-0.015)
this.le[i].lett=letter.letters[Math.floor(Math.random()*48)];//随机挑选字母
this.le[i].lePic=new Image();//图片类型
this.le[i].lePic.src='images/苹果[图形].png';
this.le[i].fColor=this.le[i].fColor;
var le_i=this.le[i];//保存第i个对象初始属性
this.le.splice(i,1,le_i);//删除并添加字母对象
}
//Letters对象实例函数
function newLe(){
letter=new Letters();//new一个对象
letter.letters=['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',
'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'];
letter.ctx=this.ctx;
letter.x=Math.floor(Math.random()*400)+80;
letter.y=0;
letter.Ax=letter.x-15;//苹果座标是相对座标
letter.Ay=letter.y-40;
letter.aLive=true;//默认激活
letter.spd=Math.random()*0.017+0.003;//速度区间在[0.01-0.015)
letter.lett=letter.letters[Math.floor(Math.random()*48)];//随机挑选字母
letter.lePic=new Image();//图片类型
letter.lePic.src='images/苹果[图形].png';
letter.fColor='yellow';
letter.leBackground();
}里面用到关键就是，将字母类实例分别放入数组，
this.le=[];
for(var i=0;i<5;i++){//屏幕上有8个字母
newLe();
this.le.push(letter);//将字母对象加入数组
}
后面所有操作，包括座标都是通过操作这个数组得到。
鼠标事件，按键事件就不多说了，看下面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript+html5完整版打字游戏</title>
<script type="text/javascript" src="js/Letters.js"></script>
<script type="text/javascript" src="js/draw.js"></script>
<script type="text/javascript">
var canvas;
var ctx;
var dr;//绘画类实例
var keyDown;//按键对象
var capsLock;//大写按键判断
var st;//游戏开始
var stBtn_s;//开始按钮
var rdBtn_r;//鼠标经过说明按钮
var lastTime;//最后时间
var detalTime;//时间间隔
var now;//当前时间
var speed;//速度
var score;//分数
window.requestAnimFrame=(function(){
return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
return window.setTimeout(callback, 1000 / 60);
};
})();//自动执行函数
window.οnlοad=function(){
document.body.οnlοad=game();//程序入口
//入口函数
function game(){
init();
gameLoop();//刷新函数
}
//初始化函数
function init(){
canvas=document.getElementById('canvas');
ctx=canvas.getContext('2d');//画笔
canvas.width=632;
canvas.height=472;
startDraw();//加载开始界面
lastTime=Date.now();//控制requesAnimFrame播放速度
detalTime=0;//时间间隔，保证运动过渡圆滑
speed=2;
score=0;//0分
//鼠标事件
window.addEventListener('mousemove',function(e){
if(e.offSetX||e.layerX){//兼容性写法
//三元运算符
mx=e.offSetX==undefined?e.layerX:e.offSetX;
my=e.offSetY==undefined?e.layerY:e.layerY;
}
//开始按钮
if(mx>20&&mx<156&&my>350&&my<397){
stBtn_s=true;
}
else if(mx>20&&mx<156&&my>410&&my<457){
rdBtn_r=true;
}
else
{
stBtn_s=false;
rdBtn_r=false;
}
if(st){
ctx.save();
ctx.font = "12px Courier New";
ctx.fillStyle ='red';
if(mx>642&&mx<668&&my>120&&my<130){
canvas.style.cursor='pointer';
ctx.fillText('黄色',642,130);
}
else if(mx>692&&mx<712&&my>120&&my<130){
canvas.style.cursor='pointer';
ctx.fillText('红色',692,130);
}
else if(mx>642&&mx<668&&my>160&&my<170){
canvas.style.cursor='pointer';
ctx.fillText('蓝色',642,170);
}
else if(mx>692&&mx<712&&my>160&&my<170){
canvas.style.cursor='pointer';
ctx.fillText('绿色',692,170);
}
else{
canvas.style.cursor='default';
ctx.beginPath();
//设置字体样式
ctx.font = "12px Courier New";
//设置字体填充颜色
ctx.fillStyle ='blue';
//从座标点(50,50)开始绘制文字
ctx.fillText('请选择字母颜色',642,100);
ctx.fillText('黄色',642,130);
ctx.fillText('红色',692,130);
ctx.fillText('蓝色',642,170);
ctx.fillText('绿色',692,170);
ctx.closePath();
}
ctx.restore();
}
},false);
//鼠标点击
window.addEventListener('click',function(e){
if(e.offSetX||e.layerX){//兼容性写法
//三元运算符
mx=e.offSetX==undefined?e.layerX:e.offSetX;
my=e.offSetY==undefined?e.layerY:e.layerY;
}
if(mx>20&&mx<156&&my>350&&my<397){
canvas.width=732;
canvas.height=472;
st=true;
}
else if(mx>20&&mx<156&&my>410&&my<457){
rdBtn_r=true;
}
if(st){
for(var i=0;i<dr.le.length;i++){
if(mx>642&&mx<668&&my>120&&my<130){
dr.le[i].fColor='yellow';
}
else if(mx>692&&mx<712&&my>120&&my<130){
dr.le[i].fColor='red';
}
else if(mx>642&&mx<668&&my>160&&my<170){
dr.le[i].fColor='blue';
}
else if(mx>692&&mx<712&&my>160&&my<170){
dr.le[i].fColor='green';
}
}
}
},false);
dr=new draw();//draw实例
dr.ctx=ctx;//画笔
dr.init();
dr.ImgDraw();
//按键事件
keyDown={};
capsLock=false;//没打开大写键
window.addEventListener('keydown',function(e){
e=event||window.event;
//shift组合大写按键
var capsLockKey = e.keyCode ? e.keyCode : e.which;
var shifKey = e.shiftKey ? e.shiftKey:((capsLockKey == 16) ? true : false);
if(((capsLockKey >= 65 && capsLockKey <= 90) && !shifKey)||((capsLockKey >= 97 && capsLockKey <= 122) && shifKey)){
var zh=true;
}else{
zh=false;
}
keyDown[e.keyCode]=true;
for(var i=0;i<dr.le.length;i++){
if(capsLock==false&&zh==true){//大写锁未打开且没有按下shift键(组合键)
if(String.fromCharCode(e.keyCode).toLocaleLowerCase()==dr.le[i].lett){//字母区分大小写
dr.born(i);//重新生成
level();
}
}
else{//按下shift键或者大写锁已经打开
if(String.fromCharCode(e.keyCode)==dr.le[i].lett){
dr.born(i);//重新生成
level();
}
}
if(e.keyCode==20){//由于javascript是事件监听，所以无法知道按下大写锁前键盘大写锁是否已经打开
//(当做未打开），搞着玩的,可以忽略。
if(capsLock==false){
ctx.clearRect(632,30,232,55);
this.ctx.save();
this.ctx.font = "14px Courier New";
this.ctx.fillStyle ='yellow';
this.ctx.fillText('大写锁开启',642,50);
this.ctx.restore();
capsLock=true;
return;
}
else{
ctx.clearRect(632,30,232,55);
this.ctx.save();
this.ctx.font = "14px Courier New";
this.ctx.fillStyle ='yellow';
this.ctx.fillText('大写锁关闭',642,50);
this.ctx.restore();
capsLock=false;
return;
}
}
}
});
window.addEventListener('keyup',function(e){
delete keyDown[e.keyCode];//释放按键对象
});
}
//自动刷新函数
function gameLoop(){
requestAnimFrame(gameLoop);
if(st){
now=Date.now();//当前循环时间
detalTime=now-lastTime;
lastTime=now; //将最后时间变为上一次初始时间
//谷歌浏览器离开标签后，动画帧会停止，导致时间差加大
if(detalTime>40){
detalTime=40;
}
dr.ImgDraw();
}else{
startDraw();//加载开始界面
}
}
//开始游戏界面函数
var yb=220;
function startDraw(){
var p=new Image();//开始背景
var bee=new Image();//蜜蜂
var stBtn=new Image();//开始按钮
var rdBtn=new Image();//说明按钮
var f=new Image();//说明按钮
var stBtn2=new Image();
var rdBtn2=new Image();
stBtn2.src='images/开始按钮[经过].png';
rdBtn2.src='images/说明按钮[经过].png';
p.src='images/bg2.png';
bee.src='images/卡通飞虫[图形].png';
stBtn.src='images/开始按钮[初始].png';
rdBtn.src='images/说明按钮[初始].png';
f.src='images/游戏名称.png';
ctx.drawImage(p,0,0,632,472);
ctx.drawImage(bee,136,yb-=0.5,131,97);
if(yb<=170){yb=220;}
ctx.drawImage(stBtn,20,350,136,47);
ctx.drawImage(rdBtn,20,410,136,47);
if(stBtn_s){
ctx.drawImage(stBtn2,20,350,136,47);
}
if(rdBtn_r){
ctx.drawImage(rdBtn2,20,410,136,47);
}
ctx.drawImage(f,140,50,426,106);
}
//分数，关卡
function level(){
score++;
ctx.save();
ctx.clearRect(632,200,232,200);
ctx.font = "12px Courier New";
ctx.fillStyle ='#fff';
ctx.fillText('分数：'+score+'',642,220);
ctx.clearRect(632,239,232,200);
if(score>=20&&score<50){
speed=4;
ctx.fillText('第二关',642,240);
}
if(score>=50&&score<100){
speed=6;
ctx.fillText('第三关',642,240);
}
if(score>=100&&score<200){
speed=8;
ctx.fillText('第四关',642,240);
}
else if(score>=200){
st=false;
location.reload();//不会处理结束，所以只好强制刷新浏览器
}
ctx.restore();
}
}
</script>
</head>
<body>
<div style="width: 732px;height: 472px;margin:50px auto;">
<canvas id="canvas" style="background: #000;"></canvas>
</div>
</body>
</html>
以上便是完整代码，大家也可以下载。今天状态不好，有点滥竽充数感觉，凑合着看吧。
