猜数字游戏
参考：https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/A_first_splash
注意：这里是 JavaScript 的实现，经供参考
人生建议：好好看看里面写的一些内容
我想让你创建一个可以猜数字的游戏，它会在1~100以内随机选择一个数, 然后让玩家挑战在10轮以内猜出这个数字，每一轮都要告诉玩家正确或者错误， 如果出错了，则告诉他数字是低了还是高了，并且还要告诉玩家之前猜的数字是什么。 一旦玩家猜测正确，或者他们用完了回合，游戏将结束。 游戏结束后，可以让玩家选择再次开始。
展示
下面将用三种方法来实现
方法一：Cookie
但是他有个非常大的缺点，就是我们可以查看到答案
打开开发者控制台，找到相应的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>
方法二：Session
区别于上面单纯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>
方法三：JavaScript
<!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>
