使用ajax简单写一个猜拳游戏
HTML代码
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
<select id="check_type">
<option value="">请选择</option>
<option value="1">石头</option>
<option value="2">剪刀</option>
<option value="3">布</option>
</select>
<input type="button" value="猜拳" id="btn" />
<div id="result"></div>
</head>
<body>
<script type="text/javascript">
$(function(){
//页面加载完毕后开始执行的事件
$("#btn").click(function(){
var your_type=$("#check_type").val();
if(your_type=="")
{
$("#result").text("请选择你出什么");return false;
}
$.post("http://localhost/test.php",{"your_type":your_type},function(res){
if(res.error_code==0)
{
//说明成功了
$("#result").text("电脑出了"+res.computer_type+" ,结果是您"+res.result);
}else
{
$("#result").text(res.error_message);
}
},"json");
});
});
</script>
</body>
</html>
然后发起后端的请求。接口在test.php中实现
<?php
$your_type=isset($_POST['your_type'])?$_POST['your_type']:"1";//接受用户的选择
if(in_array($your_type,array(1,2,3),true))
{
//用户选择的不是石头剪子布其中的一个 告知选择不正确
die(json_encode(array("error_code"=>1,"error_message"=>"猜拳选择不正确")));
} $type_list=array("1"=>"石头","2"=>"剪刀","3"=>"布");//定义选择对应猜拳
$computer_type=rand(1,3);//电脑随机选择
$diff=$your_type-$computer_type;//计算用户选择与电脑选择的差值
$auto_result=array(
-2=>"输了",
-1=>"获胜",
0 =>"平局",
1 =>"输了",
2 =>"获胜",
);//定义好比较结果 $return=array(
"computer_type"=>$type_list[$computer_type],//电脑选择
"result"=>$auto_result[$diff],//猜拳结果
"error_code"=>0,//错误码
"error_message"=>"ok" //错误提示信息
); echo json_encode($return);//返回json
exit();
?>
效果如图：