使用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. JDBC-批处理操作

    javaweb学习总结(三十六)——使用JDBC进行批处理 在实际的项目开发中,有时候需要向数据库发送一批SQL语句执行,这时应避免向数据库一条条的发送执行,而应采用JDBC的批处理机制,以提升执行效 ...

  2. RGB转灰度图的几种算法

    https://blog.csdn.net/cool1949/article/details/6649429 方法一:    对于彩色转灰度,有一个很著名的心理学公式: Gray = R*0.299 ...

  3. avcodec_open2()分析

    该函数用于初始化一个视音频编解码器的AVCodecContext. int avcodec_open2(AVCodecContext *avctx, const AVCodec *codec, AVD ...

  4. css之-webkit-scrollbar

    在IE中可以自定义滚动条的样式 ,基于webkit的浏览器现在也可以自定义其样式: ::-webkit-scrollbar              { /* 1 */ }   ::-webkit-s ...

  5. Python之cv2

    1.读取图片 import cv2 img = cv2.imread('./test.jpg') 读取出来的图片是numpy.ndarray格式,值是0-255, img的形状是 (图片高度,图片宽度 ...

  6. Ubuntu上CUDA环境搭建

    1.下载CUDA:https://developer.nvidia.com/cuda-toolkit-archive (如果已经安装了N卡驱动,最好用.deb,如果没有安装,可以用.run) 2.根据 ...

  7. qualcomm compile instructions

    qualcomm编译指令 Compile the Entire Android Software source build/envsetup.sh lunch msm8909-userdebug ma ...

  8. linux下压缩与打包工具——gzip, bzip2 和 tar；

    以下内容来自:阿铭http://www.apelearn.com/study_v2/chapter11.html, 把常用的写出来了:感觉可以了: 只管压缩与解压缩的工具: gzip 工具: 用的时候 ...

  9. 飞机找不到，流量哪去了？记一次移动WAP网关导致的问题

    这几天随着客户端一个新版本发布,运维发现CDN的流量猛跌: 话说流量就是金钱,流量就是工资.领导很生气,后果很严重.没什么好说的,赶紧查!一开始怀疑服务端有问题,先受伤的总是我们,当然这也是没错的,因 ...

  10. asp 读文件 比较ip

    <% Dim UserIPAddress Set UserIPAddress = Request.ServerVariables("HTTP_X_FORWARDED_FOR" ...