使用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. 解析Google集群资源管理系统Omega

    1. 背景 Google的第一代/第二代集群(资源)管理系统被称为Borg,Borg设计细节因零零星星出现在各种文章中而知名,但一直未公开(比如发一篇paper).然而,我们可从腾讯公布的Torca( ...

  2. ie6幽灵文字及解决办法

    <!-- ie6 幽灵文字示例 --> <div style="width: 400px;"> <div style="float: lef ...

  3. Thymeleaf select 数据回显 选中

    <select style='width: 148.15px' name="dlrlx" th:field="*{Ygdly.dlrlx}"> &l ...

  4. Bootstrap小体验

    感觉很不错,给人一种清淅 明了的感觉

  5. In R, how to split/subset a data frame by factors in one column?

    按照某列的值拆分data.frame My data is like this (for example): ID Rate State 1 24 AL 2 35 MN 3 46 FL 4 34 AL ...

  6. QT：KeepAliveOption的应用

    由于用QTcpSocket写网络通讯程序,当正常服务端或者客户端断开的时候,我们监测信号即可:Signals:stateChanged(QAbstractSocket::SocketState).(手 ...

  7. 【转】【Python】Python 中文编码报错

    用 Python 输出 "Hello, World!",英文没有问题,但是如果你输出中文字符"你好,世界"就有可能会碰到中文编码问题. Python 文件中如果 ...

  8. MFC绘图小实验(2)

    1,以正五边形的5个顶点为基础,隔点存储构成五角星.填充模式采用WINDING.五角星边界线为5个像素宽的蓝色实线,内部使用红色填充. CRect rect; //定义矩形 GetClientRect ...

  9. 第三百七十一节，Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)用Django实现我的搜索以及热门搜索

    第三百七十一节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)用Django实现我的搜索以及热门 我的搜素简单实现原理我们可以用js来实现,首先用js获取到 ...

  10. 第三百六十节，Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)的基本概念

    第三百六十节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)的基本概念 elasticsearch的基本概念 1.集群:一个或者多个节点组织在一起 2.节点 ...