思路:先用HTML中div标签,这样形成一个大盒子,然后在里面嵌套3个div,生成3个小盒子,将游戏界面分为3个板块。第一个板块中再用3个div标签放入图片和文字,玩家可通过这个板块了解游戏规则。第二个板块有4个div,除了第一个其他div使用了浮动。放入选项图片供玩家选择。此板块是玩家操作进行选择。最后一个板块分为三层,第一个为玩家和电脑的名字(YOU、Computer),第二次对应第一层展示玩家与电脑的选择。最后为玩家与电脑的输赢结果(WIN、lose、peace)。
1.第一个函数getRandomIntInclusive为产生min—max之间的随机整数,用到了Math.random、Math.ceil、Math.floor以便能够生成整数
2.第二个为确定第三板块电脑产生的随机数然后对应指定的图片进行展示,r==1图片为剪刀,r==2图片为石头,r==3图片为石头。通过id.src可以改变图片的路径,这里的id为img2,因此使用img2.src让页面显示相对应的图片。
3.第三个函数用于判断最后的结果,n代表玩家,r代表电脑。1为剪刀,2为石头,3为布。然后通过他们之间的差值判断为peace,lose,win。