编程 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 相关文章推荐

javascript中的有名函数和无名函数

Oct 17 Javascript

jQuery Lightbox 图片展示插件使用说明

Apr 25 Javascript

快速排序 php与javascript的不同之处

Feb 22 Javascript

jq选项卡鼠标延迟的插件实例

May 13 Javascript

jQuery 三击事件实现代码

Sep 11 Javascript

php+js实现倒计时功能

Jun 02 Javascript

JS实现类似百叶窗下拉菜单效果

Dec 30 Javascript

Vue数据驱动模拟实现5

Jan 13 Javascript

在js代码拼接dom对象到页面上的模板总结

Oct 21 Javascript

layui实现下拉框三级联动

Jul 26 Javascript

使用原生JS实现滚轮翻页效果的示例代码

May 31 Javascript

vue实现一个获取按键展示快捷键效果的Input组件

Jan 13 Vue.js

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

You might like

Zend引擎的发展 [15]

2006/10/09 PHP

PHP缓存技术的使用说明

2011/08/06 PHP

php 生成自动创建文件夹并上传文件的示例代码

2014/03/07 PHP

两个php日期控制类实例

2014/12/09 PHP

PHP7下协程的实现方法详解

2017/12/17 PHP

php设计模式之策略模式实例分析【星际争霸游戏案例】

2020/03/26 PHP

PHP时间相关常用函数用法示例

2020/06/03 PHP

javascript实现原生ajax的几种方法介绍

2013/09/21 Javascript

让复选框只能选择一项的方法

2013/10/08 Javascript

ie中js创建checkbox默认选中问题探讨

2013/10/21 Javascript

JavaScript实现页面无操作倒计时退出

2016/10/22 Javascript

Django与Vue语法的冲突问题完美解决方法

2017/12/14 Javascript

基于vue监听滚动事件实现锚点链接平滑滚动的方法

2018/01/17 Javascript

angular 实时监听input框value值的变化触发函数方法

2018/08/31 Javascript

angular5 子组件监听父组件传入值的变化方法

2018/09/30 Javascript

es6函数之箭头函数用法实例详解

2020/04/25 Javascript

vue3弹出层V3Popup实例详解

2021/01/04 Vue.js

Python实现list反转实例汇总

2014/11/11 Python

讲解Python中for循环下的索引变量的作用域

2015/04/15 Python

Python实现简易端口扫描器代码实例

2017/03/15 Python

Python数据结构之顺序表的实现代码示例

2017/11/15 Python

Python实现的选择排序算法示例

2017/11/29 Python

在macOS上搭建python环境的实现方法

2019/08/13 Python

python图形界面开发之wxPython树控件使用方法详解

2020/02/24 Python

Python3 shelve对象持久存储原理详解

2020/03/23 Python

python 检测图片是否有马赛克

2020/12/01 Python

Space NK英国站：英国热门美妆网站

2017/12/11 全球购物

来自世界各地的优质葡萄酒：VineShop24

2018/07/09 全球购物

物业门卫岗位职责

2013/12/28 职场文书

户外婚礼策划方案

2014/02/08 职场文书

工程师岗位职责规定

2014/02/26 职场文书

小学生竞选班干部演讲稿

2014/04/24 职场文书

在职党员进社区活动总结

2014/07/05 职场文书

党的群众路线教育实践活动心得体会（医院）

2014/11/03 职场文书

库房管理员岗位职责

2015/02/12 职场文书

详解Nginx的超时keeplive_timeout配置步骤

2022/05/25 Servers