使用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);exit();?>效果如图：
ajax简单手写了一个猜拳游戏
原文地址：https://www.cnblogs.com/lizhaoyao/p/8252782.html