游戏名称:猜数字游戏
游戏规则:请输入一个0-100的数字,在十次内才对数字即可,其中每猜一次系统会告诉你该数字是太大了,还是太小了。
使用技术:cookie、session和php
技术介绍
在做此次小游戏之前,先来了解一下Cookie和Session
Cookie:HTTP 很重要的一个特点就是无状态(每一次见面都是“初次见面”),如果单纯的希望通过我们的服务端程序去记 住每一个访问者是不可能的,所以必须借助一些手段或者说技巧让服务端记住客户端,这种手段就是 Cookie。
也就是说由于http是无状态的协议,一旦客户端和服务器的数据交换完毕,就会断开连接,再次请求,会重新连接,这就说明服务器单从网络连接上是没有办法知道用户身份的。怎么办呢?那就给每次新的用户请求时,给它颁发一个身份证(独一无二)吧,下次访问,必须带上身份证,这样服务器就会知道是谁来访问了,针对不同用户,做出不同的响应。,这就是Cookie的原理。
类比生活中的例子就是:Cookie 就像是在超级市场买东西拿到的小票,由超市(Server)发给消费者(Browser),超市方面不用记住每 一个消费者的脸,但是他们认识消费者手里的小票(Cookie),可以通过小票知道消费者之前的一些消费信息(在 服务端产生的数据)。
Session:由于 Cookie 是服务端下发给客户端由客户端本地保存的。换而言之客户端可以在本地对其随意操作,包括删除和 修改。如果客户端随意伪造一个 Cookie 的话,对于服务端是无法辨别的,就会造成服务端被蒙蔽,构成安全隐 患。
于是乎就有了另外一种基于 Cookie 基础之上的手段:Session。
两者之间的区别:
Session 区别于 Cookie 一个很大的地方就是:Session 数据存在了服务端,而 Cookie 存在了客户端本地,存在服 务端最大的优势就是,不是用户想怎么改就怎么改了。
Session 这种机制会更加适合于存放一些属于用户而又不能让用户修改的数据,因为客户端不再保存具体的数据, 只是保存一把“钥匙”,伪造一把可以用的钥匙,可能性是极低的,所以不需要在意。
游戏界面如下:
源代码如下:
<?php
//这句代码表示给当前用户找一个属于他的箱子(没有就创建一个箱子,有就找已有的)
session_start();
if(empty($_SESSION['num']) || empty($_POST['num'])){
//随机产生一个数字
$num = rand(0,100);
//并保存到session中
$_SESSION['num'] = $num;
}
else {
$count = empty($_SESSION['count']) ? 0:(int)$_SESSION['count'];
//设置session中count的值
$_SESSION['count'] = $count + 1;
$res = (int)$_POST['num'] - (int)$_SESSION['num'];
if($count<10){
if($res == 0){
echo "猜对啦";
//猜中则清楚session中的值
unset($_SESSION['num']);
unset($_SESSION['count']);
}elseif($res > 0){
echo "太大了";
}else {
echo "太小了";
}
}else{
//游戏失败清楚session中的数据
echo "looooooooow!!!!";
unset($_SESSION['num']);
unset($_SESSION['count']);
}
}
?>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style type="text/css">
body {
padding: 100px 0;
background-color: aqua;
color: #FFFFFF;
text-align: center;
font-size: 2.5em;
}
input {
padding: 5px 20px;
height: 50px;
background-color: white;
border: 1px solid #00FFFF;
box-sizing: border-box;
color: #black;
font-size: 20px;
}
button {
padding: 5x 20px;
height: 50px;
font-size: 16px;
}
</style>
</head>
<body>
<h1>猜数字游戏</h1>
<p>请输入一个0-100的数字,在十次内才对数字即可</p>
//把表单数据提交到当前页面
<form action="guess.php" method="post">
<input type="number" name="num" mix = "0" max = "100" placeholder="随便猜" />
<button type="submit">试一试</button>
</form>
</body>
</html>
本项目不适用cookie的主要原因是,数据是存在客户端的,可能会让客户找到产生的哪一个随机数,就是造成bug,查看到cookie中的数据如下图所示(可看到产生的随机数为91):
所以为了解决这个问题,只能选择session来保存产生的随机数,其中的页面如下
由上图可见,cookie中并没有显示出session中的随机数值,因此此方法可以解决防止数据被用户发现的问题。