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

checkbox 复选框不能为空

Jul 11 Javascript

jquery入门—编写一个导航条(可伸缩)

Jan 07 Javascript

解析Jquery的LigerUI如何实现文件上传

Jul 09 Javascript

JS实现的一个简单的Autocomplete自动完成例子

Apr 16 Javascript

jQuery学习笔记之2个小技巧

Jan 19 Javascript

javascript鼠标右键菜单自定义效果

Dec 08 Javascript

D3.js中强制异步文件读取同步的几种方法

Feb 06 Javascript

利用forever和pm2部署node.js项目过程

May 10 Javascript

利用require.js与angular搭建spa应用的方法实例

Jul 19 Javascript

微信小程序蓝牙连接小票打印机实例代码详解

Jun 03 Javascript

p5.js码绘“跳动的小正方形”的实现代码

Oct 22 Javascript

vue页面更新patch的实现示例

Mar 25 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

You might like

深入php常用函数的使用汇总

2013/06/08 PHP

php实现数组筛选奇数和偶数示例

2014/04/11 PHP

DEDE实现转跳属性文档在模板上调用出转跳地址

2016/11/04 PHP

Yii框架应用组件用法实例分析

2020/05/15 PHP

javascript eval和JSON之间的联系

2009/12/31 Javascript

jquery的extend和fn.extend的使用说明

2011/01/09 Javascript

JavaScript转换农历类实现及调用方法

2013/01/27 Javascript

jquery的相对父元素和相对文档定位示例代码

2013/08/02 Javascript

jquery网页元素拖拽插件效果及实现

2013/08/05 Javascript

JavaScript实现重置表单（reset）的方法

2015/04/02 Javascript

使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效

2015/09/24 Javascript

Nodejs下DNS缓存问题浅析

2016/11/16 NodeJs

关于Vue.js一些问题和思考学习笔记（2）

2016/12/02 Javascript

详解Angular 4.x Injector

2017/05/04 Javascript

在vue.js中使用JSZip实现在前端解压文件的方法

2018/09/05 Javascript

jquery实现商品sku多属性选择功能（商品详情页）

2019/12/20 jQuery

Vuex模块化应用实践示例

2020/02/03 Javascript

如何基于js判断浏览器版本

2020/02/20 Javascript

Vue 中 template 有且只能一个 root的原因解析(源码分析)

2020/04/11 Javascript

浅析vue中的nextTick

2020/12/28 Vue.js

详解阿里Node.js技术文档之process模块学习指南

2021/01/04 Javascript

Python中使用bidict模块双向字典结构的奇技淫巧

2016/07/12 Python

Python使用progressbar模块实现的显示进度条功能

2018/05/31 Python

Python 实现子类获取父类的类成员方法

2019/01/11 Python

django写用户登录判定并跳转制定页面的实例

2019/08/21 Python

python实现简单图书管理系统

2019/11/22 Python

基于Python编写一个计算器程序,实现简单的加减乘除和取余二元运算

2020/08/05 Python

基于PyInstaller各参数的含义说明

2021/03/04 Python

CSS3近阶段篇之酷炫的3D旋转透视

2016/04/28 HTML / CSS

图解CSS3制作圆环形进度条的实例教程

2016/05/26 HTML / CSS

html5的画布canvas——画出弧线、旋转的图形实例代码+效果图

2013/06/09 HTML / CSS

美国女鞋品牌：naturalizer（娜然）

2016/08/01 全球购物

瑜伽服装品牌：露露柠檬（lululemon athletica）

2017/06/04 全球购物

瑞士男士时尚网上商店：Babista

2020/05/14 全球购物

卫生保健工作总结2015

2015/05/18 职场文书

Pytorch中的数据集划分&正则化方法

2021/05/27 Python