使用ajax简单写一个猜拳游戏

HTML代码

  1. <!DOCTYPE HTML>
  2. <html lang="en-US">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <script src="http://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
  7.     <select id="check_type">
  8.         <option value="">请选择</option>
  9.         <option value="1">石头</option>
  10.         <option value="2">剪刀</option>
  11.         <option value="3">布</option>
  12.     </select>
  13.     <input type="button" value="猜拳" id="btn" />
  14.     <div id="result"></div>
  15. </head>
  16. <body>
  17.     <script type="text/javascript">
  18.         $(function(){
  19.             //页面加载完毕后开始执行的事件
  20.             $("#btn").click(function(){
  21.                 var your_type=$("#check_type").val();
  22.                 if(your_type=="")
  23.                 {
  24.                     $("#result").text("请选择你出什么");return false;
  25.                 }
  26.                 $.post("http://localhost/test.php",{"your_type":your_type},function(res){
  27.                     if(res.error_code==0)
  28.                     {
  29.                         //说明成功了
  30.                         $("#result").text("电脑出了"+res.computer_type+" ,结果是您"+res.result);
  31.                     }else
  32.                     {
  33.                         $("#result").text(res.error_message);
  34.                     }
  35.                 },"json");
  36.             });
  37.         });
  38.     </script>
  39. </body>
  40. </html>

然后发起后端的请求。接口在test.php中实现

  1. <?php
  2. $your_type=isset($_POST['your_type'])?$_POST['your_type']:"1";//接受用户的选择
  3. if(in_array($your_type,array(1,2,3),true))
  4. {
  5.     //用户选择的不是石头剪子布其中的一个 告知选择不正确
  6.     die(json_encode(array("error_code"=>1,"error_message"=>"猜拳选择不正确")));
  7. }
  8.  
  9. $type_list=array("1"=>"石头","2"=>"剪刀","3"=>"布");//定义选择对应猜拳
  10. $computer_type=rand(1,3);//电脑随机选择
  11. $diff=$your_type-$computer_type;//计算用户选择与电脑选择的差值
  12. $auto_result=array(
  13.     -2=>"输了",
  14.     -1=>"获胜",
  15.     0 =>"平局",
  16.     1 =>"输了",
  17.     2 =>"获胜",
  18. );//定义好比较结果
  19.  
  20. $return=array(
  21.     "computer_type"=>$type_list[$computer_type],//电脑选择
  22.     "result"=>$auto_result[$diff],//猜拳结果
  23.     "error_code"=>0,//错误码
  24.     "error_message"=>"ok" //错误提示信息
  25. );
  26.  
  27. echo json_encode($return);//返回json
  28. exit();
  29. ?>

效果如图：

ajax简单手写了一个猜拳游戏的更多相关文章

  1. 简单手写一个jqurey

    1 /** 2 * @description 手写jquery 3 * @author ddxldxl 4 */ 5 class Jquery { 6 constructor(selector) { ...

  2. 为sproto手写了一个python parser

    这是sproto系列文章的第三篇,可以参考前面的<为sproto添加python绑定>.<为python-sproto添加map支持>. sproto是云风设计的序列化协议,用 ...

  3. 10分钟教你用python 30行代码搞定简单手写识别！

    欲直接下载代码文件,关注我们的公众号哦!查看历史消息即可! 手写笔记还是电子笔记好呢? 毕业季刚结束,眼瞅着2018级小萌新马上就要来了,老腊肉小编为了咱学弟学妹们的学习,绞尽脑汁准备编一套大学秘籍, ...

  4. servlet(1) - 手写第一个servlet程序 - 小易Java笔记

    声明:如tomcat的安装目录为D:\Java\tomcat6,下面要根据tomcat的安装目录而定 1. 建立程序的文件结构 ==>找到tomcat的安装目录,在webapps目录下新建一个名 ...

  5. 【Java】 ArrayList和LinkedList实现(简单手写)以及分析它们的区别

    一.手写ArrayList public class ArrayList { private Object[] elementData; //底层数组 private int size; //数组大小 ...

  6. 用JS写了一个打字游戏，反正我是通不了关

    今天想写个简单的游戏, 打字游戏好像都没写过, 那么就写打字游戏吧, gamePad包含了关卡的信息, 可以用来调整给个关卡字符下落的速度: getRandom函数会返回一个字符对象, 这个对象包含了 ...

  7. Neeto-Vue:我为了记笔记，手写了一个为知笔记客户端

    构建自托管的笔记系统 这两年各种笔记系统快速井喷,好像谁都能来掺一脚,app store随便搜索一个关键字就会有一大堆的结果,从老牌的印象笔记,Bear,MWeb,有道云笔记再到新星专注笔记之类,从买 ...

  8. python案例：使用if语句实现一个猜拳游戏

    任务要求: 在控制台中提示输入石头.剪刀.布,按回车键,然后给出游戏结果. 分析: 我们知道在游戏规则中,石头克剪刀,剪刀克布,布克石头.但是这在计算机中并不是很好直接的表示,因此我们分别用0.1.2 ...

  9. 利用SpringBoot+Logback手写一个简单的链路追踪

    目录 一.实现原理 二.代码实战 三.测试 最近线上排查问题时候,发现请求太多导致日志错综复杂,没办法把用户在一次或多次请求的日志关联在一起,所以就利用SpringBoot+Logback手写了一个简 ...

随机推荐

  1. jquery 中 $ 符的意义

    $()就是一个函数名,别把它想得这么神奇.$就是一个字符,比如function a(){};function $(){};是一样的.只是jquery中习惯用$函数来作为对象化的入口而已.你也可以把jq ...

  2. SpringBoot2 全局异常处理

    参考这篇文章里面的几种异常形式: 全局异常处理是个比较重要的功能,一般在项目里都会用到. 大概把一次请求分成三个阶段,来分别进行全局的异常处理. 一:在进入Controller之前,譬如请求一个不存在 ...

  3. WebRTC 源码分析（三）：安卓视频硬编码

    数据怎么送进编码器? 怎么从编码器取数据? 如何做流控? 在开始之前,我们先了解一下 MediaCodec 的基本知识. MediaCodec 基础 Developer 官网 上的描述已经很清楚了,下 ...

  4. Spring @Value注解问题

    xml配置了下面标签:<context:property-placeholder location="classpath:xxx.properties" /> 用spr ...

  5. Android  <meta-data>

    在AndroidManifest.xml中,<meta-data>元素可以作为子元素,被包含在<activity>.<application>.<servic ...

  6. e784. 监听对JList选择变动

    When the set of selected items is changed, either by the user or programmatically, a list selection ...

  7. c# 阿拉伯数字转成中文

    调用方法: public string ConvertToChineseNumber(string old) { Chinese ch = new Chinese(); long num = Conv ...

  8. Jquery Gritter set position

    You can try... //css .gritter-center{ position:fixed; left:33%; right:33%; top:33% } //Javascript $. ...

  9. 解决 PathVariable annotation was empty on param 0.

    今天在写网关关于远程调用Feign的时候报的一个错误,PathVariable注解为空.仔细看了一下代码发现问题出在用@PathVariable注解的时候 @PathVariable Integer ...

  10. datepicker clone 控件错误

    删除id,并删除hasDatepicker //+ -  function changeRows(sender,desc){ var tr = $(sender).closest("tr&q ...