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

 音效暂时先不理了= =