之前发了简单版本打字游戏,现在增加图片,设置开始按钮,记录分数,字母显示也改成对象数组,直接操作对象而不是操作对象属性,孰好孰坏,我也不懂,我也是初学者。
直接上代码
字母类
//字母类
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