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）~欢迎关注！