HTML5+JAVASCRIPT的石头剪子布游戏

难得的假期~可不能浪费了。于是DreamFairy决定花2个小时做了这么一个 石头剪子布 的游戏。
之前看了Microsoft 为了宣传IE10 和 HTML5 技术的 游戏 Cut the Rope 。觉得效率不错的说。 貌似IE9已经是硬件加速渲染Canvas了。
于是DreamFairy暗下决心,加紧时间把HTML5入门了先。
下面是演示:

[使用你的鼠标在点击底部3种类型来出手,赢了+1分,输了-1分,平局不加分]

之后是源码
主文件 Main.htm

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Rock Paper Scissors</title>
  <link rel="stylesheet" href="style.css">

  <!--loader-->
  <script src="PxLoader/PxLoader.js"></script>

  <!--images-->
  <script src="PxLoader/PxLoaderImage.js"></script>

  <!--sounds-->
  <script src="PxLoader/PxLoaderSound.js"></script>

  <script>
    var cwidth=400;
    var cheight=300;
    var ctx;
    var everything=[];

    var rockbx=50;
    var rockby=200;
    var rockImg;

    var paperbx=150;
    var paperby=200;
    var paperImg;

    var scissorsbx=250;
    var scissorsby=200;
    var scissorsImg;

    var canvas1;
    var newscore=0;
    var size=15;
    var result;
    var choices=["rock.jpg","paper.jpg","scissors.jpg"];
    var compimg=new Image();
    var beats=[["平局:你们都是石头","你赢了:计算机为石头","你输了:计算机为石头"],
               ["你输了:计算机为布","平局:你们都是布","你赢了:计算机为布"],
               ["你赢了:计算机为剪子","你输了:计算机为剪子","平局:你们都是剪子"]];
    var points=[[0,1,-1],[-1,0,1],[1,-1,0]];

    var music=[[3,1,0],[1,3,2],[0,2,3]];
    var musicelements;
    var musicch;

    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);
      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);
    }

    function choose(ev){
      var compch=Math.floor(Math.random()*3);
      var compchn=choices[compch];
      compimg.src=compchn;
      var mx;
      var my;

      if(ev.layerX || ev.layerX==0)
      {
        mx=ev.layerX;
        my=ev.layerY;
      }else if(ev.offsetX || ev.offsetX==0){
        mx=ev.offsetX;
        my=ev.offsetY;
      }

      var i;
      for(i=0;i<everything.length;i++)
      {
        var ch=everything[i];
        if((mx>ch.sx)&&(mx<ch.sx+ch.bwidth)&&(my>ch.sy)&&(my<ch.sy+ch.bheight)){
          console.log("player "+i);
          drawall();
          size=15;
          console.log("com: "+compch);
          tid=setInterval(flyin,100);
          result=beats[compch][i];
          musicch=music[compch][i];
          Newscore=Number(document.f.score.value);
          newscore+=points[compch][i];
          break;
        }
      }
    }

    function flyin(){
      ctx.drawImage(compimg,50,50,size,size);
      size+=5;
      if(size>70){
        clearInterval(tid);
        ctx.fillText(result,150,70,250);
        console.log("result:"+newscore);
        document.f.score.value=String(newscore);
        musicelements[musicch].play();
      }
    }

    var rockb=new Throw(rockbx,rockby,8,50,50,"rgb(250,0,0)",choices[0]);
    var scib=new Throw(scissorsbx,scissorsby,8,50,50,"rgb(0,0,200)",choices[2]);
    var paperb=new Throw(paperbx,paperby,8,50,50,"rgb(0,200,200)",choices[1]);

    everything.push(rockb);
    everything.push(paperb);
    everything.push(scib);

    function init(){
      ctx=document.getElementById('canvas').getContext('2d');
      ctx.font="bold 16pt Georgia";
      ctx.fillStyle="red";

      document.f.score.value="0";
      musicelements = document.getElementsByTagName("audio");
      canvas1=document.getElementById("canvas");
      canvas1.addEventListener('click',choose,false);
      drawall();
    }

    function drawall(){
      ctx.clearRect(0,0,cwidth,cheight);
      var i;
      for(i=0;i<everything.length;i++)
      {
        everything[i].draw();
      }
    }
  </script>
</head>
<body onload="init();">
  <canvas id="canvas" width="400" height="300">
   <p>:( 抱歉~ <br> 貌似您的浏览器不支持Html5的 canvas 标签,请试试更换浏览器FireFox,IE9,Chrome</p>
  </canvas>
  <br>
  <form name="f">
  Score:<input name="score" value="0" size="3" readonly />
  </form>
  <br>
  <audio autobuffer>
    <p>:( 抱歉~ <br> 貌似您的浏览器不支持Html5的 audio 标签,请试试更换浏览器FireFox,IE9,Chrome</p>
    <source src="hithard.ogg" />
    <source src="hithard.mp3" />
  </audio>
  <audio autobuffer>
    <p>:( 抱歉~ <br> 貌似您的浏览器不支持Html5的 audio 标签,请试试更换浏览器FireFox,IE9,Chrome</p>
    <source src="inhale.ogg" />
    <source src="inhale.mp3" />
  </audio>
  <audio autobuffer>
    <p>:( 抱歉~ <br> 貌似您的浏览器不支持Html5的 audio 标签,请试试更换浏览器FireFox,IE9,Chrome</p>
    <source src="sword.ogg" />
    <source src="sword.mp3" />
  </audio>
  <audio autobuffer>
    <p>:( 抱歉~ <br> 貌似您的浏览器不支持Html5的 audio 标签,请试试更换浏览器FireFox,IE9,Chrome</p>
    <source src="crowdohh.ogg" />
    <source src="crowdohh.mp3" />
  </audio>
</body>
</html>

使用到的CSS样式
Style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
form{
    color:red;
    font-family:Georgia, "Times New Roman",Times,serif;
    font-size:16px;
}

input{
    text-align:right;
    font:inherit;
    color:inherit;
}
 
body{
   background-color:#bbb;
}
 
#canvas{
   background-color:#fff;
}

BTW:之前看了cut the rope 团队谈到的PxLoader 貌似不错的样子,但是本地测试一直失败,试着连接网络上的资源看看效果吧~ 🙂

发表评论

电子邮件地址不会被公开。 必填项已用*标注

This site uses Akismet to reduce spam. Learn how your comment data is processed.