HTML5+JS游戏开发模块----canvas打字游戏升级版

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

//字母类
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
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值