IFE 2015 Summer Game Qihang TASK01

最近博主参加了百度的【百度前端学院】活动,打算趁着暑假主(bei)动(po)提升一下自己的前端水平(只会PHP玩毛啊(╯‵□′)╯︵┴─┴)

前端学院的第一个挑战任务是制作一个简单的锤子剪刀布游戏,玩家可以在网页上通过点击,选择要出的是石头、剪刀或是布,电脑也会随机出一个,然后判断胜负,并记录获胜总次数。

(PS:请忽略石头剪刀布和锤子剪刀布的区别,老罗我不是黑你啊!!)

上周五萌萌哒我又码了一晚上(为什么是又= =),做出了下面这个东西:

页面截图

 


 

下面进入正题,这个页面是如何完成的呢?

 

首先,考虑一下整体的界面设计:

用户进入网站后即可看到3个图标 ——石头,剪刀,布。用户点击后机器生成一个结果进行比对,将结果输出到表网页并判定胜负

那么我们就需要让图片能触发Javascript的函数,这里我使用的函数名为judge。

Html:

<div id="choose" style="text-align: center">
 <img src="s.png" alt="石头" id="st" onclick="judge(1)">
 <img src="j.png" alt="剪刀" id="jd" onclick="judge(2)">
 <img src="b.png" alt="布" id="bu" onclick="judge(3)">
 <!-- 这里使用onclick来实现让图片在被点击时调用JS函数 -->
</div>

JS:


function judge(u) {
//后续代码
}

 

第二步,接收到用户出拳后,机器生成随机数来随机生成机器的出拳结果:

JS:


b = Math.ceil(Math.random() * 3);
//b是指bot(机器人),这样变量名比较好记

这里解释一下,JS虽然有随机函数,但是只能生成一个0-1之间的小数,不能直接满足需求。
我采用的是先生成一个0-1之间的小数,将其乘3再使用Math.ceil向上取整,得到1,2,3中间的一个

现在机器和用户的出拳都有了,接下来就要进行判定。
这里使用了if语句完成
JS:


//1石头 2剪刀 3布 u用户 b机器 res_d平局 res_u人 res_b机器 
if (u == b) { //平局
 result = res_d;
} else if ((u == 1 && b == 2) || (u == 2 && b == 3) || (u == 3 && b == 1)) { //用户胜利
 result = res_u;
} else { //既不是用户胜利也不是平局,那就是机器胜利
 result = res_b;
}

好了,这就是石头剪刀布的核心代码了。接下来只需继续加上输出和一些实(sang)用(xin)好(bing)玩(kuang)的功能就可以了!

由于lwl赶着睡觉(强烈鄙视这种因为睡觉抛弃我们可爱的读者的行为),再加上丧病的功能点太多了

比如说语音提示游戏结果。。保存游戏结果防止丢失。。按需加载多说。。一时半会介绍不完喽

在我完成TASK 2 —— 2048小游戏后,我可能会对此文章进行再次更(qi)新(keng)~欢迎关注!

12 条评论

点击这里取消回复。

昵称
  1. liwanglin12

    最后事实证明2048坑掉了(逃facial

  2. 斌果

    我评论怎么没了。

  3. 斌果

    音乐表不掉~

    1. 斌果

      @斌果 关不掉

  4. Arnaud

    https://status.lwl12.com 这个页面很不错,怎么实现的啊?

  5. 求佛吧

    博主你看做成这样更好玩吧 http://bbs.iyunv.cn/caiquan/

    1. liwanglin12

      @求佛吧 直接打不开=。=

    2. liwanglin12

      @求佛吧 噗。。你这。。仅限前端

  6. Chriser

    你敢不敢换个图片。

    1. liwanglin12

      @Chriser = =不敢,要不你帮忙做个

    2. liwanglin12

      @Chriser 好了我换了√