《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中变量的作用域问题，如下两个函数：

        function Throw(sx,sy, smargin,swidth,sheight,rectcolor,picture){ 
          this.sx = sx; 
          this.sy = sy; 
          this.swidth = swidth; 
          this.bwidth = swidth + 2*smargin; 
          this.bheight = sheight + 2*smargin; 
          this.sheight = sheight; 
          this.fillstyle = rectcolor; 
          this.draw = drawThrow; 
          this.img = new Image();  //实现图片预加载
          this.img.src = picture; 
          this.smargin = smargin; 
        } 
        function drawThrow() { 
            ctx.strokeStyle = "rgb(0,0,0)"; 
            ctx.strokeRect(this.sx,this.sy,this.bwidth,this.bheight);   //this.sx,this.sy分别是Throw函数中的this.sx,this.sy
            ctx.fillStyle = this.fillstyle; 
            ctx.fillRect(this.sx,this.sy,this.bwidth,this.bheight); 
            ctx.drawImage(this.img,this.sx+this.smargin,this.sy+this.smargin,this.swidth,this.sheight); 
        } 

实现图像逐渐变大效果：

 tid  =  setInterval(flyin,100);    //这里是不停调用
function flyin() {  
            ctx.drawImage(compimg,70,100,size,size); 
            size +=5; 
            if (size>50) {    //如果达到一定的尺寸就停止调用，size为全局变量，初值是15
            clearInterval(tid); 
            ctx.fillText(result, 200,100,250); 
            document.f.score.value = String(newscore); 
            } 
        } 

 音效暂时先不理了= =