Web实现猜数字游戏：JavaScript DOM基础与实例教程

于 2024-03-26 01:52:09 发布
阅读量1.2k 收藏 13
点赞数 12
分类专栏： 前端专栏 文章标签： 前端 游戏 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/interest_ing_/article/details/137030873
版权

🌟 前言

欢迎来到我的技术小宇宙！🌌 这里不仅是我记录技术点滴的后花园，也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛，这里总有一些内容能触动你的好奇心。🔍

在这里插入图片描述

文章目录

Web实现猜数字游戏：JavaScript DOM基础与实例教程

猜数字游戏是一个简单而经典的游戏，玩家需要猜测由系统随机生成的一个数字。在本教程中，我们将学习如何使用JavaScript和DOM来实现这个网页版的猜数字游戏，并介绍相关的JavaScript DOM基础知识。

JavaScript DOM基础

DOM（Document Object Model）是HTML文档的编程接口，它允许我们通过JavaScript访问和操作网页的元素。在JavaScript中，我们可以使用DOM API来选取元素、更改内容、绑定事件等。

体验地址

http://8.210.131.139/GuessNumber.html

在这里插入图片描述

实例：猜数字游戏

创建HTML结构

首先，我们需要创建一个包含游戏输入区域、结果显示和再玩一次按钮的HTML结构。

<div class="container">
  <h1>猜数字游戏</h1>
  <div class="input-group">
    <label for="guess">请猜一个1~100的整数：</label>
    <input type="text" id="guess" />
    <button id="submit">提交</button>
  </div>
  <div class="result"></div>
  <div class="message"></div>
  <button id="play-again" class="play-again" style="display: none">再玩一次</button>
</div>

美化样式

* {
        font-family: Arial, sans-serif;
        box-sizing: border-box;
      }

      .container {
        margin: 50px auto;
        max-width: 600px;
        text-align: center;
        background-color: #d1d1d1;
        padding: 30px;
        border-radius: 10px;
      }

      h1 {
        font-size: 32px;
        margin-bottom: 20px;
      }

      .input-group {
        margin-bottom: 20px;
      }

      label {
        display: block;
        margin-bottom: 5px;
      }

      input[type="text"] {
        font-size: 18px;
        padding: 5px;
        width: 200px;
        border: 1px solid #ccc;
      }

      button {
        font-size: 18px;
        padding: 5px 10px;
        background-color: #007bff;
        color: #fff;
        border: none;
        cursor: pointer;
      }

      button:hover {
        background-color: #0062cc;
      }

      .result {
        font-size: 24px;
        margin-bottom: 20px;
      }

      .message {
        font-size: 18px;
        margin-bottom: 20px;
      }

      .play-again {
        font-size: 18px;
        padding: 5px 10px;
        background-color: #007bff;
        color: #fff;
        border: none;
        cursor: pointer;
        margin: 0 auto;
      }

      .play-again:hover {
        background-color: #0062cc;
      }

编写JavaScript逻辑

初始化游戏

在JavaScript中，我们首先定义一个变量来存储随机生成的答案。

var answer = Math.floor(Math.random() * 100) + 1;
获取页面元素

使用document.getElementById和document.querySelector来获取页面上的元素。

var input = document.getElementById("guess");
var submitBtn = document.getElementById("submit");
var result = document.querySelector(".result");
var message = document.querySelector(".message");
var playAgainBtn = document.getElementById("play-again");
处理提交事件

为提交按钮绑定点击事件，获取用户输入的数字，并与答案比较。

submitBtn.addEventListener("click", function () {
  var guess = parseInt(input.value);
  if (isNaN(guess) || guess < 1 || guess > 100) {
    result.textContent = "";
    message.textContent = "请输入1~100之间的整数！";
  } else {
    if (guess === answer) {
      result.textContent = "恭喜你，猜对了！";
      message.textContent = "";
      playAgainBtn.style.display = "block";
      submitBtn.disabled = true;
    } else {
      result.textContent = "";
      if (guess < answer) {
        message.textContent = "太小了，请继续猜！";
      } else {
        message.textContent = "太大了，请继续猜！";
      }
    }
  }
});
处理再玩一次事件

为再玩一次按钮绑定点击事件，重置游戏状态并允许用户重新开始游戏。

playAgainBtn.addEventListener("click", function () {
  answer = Math.floor(Math.random() * 100) + 1;
  input.value = "";
  result.textContent = "";
  message.textContent = "";
  playAgainBtn.style.display = "none";
  submitBtn.disabled = false;
});

全部代码

<!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>洛可可白😁猜数字</title>
    <style>
      * {
        font-family: Arial, sans-serif;
        box-sizing: border-box;
      }

      .container {
        margin: 50px auto;
        max-width: 600px;
        text-align: center;
        background-color: #d1d1d1;
        padding: 30px;
        border-radius: 10px;
      }

      h1 {
        font-size: 32px;
        margin-bottom: 20px;
      }

      .input-group {
        margin-bottom: 20px;
      }

      label {
        display: block;
        margin-bottom: 5px;
      }

      input[type="text"] {
        font-size: 18px;
        padding: 5px;
        width: 200px;
        border: 1px solid #ccc;
      }

      button {
        font-size: 18px;
        padding: 5px 10px;
        background-color: #007bff;
        color: #fff;
        border: none;
        cursor: pointer;
      }

      button:hover {
        background-color: #0062cc;
      }

      .result {
        font-size: 24px;
        margin-bottom: 20px;
      }

      .message {
        font-size: 18px;
        margin-bottom: 20px;
      }

      .play-again {
        font-size: 18px;
        padding: 5px 10px;
        background-color: #007bff;
        color: #fff;
        border: none;
        cursor: pointer;
        margin: 0 auto;
      }

      .play-again:hover {
        background-color: #0062cc;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <h1>猜数字游戏</h1>
      <div class="input-group">
        <label for="guess">请猜一个1~100的整数：</label>
        <input type="text" id="guess" />
        <button id="submit">提交</button>
      </div>
      <div class="result"></div>
      <div class="message"></div>
      <button id="play-again" class="play-again" style="display: none">
        再玩一次
      </button>
    </div>

    <script>
      // 生成随机数（1~100之间）
      var answer = Math.floor(Math.random() * 100) + 1;

      // 获取页面元素
      var input = document.getElementById("guess");
      var submitBtn = document.getElementById("submit");
      var result = document.querySelector(".result");
      var message = document.querySelector(".message");
      var playAgainBtn = document.getElementById("play-again");

      // 处理提交事件
      submitBtn.addEventListener("click", function () {
        // 获取用户输入的数字
        var guess = parseInt(input.value);

        // 验证用户输入的数字是否合法
        if (isNaN(guess) || guess < 1 || guess > 100) {
          result.textContent = "";
          message.textContent = "请输入1~100之间的整数！";
          return;
        }

        // 比较用户输入的数字和答案
        if (guess === answer) {
          result.textContent = "恭喜你，猜对了！";
          message.textContent = "";
          playAgainBtn.style.display = "block";
          submitBtn.disabled = true;
        } else if (guess < answer) {
          result.textContent = "";
          message.textContent = "太小了，请继续猜！";
        } else {
          result.textContent = "";
          message.textContent = "太大了，请继续猜！";
        }
      });

      // 处理再玩一次事件
      playAgainBtn.addEventListener("click", function () {
        // 重新生成随机数
        answer = Math.floor(Math.random() * 100) + 1;

        // 清空输入框和提示信息
        input.value = "";
        result.textContent = "";
        message.textContent = "";

        // 隐藏再玩一次按钮，启用提交按钮
        playAgainBtn.style.display = "none";
        submitBtn.disabled = false;
      });
    </script>
  </body>
</html>

结语

通过上述步骤，我们实现了一个简单的猜数字游戏。这个实例展示了如何使用JavaScript DOM API来操作HTML元素，并响应用户事件。通过这个项目，你可以更好地理解DOM操作的基本概念和方法，以及如何在实际项目中应用它们。猜数字游戏是一个入门级的编程项目，适合初学者练习和提升编程技能。

如果对你有帮助，点赞👍、收藏💖、关注🔔是我更新的动力！👋🌟🚀

🎉 往期精彩回顾

Web实现名言生成器：JavaScript DOM基础与实例教程

  • 604阅读 · 16点赞 · 14收藏

Web实现井字棋游戏：JavaScript DOM基础与实例教程

  • 502阅读 · 20点赞 · 12收藏

Web实现表格单选全选与反选操作：JavaScript DOM基础与实例教程

  • 772阅读 · 14点赞 · 7收藏

H5实现Web ECharts教程：轻松创建动态数据图表

  • 1123阅读 · 19点赞 · 6收藏

浏览器DOM操作基础：禁用右键菜单与阻止文字选中

  • 1013阅读 · 33点赞 · 24收藏

缤纷浏览器 —— 一键换肤，个性随心换（H5实现浏览器换肤效果）

  • 593阅读 · 10点赞 · 6收藏

广州5k前端面试题惊呆我！！！（内容太肝，谨慎入内）

  • 824阅读 · 29点赞 · 24收藏

计算机专业学生的成长之路：超越课堂的自我提升策略

  • 850阅读 · 33点赞 · 26收藏

Node.js快速入门：搭建基础Web服务器与实现CRUD及登录功能

  • 910阅读 · 31点赞 · 16收藏

Node.js核心命令与工具：提升开发效率的实用指南

  • 748阅读 · 11点赞 · 18收藏

爆肝五千字！ECMAScript核心概念与现代JavaScript特性全解析

  • 1301阅读 · 25点赞 · 30收藏
洛可可白
关注
  • 12
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Javascript DHTML 实例编程（教程）DOM基础和基本API
01-19
什么叫DOM，DOM是文档对象模型(Document Object Model，是基于浏览器编程（在本教程中，可以说就是DHTML编程）的一套API接口，W3C出台的推荐标准，每个浏览器都有一些细微的差别，其中以Mozilla的浏览器最与标准...
JavaScript基础与实例教程
02-10
本教程“JavaScript基础与实例教程”由中国电力出版社出版，旨在为初学者和有经验的开发者提供一个深入理解JavaScript核心概念和实践技巧的平台。 首先，JavaScript的核心概念包括变量、数据类型和操作符。变量是...
猜数字小游戏（网页版）
X_H学Java的博客
07-21 4240
猜数字游戏的玩法大家都非常了解，本篇文章使用HTML+CSS+JavaScript实现了一个网页简易版的猜数字小游戏，本文着重介绍了功能实现，并且最后附上源码供大家参考
web之-猜数字小游戏
qq_38233172的博客
04-15 1907
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>猜数字游戏</title> <style type="text/css"> html{ ...
Web学习-猜数字
m0_47129108的博客
06-02 844
parseInt(Math.random()*100) 用于随机生成一个0~100之间的一个数字； do while 该循环至少会执行一次，执行后会判断是否为真，为真则继续执行，否则结束循环； break break用于跳出循环语句，若循环语句下面还有代码，则继续执行下面的代码； alert alert用于显示指定消息和一个OK按钮的警告框； 猜数字 内联代码片。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8
JS 简单猜数字游戏
wang16519865的博客
04-12 633
JS 猜数字游戏(随机数以及取值范围的变化)
用js玩一玩猜数字游戏
2302_79245293的博客
01-07 431
2. 只能猜 5 次， 5 次机会用完提示 `这都猜不到`5. 猜大了， 就提示用户 您猜的数字大了。3. 猜对了， 就提示 恭喜猜对拉。4. 猜小了， 您猜的数字小了。1. 生成随机的数字 0 到 20。
web-231:JavaScript简介
04-30
JavaScript，由Brendan Eich在1995年发明，是一种轻量级的、解释型的...在"web-231-master"这个压缩包中，可能包含了关于JavaScript的基础教程、实例代码或者练习项目，可以帮助学习者系统地学习和实践JavaScript编程。
paginas_web_js:JavaScript
04-27
在"paginas_web_js-master"这个目录下，可能包含了JavaScript的实例代码、教程、练习项目等。学习者可以通过查看和运行这些代码来深入理解JavaScript的工作原理，学习如何创建动态网页，如滑动效果、表单验证、动画...
JavaScript DOM编程
06-12
JavaScript DOM编程是Web开发中的重要组成部分，特别是在构建交互式的网页应用时。...提供的压缩包文件可能包含相关的视频教程，它们将详细讲解这些概念并提供实例演示，对于提升JavaScript DOM编程技能非常有帮助。
计时猜数小游戏（web版）
03-23
web实验，规定时间内猜数小游戏。web实验，规定时间内猜数小游戏。
基于html的猜数字游戏设计（html+js+css）
03-06
1.css样式设计 2.html常规的可视化界面，显示输入框和提交按钮 3.js控制生成的随机数与输入的数字比较 4.根据相比的结果提示并显示相应的图片 5.猜测次数默认是6次，6次没有猜中则为游戏挑战失败，点击重新开始按钮可重新开始 6.6次中有一次猜中则为胜利，猜中后不论还剩几次都将无法进行猜测，显示成功游戏结束。
jsp的简单猜数字小游戏
10-26
利用jsp web开发实现简单猜数字小游戏,主要有用户登录界面和猜数字功能
web系统之猜数游戏——项目总结
01-08
web系统之猜数游戏——项目总结 作者：钟华 项目需求 项目雏形 基于数据查找的二分查找法开发的小游戏。 开发环境 JDK-Version:1.8 Tomcat-Version:8.0 开发工具 Eclipse Java EE IDE for Web Developers. Version: Mars.1 Release (4.5.1) 开发需求 系统自动生成一个[1-100]的随机数。 从键盘获取用户输入的数字。 比较生成的随机数与用户输入的数字的大小。 分情况进行页面跳转： 随机数 = 用户输入数 –> 成功界面 随机数 > 用户输入数 –> 重试界面1 随机数 重试界面2 成功界面 ：
简单用JavaScript做一个猜数字小游戏
qq_69099591的博客
05-18 3449
今天我们使用JavaScript来做一个猜数字小游戏。猜数字游戏是一种简单而又有趣的游戏，它可以帮助我们提高逻辑思维能力和编程技能。在这个小案例中，我们将通过JavaScript的初级知识来实现这个游戏，并且逐步提高游戏的难度和用户体验。无论你是初学者还是已经有一定编程经验的人，这个案例都将对你有所帮助。让我们开始吧！猜数字游戏是一种基于JavaScript编写的简单游戏，玩家需要猜出程序随机生成的数字。在编写游戏时，可以使用JavaScript的Math对象来生成随机数字。
javaweb之jsp猜数字小游戏
m0_70409343的博客
10-13 1820
javaweb之jsp猜数字小游戏
简易SpringBoot---猜数字（web版）
y2114269634的博客
08-04 212
今天搭建了一个简易的springboot demo，在web上写了一个猜数字游戏的简易代码。
❤️创意网页：猜数字游戏
VLOKL的博客
07-11 397
❤️创意网页：猜数字游戏
利用【JavaScript】实现简单的【猜数字】游戏
最新发布
鸿蒙初开
01-27 1599
本文探讨了如何实现猜数字游戏的两种方式：在网页页面上直接进行游戏和利用网页弹窗实现。最终选择了后者，因为它更简单直接。游戏的核心在于生成随机数供玩家猜测，使用Math.random()函数生成随机数，并通过循环和条件语句处理玩家的猜测。为了使代码结构更严谨，可以使用函数来处理游戏逻辑。此外，还讨论了玩家在猜错后的操作方式，并建议根据游戏需求和玩家习惯选择适合的操作流程设计。
完整版Java web开发教程PPT课件 Java开发进阶教程 第02章 Dom模型,控制客户端元素（共15页）.pptx
12-25
本篇文档是关于Java Web开发进阶教程的第02章，主要讲解Dom模型和如何控制客户端元素。Dom模型，全称为Document Object Model（文档对象模型），是HTML文档的标准化表示，由W3C制定，用于访问和处理HTML文档中的所有...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

洛可可白

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值