ajax简单手写了一个猜拳游戏
2024-10-19 04:26:19
使用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();
?>
效果如图:
最新文章
- datatables中的Options总结(3)
- Linux学习三:Ubuntu下使用minicom和开发板通信
- 【BZOJ-1458】士兵占领 最大流
- HTML5 localStorage 的使用
- 学习Jquery
- Ansible用于网络设备管理 part 1 Jinja2 YAML初窥
- Android 用户界面---拖放(Drag and Drop)(三)
- MySQL数据库MyISAM和InnoDB存储引擎的比较(转)
- Freemarker学习中遇到的问题
- java 上传文件
- 开源数据库连接池之DBCP
- JAVA基金会 (三)反射 反思的深度分析
- Ambari2.5.3卸载smartsense
- (一)cygwin和vim——hello world!
- hdu1937 二维尺取
- Nginx反向代理WebSocket
- Java获取路径(getResource)
- 【uoj3】 NOI2014—魔法森林
- express-partials使用方法
- 20145234黄斐《Java程序设计》实验五—网络安全与编程
热门文章
- 百度地图Api进阶教程-用户自定义数据(标记和搜索)7.html
- 线段树 + 区间更新 ----- HDU 4902 : Nice boat
- JSON常见操作
- R语言包_dplyr_1
- ubuntu中pycharm配置opencv2环境
- 实验二 C#程序设计 总结
- Window环境下搭建android NDK开发环境
- pymysql.err.InternalError: (1054, ";Unknown column &#39;None&#39; in &#39;field list&#39;";)
- 解密QQ——队列
- ZBar与ZXing使用后感觉