参考:https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/A_first_splash
注意:这里是 JavaScript 的实现,经供参考
人生建议:好好看看里面写的一些内容
我想让你创建一个可以猜数字的游戏,它会在1~100以内随机选择一个数, 然后让玩家挑战在10轮以内猜出这个数字,每一轮都要告诉玩家正确或者错误, 如果出错了,则告诉他数字是低了还是高了,并且还要告诉玩家之前猜的数字是什么。 一旦玩家猜测正确,或者他们用完了回合,游戏将结束。 游戏结束后,可以让玩家选择再次开始。
下面将用三种方法来实现
但是他有个非常大的缺点,就是我们可以查看到答案
打开开发者控制台,找到相应的cookie就可以找到答案了
<?php
if (empty($_COOKIE['num']) || empty($_GET['num'])) {
// 在游戏开始时执行生成随机数
$num = rand(0, 100);
// 不能存在文件中,因为有可能同时有多个用户使用
// file_put_contents('number.txt', $num);
// 因为 cookie 是每个用户自己保存,每个用户存的是属于自己的要猜的数字
setcookie('num', $num);
} else {
// 用户来试一试 猜了一次
// 还是通过cookie记录之前输入的内容
$count = empty($_COOKIE['count']) ? 0 : (int)$_COOKIE['count'];
if ($count < 10) {
// 对比用户提交的数字和用户 Cookie 中存放的被猜的数字
// $_GET['num'] => 用户试一试的数字
// $_COOKIE['num'] => 被猜的数字
$result = (int)$_GET['num'] - (int)$_COOKIE['num'];
if ($result == 0) {
$message = '猜对了';
// 重新开始,删除cookie即可
setcookie('num');
setcookie('count');
} elseif ($result > 0) {
$message = '太大了';
} else {
$message = '太小了';
}
setcookie('count', $count + 1);
} else {
// 游戏结束
$message = 'looooooooooooow!';
setcookie('num');
setcookie('count');
}
}
// ============== 判断 请求方式 辨别是第几次请求 ====================================
// if ($_SERVER['REQUEST_METHOD'] === 'GET') {
// // 在游戏开始时执行生成随机数
// $num = rand(0, 100);
// // 不能存在文件中,因为有可能同时有多个用户使用
// // file_put_contents('number.txt', $num);
// // 因为 cookie 是每个用户自己保存,每个用户存的是属于自己的要猜的数字
// setcookie('num', $num);
// } else {
// // 用户来试一试
// // 对比用户提交的数字和用户 Cookie 中存放的被猜的数字
// // $_POST['num'] => 用户试一试的数字
// // $_COOKIE['num'] => 被猜的数字
// $result = (int)$_POST['num'] - (int)$_COOKIE['num'];
// if ($result == 0) {
// echo '猜对了';
// } elseif ($result > 0) {
// echo '太大了';
// } else {
// echo '太小了';
// }
// }
?>
<!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 (isset($message)): ?>
<p><?php echo $message; ?></p>
<?php endif ?>
<form action="index.php" method="get">
<input type="number" min="0" max="100" name="num" placeholder="随便猜">
<button type="submit">试一试</button>
</form>
</body>
</html>
区别于上面单纯cookie可以看到答案的方法,用session方式就相对安全多了,把密码放在服务器中,只给客户端相应的ID
<?php
// 找一个属于当前访问者的箱子
// 并且把箱子的钥匙(session_id)交给用户(cookie)
session_start();
if (empty($_SESSION['num']) || empty($_GET['num'])) {
$num = rand(0, 100);
// 存在 cookie 中不保险,存在服务端的箱子里
$_SESSION['num'] = $num;
} else {
$count = empty($_SESSION['count']) ? 0 : $_SESSION['count'];
if ($count < 10) {
$result = (int)$_GET['num'] - $_SESSION['num'];
if ($result == 0) {
$message = '猜对了';
unset($_SESSION['num']);
unset($_SESSION['count']);
} elseif ($result > 0) {
$message = '太大了';
} else {
$message = '太小了';
}
$_SESSION['count'] = $count + 1;
} else {
$message = '次数用完了!';
unset($_SESSION['num']);
unset($_SESSION['count']);
}
}
?>
<!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 (isset($message)): ?>
<p><?php echo $message; ?></p>
<?php endif ?>
<form action="session.php" method="get">
<input type="number" min="0" max="100" name="num" placeholder="随便猜">
<button type="submit">试一试</button>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>猜数字游戏</title>
<style>
html {
font-family: sans-serif;
}
body {
width: 50%;
max-width: 800px;
min-width: 480px;
margin: 0 auto;
}
.lastResult {
color: white;
padding: 3px;
}
</style>
</head>
<body>
<h1>猜数字游戏</h1>
<p>我刚才随机选定了一个100以内的自然数。看你能否在 10 次以内猜中它。每次我都会告诉你所猜的结果是高了还是低了。</p>
<div class="form">
<label for="guessField">请猜数:</label><input type="text" id="guessField" class="guessField">
<input type="submit" value="我猜" class="guessSubmit">
</div>
<div class="resultParas">
<p class="guesses"></p>
<p class="lastResult"></p>
<p class="lowOrHi"></p>
</div>
<script>
let randomNumber = Math.floor(Math.random() * 100) + 1;
const guesses = document.querySelector('.guesses');
const lastResult = document.querySelector('.lastResult');
const lowOrHi = document.querySelector('.lowOrHi');
const guessSubmit = document.querySelector('.guessSubmit');
const guessField = document.querySelector('.guessField');
let guessCount = 1;
let resetButton;
function checkGuess() {
let userGuess = Number(guessField.value);
if (guessCount === 1) {
guesses.textContent = '上次猜的数:';
}
guesses.textContent += userGuess + ' ';
if (userGuess === randomNumber) {
lastResult.textContent = '恭喜你!猜对了!';
lastResult.style.backgroundColor = 'green';
lowOrHi.textContent = '';
setGameOver();
} else if (guessCount === 10) {
lastResult.textContent = '!!!游戏结束!!!';
lowOrHi.textContent = '';
setGameOver();
} else {
lastResult.textContent = '你猜错了!';
lastResult.style.backgroundColor = 'red';
if(userGuess < randomNumber) {
lowOrHi.textContent = '你刚才猜低了!' ;
} else if(userGuess > randomNumber) {
lowOrHi.textContent = '你刚才猜高了!';
}
}
guessCount++;
guessField.value = '';
guessField.focus();
}
guessSubmit.addEventListener('click', checkGuess);
function setGameOver() {
guessField.disabled = true;
guessSubmit.disabled = true;
resetButton = document.createElement('button');
resetButton.textContent = '开始新游戏';
document.body.appendChild(resetButton);
resetButton.addEventListener('click', resetGame);
}
function resetGame() {
guessCount = 1;
const resetParas = document.querySelectorAll('.resultParas p');
for(let i = 0 ; i < resetParas.length ; i++) {
resetParas[i].textContent = '';
}
resetButton.parentNode.removeChild(resetButton);
guessField.disabled = false;
guessSubmit.disabled = false;
guessField.value = '';
guessField.focus();
lastResult.style.backgroundColor = 'white';
randomNumber = Math.floor(Math.random() * 100) + 1;
}
</script>
</body>
</html>
联系客服