《The Essential Guide to HTML5》学习笔记（二）

距离上一次看这本书已经有半年多了，发现这些处理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         } 

 音效暂时先不理了= =

 

 

　　

转载于:https://www.cnblogs.com/mrlaker/archive/2013/04/29/3050833.html