用js实现猜数字小游戏

上周老师留的小作业，做一个猜数字的小游戏，个人感觉挺有意思的，就随便写了写，有些地方逻辑并不是很合理（学生小白勿喷）。主要内容是随机生成0-100的正整数，猜六次每次提示猜的大了还是小了，错误一次小心心就会变黑，完成后弹出提示框是否继续，继续则刷新页面（原理和内容很简单，仅纪念一下）

示例图和代码附上(提前在控制台打印出正确答案)



原理和内容很简单就不再赘述了（图片是iconfont下载，可自行下载)

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .ran {
        margin: 100px auto;
        padding-left: 40%;
    }
    ul {
        list-style: none;
    }
    ul img {
        width: 20px;
        height: 20px;
        float: left;

    }
</style>
<body>
    <div class="ran">
        <h1>猜数字</h1>
        <h3>请输入零到一百正整数</h3>
        <input type="text" οnchange="handlenum()">
        <button class="but" οnclick="li()">确定</button>
        <ul>
            <li><img src="./x1.png" alt=""></li>
            <li><img src="./x1.png" alt=""></li>
            <li><img src="./x1.png" alt=""></li>
            <li><img src="./x1.png" alt=""></li>
            <li><img src="./x1.png" alt=""></li>
            <li><img src="./x1.png" alt=""></li>
        </ul>
    </div>
    <script>
        // let but = document.querySelector('but')
        let inp = document.querySelector('input')
        let img = document.querySelectorAll('img')
        let num = Math.round(Math.random()*100)
        let i = 0
        console.log(num);
        function handlenum() {}
        function li () {
            i++
            if (i<6) {
                let guess = parseInt(inp.value)
                0<guess<100? guess :alert('请输入零到一百正整数')

                if (guess === num) {
                    if (confirm('恭喜你猜对了，是否继续游戏')) {
                            window.location.reload();
                        }
                    } else {
                        guess>num? alert("大了"):alert('小了')
                        img[6-i].src = './x2.png'
                    }
            } else {
                if (confirm('次数已用尽，是否重新开始')) {
                    window.location.reload();
                }
            }
        }
    </script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • js猜数字小游戏的简单实现代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="

  • 基于JavaScript实现猜数字游戏代码实例

    环境 vscode 1.46 Microsoft Edge 83 示例 以下内容为了解和熟悉 JavaScript,不需要理解,能够复制粘贴并正确运行即可. 新建网页模板 在 vscode 中新建一个 index.html 文件,然后输入以下内容. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>猜数字游戏</title> <style&

  • js实现一个猜数字游戏

    js实现一个猜数字游戏

    看你需要猜几次才能猜到那个正确的数字! 效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>猜数字游戏</title> <script type="text/javascript" cha

  • js实现弹窗猜数字游戏

    js实现弹窗猜数字游戏

    本文实例为大家分享了js实现弹窗猜数字游戏的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> var num = Math.floor(Math.random() * 100 + 1); // 产生0-100的

  • JS猜数字游戏实例讲解

    本文实例为大家分享了JS实现猜数字游戏的具体代码,供大家参考,具体内容如下 猜数字游戏: 1)利用JS的Math内置对象,实现在1-50内选取一个整数随机数作为游戏答案 2)输入数字进行判断,共有10次输入机会 3)若大于答案数字,则提示猜大了,若小于答案数字,则提示猜小了 4)直至10次机会用完或者猜对答案了,则结束游戏 <script type="text/javascript"> // 猜数字案例 function guessTip(min, max) { min =

  • angularjs实现猜数字大小功能

    本文实例为大家分享了angularjs实现猜数字大小功能的具体代码,供大家参考,具体内容如下 <body ng-app="myapp" ng-controller="myCtrl"> <h2>猜一猜,多大值?(1-1000)</h2> 我猜是:<input type="text" ng-model="guess"> <button ng-click="check(

  • JavaScript实现猜数字游戏

    本博文源于js基础,旨在讨论如何实现猜随机数的小游戏. 题目重现 随机生成一个[0,100]区间的数字,不断重复用户输入,直到用户输入对为止. 实现原理 先用Math.random生成一个数字,欲得到[a,b]区间的随机整数,可采用以下公式: parseInt(Math.random()*(b-a+1))+a; 举个例子:得到[3,8] parseInt(Math.random()*6)+3; 然后循环里,多分支if判断一下,给用户提示一下 测试用例 玩的时候用二分法玩,二分法就是一次砍一半,比

  • JS实现网页端猜数字小游戏

    本文实例为大家分享了JS实现网页端猜数字游戏的具体代码,供大家参考,具体内容如下 题目描述 电脑产生一个0到100之间的随机数字,并且要求用户来猜,如果用户猜的数字比这个数字大,电脑会提示"太大",否则会提示"太小",当用户正好猜中,电脑会提示"恭喜你猜对了,这个数是-".在用户每次猜测之后,程序会输出用户第几次猜测.如果用户输入的根本不是一个数字,程序会告诉用户输入无效 代码实现 <!DOCTYPE html> <html&g

  • jsp+servlet实现猜数字游戏

    jsp+servlet实现猜数字游戏主要用到了servlet方面的session,HttpServletResponse类中的sendRedirect()方法. step1,客户访问或刷新getNumber.jsp页面时,随机给用户分配一个1-100之间的数字,将该数字存放到客户的session中. <%@ page language="java" import="java.util.*" contentType="text/html;charset

  • AngularJS实现的生成随机数与猜数字大小功能示例

    本文实例讲述了AngularJS实现的生成随机数与猜数字大小功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net Angular猜数</title> <style> *{ margin: 0; padding: 0; font-siz

随机推荐