用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>

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

时间: 2021-09-10

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

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

JS猜数字游戏实例讲解

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

jsp+servlet实现猜数字游戏

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

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="

angularjs实现猜数字大小功能

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

js实现一个猜数字游戏

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

JavaScript实现猜数字游戏

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

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

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

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

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的

基于vue组件实现猜数字游戏

本文实例为大家分享了vue猜数字游戏的具体代码,供大家参考,具体内容如下 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>vue组件猜数字游戏</title> <script src="js/vue.js"></script> </head> <body> <div id

Python版的文曲星猜数字游戏代码

复制代码 代码如下: # -*- coding: utf-8 -*- import random #数字类class NumberItem: #数字个数    _GUESS_NUMBER_COUNT_ = 4 def __init__(self):        self._num_ = [] #长度是否标准        def IsFormat(self):        return self._num_.__len__() == self._GUESS_NUMBER_COUNT_ #生成

python实现的简单猜数字游戏

本文实例讲述了python实现的简单猜数字游戏.分享给大家供大家参考.具体如下: 给定一个1-99之间的数,让用户猜数字,当用户猜错时会提示用户猜的数字是过大还是过小,知道用户猜对数字为止,猜对数字用的次数越少成绩越好. import random n = random.randint(1, 99) guess = int(raw_input("Enter an integer from 1 to 99: ")) while n != "guess": print

java实现的简单猜数字游戏代码

本文实例讲述了java实现的简单猜数字游戏代码.分享给大家供大家参考. 具体代码如下: 复制代码 代码如下: import java.util.InputMismatchException; import java.util.Scanner; public class Main {         public static void main(String[] args) {                 // 产生一个随机数                 int number = (in

C#实现简易猜数字游戏

本文实例为大家分享了C#实现简易猜数字游戏的具体代码,供大家参考,具体内容如下 游戏规则说明: 由系统生成一个随机数,玩家有三次猜数字的机会,如果在三次内猜出数字反馈玩家猜对了,否则Game Over! 代码设计说明: 1.首先设计一个简易的欢迎界面,并提示玩家是否开始游戏: public void Rule() { string symbol; bool flag = false; Console.WriteLine("*************************************

JSP实现百万富翁猜数字游戏

本文实例为大家分享了JSP实现百万富翁猜数字游戏的具体代码,供大家参考,具体内容如下 设计一个web app,每次产生一个30以内的数字,给5次机会让客户猜测这个数字: 1)如果客户猜的数字比产生的数字值大,则提示"大了". 2)如果客户猜的数字比产生的数字值小,则提示"小点" 猜对了就过关,猜错Game Over,给玩家重玩的机会. JSP代码: <%@ page language="java" contentType="tex

python3实现猜数字游戏

本文实例为大家分享了python3实现猜数字游戏的具体代码,供大家参考,具体内容如下 需求目标: 需求:猜数字游戏 1: 开始游戏产生一个1~100随机数 2: 用户输入,游戏根据输入值提示大或者小 3: 用户根据提示继续输入,知道猜中为止 4: 如果用户输入错误,程序可以处理异常. 代码如下: # coding=utf-8 import random num = random.randint(0, 100) while True: try: guess = int(input("Enter 1