一个猜数字的小游戏: 10 次之内猜对 0-100 之间的随机数.
这里是 PHP 操作 cookie
- <?PHP
- if(empty($_COOKIE['num'])||empty($_GET['num'])){
- // 在游戏开始时执行生成随机数, 只执行一次
- $num=rand(0,100);
- setcookie('num',$num);
- }else {
- //count 控制循环次数
- $count=isset($_GET['num']) ? 0 : (int)$_COOKIE['count'];
- if ($count <10 ) {
- $result=(int)$_GET['num']-(int)$_COOKIE['num'];
- if ($result> 0) {
- $message='数字有点大哦!';
- }elseif ($result<0){
- $message='数字小了哦!';
- }else {
- $message='猜对啦~ 撒花~';
- // 释放 num 和 count
- setcookie('num');
- setcookie('count');
- }
- setcookie('count',$count+1);
- }else {
- setcookie('count');
- setcookie('num');
- exit('<h1 > 游戏结束 </h1>');
- }
- }
- ?>
- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- 猜数字
- </title>
- <style>
- body { padding: 100px 0; background-color: #2b3b49; color: #fff; text-align:
- center; font-size: 2.5em; } input { padding: 5px 20px; height: 50px; background-color:
- #3b4b59; border: 1px solid #c0c0c0; box-sizing: border-box; color: #fff;
- font-size: 20px; } button { padding: 5px 20px; height: 50px; font-size:
- 16px; }
- </style>
- </head>
- <body>
- <h1>
- 猜数字游戏
- </h1>
- <p>
- Hi, 我已经准备了一个 0~100 的数字, 你需要在仅有的 10 机会之内猜对它.
- </p>
- <?PHP if (!empty($message)): ?>
- <p>
- <?PHP echo $message; ?>
- </p>
- <?PHP endif ?>
- <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="get">
- <input type="number" min="0" max="100" name="num" placeholder="随便猜">
- <button type="submit">
- 试一试
- </button>
- </form>
- </body>
- </HTML>
这里是 PHP 操作 session
- <?PHP
- session_start();
- if (empty($_SESSION['num'])||empty($_POST['num'])) {
- $num=rand(0,100);
- $_SESSION['num']=$num;
- }else {
- $count=empty($_SESSION['count']) ? 0 : $_SESSION['count'];
- if ($count <10) {
- $result=(int)$_POST['num']-$_SESSION['num'];
- if ($result> 0) {
- $message='数字有点大哦!';
- }elseif ($result <0){
- $message='数字小了哦!';
- }else {
- $message='猜对啦~ 撒花~';
- unset($_SESSION['num']);
- }
- $_SESSION['count']=($count+1);
- // var_dump($_SESSION['count']);
- }else {
- unset($_SESSION['num']);
- unset($_SESSION['count']);
- exit('<h1 > 游戏结束 </h1>');
- }
- }
- ?>
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- 猜数字
- </title>
- <style>
- body { padding: 100px 0; background-color: #2b3b49; color: #fff; text-align:
- center; font-size: 2.5em; } input { padding: 5px 20px; height: 50px; background-color:
- #3b4b59; border: 1px solid #c0c0c0; box-sizing: border-box; color: #fff;
- font-size: 20px; } button { padding: 5px 20px; height: 50px; font-size:
- 16px; }
- </style>
- </head>
- <body>
- <h1>
- 猜数字游戏
- </h1>
- <p>
- Hi, 我已经准备了一个 0~100 的数字, 你需要在仅有的 10 机会之内猜对它.
- </p>
- <?PHP if (!empty($message)): ?>
- <p>
- <?PHP echo $message; ?>
- </p>
- <?PHP endif ?>
- <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
- <input type="number" min="0" max="100" name="num" placeholder="随便猜">
- <button type="submit">
- 试一试
- </button>
- </form>
- </body>
- </HTML>
这里是 JS 操作 cookie,JS 这边用了一个 JS-cookie 的插件, 可以到 https://github.com/js-cookie/js-cookie 这里去查阅 and 下载
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <meta http-equiv="Content-Language" content="zh-cn" />
- <title>
- 猜数字
- </title>
- <style>
- body { background-color: #2b3b49; color: #fff; font-size: 18px; } div
- { width: 600px; margin: 200px auto 0 ; } p { text-align: center; } form
- { width: 100%; height: 50px; } input { margin: 0 auto; width: 160px; height:
- 22px; display: block; } button { width: 43px; height: 25px; margin: 0 auto;
- display: block; }
- </style>
- </head>
- <body>
- <div>
- <p>
- 我们将提供 0-100 之间随机一个数字, 您将拥有十次机会去猜对它~
- </p>
- <form>
- <input id="input" type="text" placeholder="请输入你要猜的数字" />
- </form>
- <p id="inner">
- </p>
- <button onclick="btn()">
- 提交
- </button>
- </div>
- <script src="js.cookie.min.js">
- </script>
- <script>
- var input = document.getElementById("input"); // 获取输入框元素
- var p = document.getElementById("inner"); // 获取输入框元素
- var ram = parseInt(Math.random() * 100 + 1);
- var count = 0;
- Cookies.set('num', ram);
- Cookies.set('count', count);
- var number = Cookies.get('num');
- function btn() {
- var guess = input.value;
- if (guess == "") {
- p.innerHTML = "请输入数字哦~";
- } else {
- if (count < 10) {
- var result = guess - number;
- count++;
- console.log(count);
- if (result > 0) {
- p.innerHTML = "您输入的数字有点略大哦~";
- } else if (result < 0) {
- p.innerHTML = "您输入的数字有点略小了呢~";
- } else {
- p.innerHTML = "宾果~ 答对啦~";
- Cookies.remove('count');
- Cookies.remove('num');
- }
- Cookies.set('count', count);
- } else {
- p.innerHTML = '您的次数已经用尽了哦~';
- Cookies.remove('count');
- Cookies.remove('num');
- }
- }
- }
- </script>
- </body>
- </HTML>
顺道记录下 JS 判断 cookie 是否存在的函数, 其返回的是 cookie 的值
- function cookie(){
- var cookieArray=document.cookie.split(";");
- var cookie=new Object();
- for (var i=0;i<cookieArray.length;i++){
- var arr=cookieArray[i].split("=");
- if(arr[0]=='cookieID')return unescape(arr[1]);
- }
- return "";
- }
来源: http://www.jianshu.com/p/2b39027b206e