首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onJuly 30, 2020

环境

  • vscode 1.46
  • Microsoft Edge 83

示例

以下内容为了解和熟悉 JavaScript，不需要理解，能够复制粘贴并正确运行即可。

新建网页模板

在 vscode 中新建一个 index.html 文件，然后输入以下内容。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">

  <title>猜数字游戏</title>

  <style>
   html {
    font-family: sans-serif;
   }

   body {
    width: 50%;
    max-width: 800px;
    min-width: 480px;
    margin: 0 auto;
   }

   .lastResult {
    color: white;
    padding: 3px;
   }
  </style>
 </head>

 <body>
  <h1>猜数字游戏</h1>

  <p>我刚才随机选定了一个100以内的自然数。看你能否在 10 次以内猜中它。每次我都会告诉你所猜的结果是高了还是低了。</p>

  <div class="form">
   <label for="guessField">请猜数: </label>
   <input type="text" id="guessField" class="guessField">
   <input type="submit" value="确定" class="guessSubmit">
  </div>

  <div class="resultParas">
   <p class="guesses"></p>
   <p class="lastResult"></p>
   <p class="lowOrHi"></p>
  </div>

  <script>

   // 开始编写 JavaScript 代码

  </script>
 </body>
</html>

定义变量

首先将需要使用的变量都定义出来。

let randomNumber = Math.floor(Math.random() * 100) + 1;

const guesses = document.querySelector('.guesses');
const lastResult = document.querySelector('.lastResult');
const lowOrHi = document.querySelector('.lowOrHi');

const guessSubmit = document.querySelector('.guessSubmit');
const guessField = document.querySelector('.guessField');

let guessCount = 1;
let resetButton;

定义猜数字主逻辑

function checkGuess() {
 let userGuess = Number(guessField.value);
 if (guessCount === 1) {
  guesses.textContent = '上次猜的数：';
 }
 guesses.textContent += userGuess + ' ';
 
 if (userGuess === randomNumber) {
  lastResult.textContent = '恭喜你！猜对了';
  lastResult.style.backgroundColor = 'green';
  lowOrHi.textContent = '';
  setGameOver();
 } else if (guessCount === 10) {
  lastResult.textContent = '!!!GAME OVER!!!';
  setGameOver();
 } else {
  lastResult.textContent = '你猜错了！';
  lastResult.style.backgroundColor = 'red';
  if(userGuess < randomNumber) {
   lowOrHi.textContent = '你猜低了！';
  } else if(userGuess > randomNumber) {
   lowOrHi.textContent = '你猜高了';
  }
 }
 
 guessCount++;
 guessField.value = '';
 guessField.focus();
}

结束游戏

function setGameOver() {
 guessField.disabled = true;
 guessSubmit.disabled = true;
 resetButton = document.createElement('button');
 resetButton.textContent = '开始新游戏';
 document.body.appendChild(resetButton);
 resetButton.addEventListener('click', resetGame);
}

重置游戏

function resetGame() {
 guessCount = 1;

 const resetParas = document.querySelectorAll('.resultParas p');
 for (let i = 0 ; i < resetParas.length; i++) {
  resetParas[i].textContent = '';
 }

 resetButton.parentNode.removeChild(resetButton);

 guessField.disabled = false;
 guessSubmit.disabled = false;
 guessField.value = '';
 guessField.focus();

 lastResult.style.backgroundColor = 'white';

 randomNumber = Math.floor(Math.random() * 100) + 1;
}

浏览器打开

用浏览器打开刚刚编写的程序，试试游戏是否能够正常运行。

附录

源码

<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8">
 <title>猜数字游戏</title>
 <style>
  html {
   font-family: sans-serif;
  }

  body {
   width: 50%;
   max-width: 800px;
   min-width: 480px;
   margin: 0 auto;
  }

  .lastResult {
   color: white;
   padding: 3px;
  }
 </style>
</head>

<body>
 <h1>猜数字游戏</h1>

 <p>我刚才随机选定了一个100以内的自然数。看你能否在 10 次以内猜中它。每次我都会告诉你所猜的结果是高了还是低了。</p>

 <div class="form">
  <label for="guessField">请猜数: </label>
  <input type="text" id="guessField" class="guessField">
  <input type="submit" value="确定" class="guessSubmit">
 </div>

 <div class="resultParas">
  <p class="guesses"></p>
  <p class="lastResult"></p>
  <p class="lowOrHi"></p>
 </div>

 <script>

  let randomNumber = Math.floor(Math.random() * 100) + 1;

  const guesses = document.querySelector('.guesses');
  const lastResult = document.querySelector('.lastResult');
  const lowOrHi = document.querySelector('.lowOrHi');

  const guessSubmit = document.querySelector('.guessSubmit');
  const guessField = document.querySelector('.guessField');

  let guessCount = 1;
  let resetButton;

  function checkGuess() {
   let userGuess = Number(guessField.value);
   if (guessCount === 1) {
    guesses.textContent = '上次猜的数：';
   }
   guesses.textContent += userGuess + ' ';

   if (userGuess === randomNumber) {
    lastResult.textContent = '恭喜你！猜对了';
    lastResult.style.backgroundColor = 'green';
    lowOrHi.textContent = '';
    setGameOver();
   } else if (guessCount === 10) {
    lastResult.textContent = '!!!GAME OVER!!!';
    setGameOver();
   } else {
    lastResult.textContent = '你猜错了！';
    lastResult.style.backgroundColor = 'red';
    if (userGuess < randomNumber) {
     lowOrHi.textContent = '你猜低了！';
    } else if (userGuess > randomNumber) {
     lowOrHi.textContent = '你猜高了';
    }
   }

   guessCount++;
   guessField.value = '';
   guessField.focus();
  }

  guessSubmit.addEventListener('click', checkGuess);

  function setGameOver() {
   guessField.disabled = true;
   guessSubmit.disabled = true;
   resetButton = document.createElement('button');
   resetButton.textContent = '开始新游戏';
   document.body.appendChild(resetButton);
   resetButton.addEventListener('click', resetGame);
  }

  function resetGame() {
   guessCount = 1;

   const resetParas = document.querySelectorAll('.resultParas p');
   for (let i = 0; i < resetParas.length; i++) {
    resetParas[i].textContent = '';
   }

   resetButton.parentNode.removeChild(resetButton);

   guessField.disabled = false;
   guessSubmit.disabled = false;
   guessField.value = '';
   guessField.focus();

   lastResult.style.backgroundColor = 'white';

   randomNumber = Math.floor(Math.random() * 100) + 1;
  }

 </script>
</body>
</html>

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

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

- Author -

波尔

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
图像替换新技术 状态域方法
Jan 28 Javascript
5个最佳的Javascript日期处理类库分享
Apr 15 Javascript
高效率JavaScript编写技巧整理
Aug 23 Javascript
javascript继承机制实例详解
Nov 20 Javascript
JavaScript获取两个数组交集的方法
Jun 09 Javascript
第七篇Bootstrap表单布局实例代码详解(三种表单布局)
Jun 21 Javascript
JS简单判断滚动条的滚动方向实现方法
Apr 28 Javascript
微信小程序获取手机号授权用户登录功能
Nov 09 Javascript
Vue仿支付宝支付功能
May 25 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
Sep 21 Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
Apr 26 Javascript
小程序外卖订单界面的示例代码
Dec 30 Javascript
如何用JS模拟实现数组的map方法
Jul 30 #Javascript
Vue性能优化的方法
Jul 30 #Javascript
vue props default Array或是Object的正确写法说明
Jul 30 #Javascript
Vue props中Object和Array设置默认值操作
Jul 30 #Javascript
vue prop传值类型检验方式
Jul 30 #Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
Jul 30 #Javascript
vue setInterval 定时器失效的解决方式
Jul 30 #Javascript
Django(9) Tsmoothie(1) reduce(2) TextInputLayout(1) 短信验证码(1) dockerfile(1) Selenium(1) EditText(1) filter(1) SQLite3(1)
You might like
基于mysql的bbs设计（四）
2006/10/09 PHP
PHP如何解决网站大流量与高并发的问题
2011/06/25 PHP
PHP异步调用socket实现代码
2012/01/12 PHP
PHP数据库链接类(PDO+Access)实例分享
2013/12/05 PHP
php实现文件编码批量转换
2014/03/10 PHP
ThinkPHP调用百度翻译类实现在线翻译
2014/06/26 PHP
分享一个Laravel好用的Cache宏
2015/03/02 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
PHP调用接口用post方法传送json数据的实例
2018/05/31 PHP
eval与window.eval的差别分析
2011/03/17 Javascript
利用JS自动打开页面上链接的实现代码
2011/09/25 Javascript
javascript 3d 逐侦产品展示(核心精简)
2014/03/26 Javascript
js滑动提示效果代码分享
2016/03/10 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
2017/04/02 jQuery
JavaScript中splice与slice的区别
2017/05/09 Javascript
angular-ngSanitize模块-$sanitize服务详解
2017/06/13 Javascript
node.js将MongoDB数据同步到MySQL的步骤
2017/12/10 Javascript
jQuery中内容过滤器简单用法示例
2018/03/31 jQuery
nodeJS服务器的创建和重新启动的实现方法
2018/05/12 NodeJs
Egg.js 中 AJax 上传文件获取参数的方法
2018/10/10 Javascript
基于js判断浏览器是否支持webGL
2020/04/18 Javascript
[56:48]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
使用Python编写Linux系统守护进程实例
2015/02/03 Python
总结Python编程中三条常用的技巧
2015/05/11 Python
Python 由字符串函数名得到对应的函数(实例讲解)
2017/08/10 Python
Python基于mysql实现学生管理系统
2019/02/21 Python
Pytorch之保存读取模型实例
2019/12/30 Python
python 解压、复制、删除 文件的实例代码
2020/02/26 Python
详解用Pytest+Allure生成漂亮的HTML图形化测试报告
2020/03/31 Python
Django media static外部访问Django中的图片设置教程
2020/04/07 Python
TensorFlow保存TensorBoard图像操作
2020/06/23 Python
python爬虫线程池案例详解(梨视频短视频爬取)
2021/02/20 Python
你常见到的runtime exception
2016/09/05 面试题
售后主管岗位职责
2013/12/08 职场文书
考试保密承诺书
2014/08/30 职场文书
《揠苗助长》教学反思
2016/02/20 职场文书