使用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();

?>

效果如图：

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. “ sgen.exe ”已退出，代码为 1

    解决方案:visual studio 2010 选定web项目,右键选择“属性”—“生成”,将“生成序列化程序集”设成“关闭”. 若你使用的是Visual Studio 2012,还需要在“标准”工具 ...

  2. nodejs开发——require与exports的使用

    nodejs开发——require与exports的使用 另一片文章总结:http://www.cnblogs.com/hfultrastrong/p/8036682.html require req ...

  3. css关于定位那些事情

    css绝对定位.相对定位和文档流的那些事 前言 接触html.和css时间也不短了,但每次用div+css布局的时候心里还是有点儿虚,有时候干脆就直接用table算了,很多时候用div会出现些不可预料 ...

  4. python __getattr__

    1.__getattr__ 方法的作用:当调用不存在的属性,就会调用__getattr__()方法: 当一般位置找不到attribute的时候,会调用getattr,返回一个值或AttributeEr ...

  5. 自定义python web框架

    -- Bootstrap http://www.bootcss.com/ -- Font Awesome http://fontawesome.io/ -- bxslider http://bxsli ...

  6. 今日Q群：QQ群众群友反馈问题的归纳总结

    今日Q群:QQ群群友反馈问题的归纳总结     今天Q群里还算比较活跃,归纳总结后主要有以下几类问题: 一.如何在Excel中按指定规则对有颜色的单元格进行过滤删选 具体的解决办法,请参照今天发布微信 ...

  7. C#提高-------------------Assembly和Module的使用-------反射内涵

    转 :C#反射技术概念作用和要点 反射(Reflection)是.NET中的重要机制,通过放射,可以在运行时获得.NET中每一个类型(包括类.结构.委托.接口和枚举等)的成员,包括方法.属性.事件,以 ...

  8. PyQt的图片资源的路径问题。

    百度到的PyQt的添加资源大部分都是通过Qt Creater添加资源的,适用于拖拽形成的界面. 问题一:纯粹手写的界面,添加资源呢? 文件夹路径: |----img |--aa.jpg |----vi ...

  9. 查看CentOS系统运行了多久使用uptime命令

    对于一些人来说系统运行了多久是无关紧要的,但是对于服务器管理员来说,这是相当重要的信息. 服务器在运行重要应用的时候,必须尽量保证长时间的稳定运行,有时候甚至要求零宕机. 那么我们怎么才能知道服务器运 ...

  10. linux静止ping的方法

    ping是一个通信协议,是ip协议的一部分,tcp/ip 协议的一部分.利用它可以检查网络是否能够连通,用好它可以很好地帮助我们分析判定网络故障.应用格式为:Ping IP地址.但服务启用ping有时 ...