猜数字游戏demo -- 分别使用JS、cookie、session实现

最新推荐文章于 2025-04-08 19:01:40 发布

晔晔炅萤

最新推荐文章于 2025-04-08 19:01:40 发布

阅读量477

点赞数

分类专栏：前端开发笔记

本文链接：https://blog.youkuaiyun.com/qq_18369669/article/details/103946064

版权

前端开发笔记专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何使用JavaScript、Cookie和Session来实现一个猜数字游戏。游戏规则是生成1~100间的一个整数，玩家有10次机会猜测。JavaScript实现中，随机数可被直接查看；Cookie实现下，玩家能查看存储的值；而Session实现由于存储在服务器端，确保了游戏的公平性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

随机生成一个1 ~ 100之间的整数，仅给10次机会猜中这个数，根据用户提交的数，反馈是大了还是小了，超过10次则不再给机会。
在这里插入图片描述
下面是分别使用js、cookie、session实现的例子。

使用Javascript实现

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>猜数字游戏demo，js代码实现</title>
<link rel="stylesheet" type='text/css' href="style.css">
</head>
<body>
    <h1>猜数字游戏</h1>
    <p>Hi，我已经准备好了一个 1 ~ 100 的数字，您需要在仅有的10次机会中猜中！</p>
    <div class='info'></div>
    <form action="">
        <input type="number" min='1' max='100' oninput="if(value > 100 || value < 1){value = ''};if(parseInt(value)!=value){value=parseInt(value)}"/>
        <button type="submit" >试一试</button>
    </form>
</body>
<script>
    var numInput = document.getElementsByTagName('input')[0]
    var btn = document.getElementsByTagName('button')[0]
    var infoDiv = document.getElementsByTagName('div')[0]
    var randomNum = Math.floor(Math.random() * 100 + 1)
    var count = 0
    btn.onclick = function(){
        var inputValue = parseInt(numInput.value)
        if(isNaN(inputValue)){
            return false;
        }
        if(count >= 10){
            infoDiv.innerHTML = '您已经尝试了超过10次，游戏失败！'
            btn.disabled = 'disabled'
            numInput.disabled = 'disabled'
        }else if(inputValue == randomNum){
            infoDiv.innerHTML = '猜对了!'
            btn.disabled = 'disabled'
            numInput.disabled = 'disabled'
        }else if(inputValue > randomNum){
            infoDiv.innerHTML = '太大了!'
        }else if(inputValue < randomNum){
            infoDiv.innerHTML = '太小了!'
        }
        count += 1
        return false
    }

</script>
</html>

但是用户可以在浏览器的console界面直接输出生成的随机数：
在这里插入图片描述

使用cookie实现

<?php
    if( empty($_COOKIE['num']) || empty($_POST['num']) ){
        $num = rand(1, 100);
        setcookie('num',$num);
        setcookie('count',0);
    }else{
        $random_num = $_COOKIE['num'];
        $input_value = $_POST['num'];
        $count = $_COOKIE['count'];
        $count += 1;
        setcookie('count',$count);
        $gameover = false;
        if($count > 10){
            $info = '您已经尝试了超过10次，游戏失败！';
            $gameover = true;
        }else if((int)$input_value === (int)$random_num){
            $info = '猜对了';
            $gameover = true;
        }else if((int)$input_value > (int)$random_num){
            $info = '太大了';
        }else if((int)$input_value < (int)$random_num){
            $info = '太小了';
        }    
    }
?>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>猜数字游戏demo，cookie实现</title>
<link rel="stylesheet" type='text/css' href="style.css">
</head>
<body>
    <h1>猜数字游戏</h1>
    <p>Hi，我已经准备好了一个 1 ~ 100 的数字，您需要在仅有的10次机会中猜中！</p>
    <div class='info'><?php echo isset($info)?$info:'' ?></div>

    <form action="<?php echo $_SERVER['PHP_SELF'] ?>" method='post'>
        <input type="number" name='num'<?php echo isset($gameover)&&$gameover?' disabled ':' ' ?>value="<?php echo $_POST['num']?>" min='1' max='100' oninput="if(value > 100 || value < 1){value = ''};if(parseInt(value)!=value){value=parseInt(value)}"/>
        <button type="submit"<?php echo isset($gameover)&&$gameover?' disabled ':' ' ?>>试一试</button>
    </form>
</body>

</html>

但是用户可以直接查看cookie中存储的值：
在这里插入图片描述

使用session实现

<?php
    session_start();
    if( empty($_SESSION['num']) || empty($_POST['num']) ){
        $num = rand(1, 100);
        $_SESSION['num'] = $num;
        $_SESSION['count'] = 0;
    }else{
        $random_num = $_SESSION['num'];
        $input_value = $_POST['num'];
        $count = $_SESSION['count'];
        $count += 1;
        $_SESSION['count'] = $count;
        $gameover = false;
        if($count > 10){
            $info = '您已经尝试了超过10次，游戏失败！';
            $gameover = true;
        }else if((int)$input_value === (int)$random_num){
            $info = '猜对了';
            $gameover = true;
        }else if((int)$input_value > (int)$random_num){
            $info = '太大了';
        }else if((int)$input_value < (int)$random_num){
            $info = '太小了';
        }
    }
?>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>猜数字游戏demo，session实现</title>
<link rel="stylesheet" type='text/css' href="style.css">
</head>
<body>
    <h1>猜数字游戏</h1>
    <p>Hi，我已经准备好了一个 1 ~ 100 的数字，您需要在仅有的10次机会中猜中！</p>
    <div class='info'><?php echo isset($info)?$info:'' ?></div>

    <form action="<?php echo $_SERVER['PHP_SELF'] ?>" method='post'>
        <input type="number" name='num'<?php echo isset($gameover)&&$gameover?' disabled ':' ' ?>value="<?php echo $_POST['num']?>" min='1' max='100' oninput="if(value > 100 || value < 1){value = ''};if(parseInt(value)!=value){value=parseInt(value)}"/>
        <button type="submit"<?php echo isset($gameover)&&$gameover?' disabled ':' ' ?>>试一试</button>
    </form>
</body>

</html>