当然,这是一个基于PHP的猜数字游戏的示例,游戏规则:游戏会生成一个1到100之间的随机数,你需要在输入框中猜数字,然后提交你的猜测。系统会根据你的猜测告诉你是猜大了还是猜小了,直到你猜中为止。接下来你可以尝试在你的网页服务器上运行这个代码,然后打开游戏页面进行游戏。希望你会喜欢这个小游戏!
<!DOCTYPE html> <html> <head> <title>猜数字游戏</title> </head> <body> <?php // 生成随机数 $number = rand(1, 100); $guess = $_GET['guess'] ?? null; // 判断猜测结果 if ($guess != null) { if ($guess > $number) { echo "太大啦!"; } elseif ($guess < $number) { echo "太小啦!"; } else { echo "恭喜你,猜对了!"; } } ?> <h1>猜数字游戏</h1> <form method="GET" action=""> <label for="guess">请输入一个1-100之间的数字:</label> <input type="number" id="guess" name="guess" min="1" max="100"> <input type="submit" value="猜!"> </form> </body> </html>
优化版:要求页面显示10个数字,其中一个为正确答案,每一次给玩家5分,玩家每猜一次(点击页面显示的数字),扣一分,如果消耗掉5分,玩家还没猜出准确答案。则为玩家挑战失败,否则为玩家挑战成功。
<!DOCTYPE html> <html> <head> <title>猜数字游戏</title> <style> body { font-family: Arial, sans-serif; } h1 { text-align: center; margin-bottom: 20px; } .container { max-width: 500px; margin: 0 auto; padding: 20px; } .numbers { display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: 20px; } .number { width: 80px; height: 80px; margin: 5px; border: 1px solid #ccc; display: flex; justify-content: center; align-items: center; cursor: pointer; font-size: 24px; } .number:hover { background-color: #ccc; } .score { text-align: center; margin-bottom: 20px; } .result { text-align: center; font-size: 24px; font-weight: bold; } </style> </head> <body> <?php // 生成随机数 $number = rand(1, 10); $score = $_GET['score'] ?? 5; $guess = $_GET['guess'] ?? null; // 判断猜测结果 if ($guess != null) { if ($guess == $number) { echo "<div class='result'>恭喜你,猜对了!</div>"; echo "<div class='result'>挑战成功!</div>"; exit; } $score -= 1; if ($score == 0) { echo "<div class='result'>挑战失败!</div>"; exit; } echo "<div class='result'>$guess不是正确答案,还剩下$score次机会。</div>"; } ?> <div class="container"> <h1>猜数字游戏</h1> <div class="score">当前剩余分数:<strong><?php echo $score; ?></strong></div> <div class="numbers"> <?php for ($i = 1; $i <= 10; $i++) { echo "<div class='number' onclick='guessNumber($i)'>$i</div>"; } ?> </div> <form method="GET" action=""> <input type="hidden" id="guess" name="guess"> <input type="hidden" id="score" name="score" value="<?php echo $score; ?>"> </form> </div> <script> function guessNumber(number) { document.getElementById('guess').value = number; document.getElementById('score').form.submit(); } </script> </body> </html>