距离上一次看这本书已经有半年多了,发现这些处理HTML5函数怎么都这么生疏啊,果然技术这东西是要经常用的,不用的话看过之后就什么都不剩下了。五一放假没去哪里玩,还是把这些东西复习复习吧,很快也要到公司去实习了,先准备准备。
Rock, Paper, Scissors
【游戏说明】
剪刀石头布游戏,你在屏幕上点击选择剪刀、石头、布之中的一种,计算机随机生成一个和你PK,你赢了得一分,输了减一分,平了零分。这个游戏比较简单,就当复习知识
【学习重点】
1、用setInerval函数模拟逐渐变大的效果
2、设置游戏的音效,使用audio标签
【细节备忘】
input{text-align:center;font:inherit;color: inherit;} //如果要设置font和color属性和父元素一样,可以设置为inherit
Javascript中变量的作用域问题,如下两个函数:
1 function Throw(sx,sy, smargin,swidth,sheight,rectcolor,picture){ 2 this.sx = sx; 3 this.sy = sy; 4 this.swidth = swidth; 5 this.bwidth = swidth + 2*smargin; 6 this.bheight = sheight + 2*smargin; 7 this.sheight = sheight; 8 this.fillstyle = rectcolor; 9 this.draw = drawThrow; 10 this.img = new Image(); //实现图片预加载 11 this.img.src = picture; 12 this.smargin = smargin; 13 } 14 function drawThrow() { 15 ctx.strokeStyle = "rgb(0,0,0)"; 16 ctx.strokeRect(this.sx,this.sy,this.bwidth,this.bheight); //this.sx,this.sy分别是Throw函数中的this.sx,this.sy 17 ctx.fillStyle = this.fillstyle; 18 ctx.fillRect(this.sx,this.sy,this.bwidth,this.bheight); 19 ctx.drawImage(this.img,this.sx+this.smargin,this.sy+this.smargin,this.swidth,this.sheight); 20 }
实现图像逐渐变大效果:
1 tid = setInterval(flyin,100); //这里是不停调用 2 function flyin() { 3 ctx.drawImage(compimg,70,100,size,size); 4 size +=5; 5 if (size>50) { //如果达到一定的尺寸就停止调用,size为全局变量,初值是15 6 clearInterval(tid); 7 ctx.fillText(result, 200,100,250); 8 document.f.score.value = String(newscore); 9 } 10 }
音效暂时先不理了= =