JS猜拳游戏

思路:先用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。

  • 1
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值