一个猜数字的小游戏：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 "";
}
网友评论