编程 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[js]获取url参数的代码

Oct 17 Javascript

javascript类继承机制的原理分析

Sep 12 Javascript

围观tangram js库

Dec 28 Javascript

AngularJS入门教程之学习环境搭建

Dec 06 Javascript

JavaScript内存管理介绍

Mar 13 Javascript

详谈LABJS按需动态加载js文件

May 07 Javascript

js操作table元素实现表格行列新增、删除技巧总结

Nov 18 Javascript

Vue.js中数组变动的检测详解

Oct 12 Javascript

Angular4实现动态添加删除表单输入框功能

Aug 11 Javascript

React Native 截屏组件的示例代码

Dec 06 Javascript

vue 框架下自定义滚动条(easyscroll)实现方法

Aug 29 Javascript

基于PHP pthreads实现多线程代码实例

Jun 24 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

我的论坛源代码(六)

2006/10/09 PHP

PHP文章采集URL补全函数(FormatUrl)

2012/08/02 PHP

table标签的结构与合并单元格的实现方法

2013/07/24 PHP

php 创建以UNIX时间戳命名的文件夹(示例代码)

2014/03/08 PHP

php rsa加密解密使用详解

2015/01/14 PHP

支持png透明图片的php生成缩略图类分享

2015/02/08 PHP

基于PHP实现假装商品限时抢购繁忙的效果

2015/10/16 PHP

laravel 中如何使用ajax和vue总结

2017/08/16 PHP

PHP中用Trait封装单例模式的实现

2019/12/18 PHP

IE JS无提示关闭窗口不提示的方法

2010/04/29 Javascript

始终在屏幕中间显示Div的代码(css+js)

2011/03/10 Javascript

js Dialog 实践分享

2012/10/22 Javascript

jQuery对Select的操作大集合(收藏)

2013/12/28 Javascript

jquery中的on方法使用介绍

2013/12/29 Javascript

JavaScript函数参数使用带参数名的方式赋值传入的方法

2015/03/19 Javascript

jQuery简单实现验证邮箱格式

2015/07/15 Javascript

AngularJs定制样式插入到ueditor中的问题小结

2016/08/01 Javascript

微信小程序 form组件详解

2016/10/25 Javascript

js实现用户输入的小写字母自动转大写字母的方法

2017/01/21 Javascript

用node-webkit把web应用打包成桌面应用(windows环境)

2018/02/01 Javascript

详解ECMAScript2019/ES10新属性

2019/12/06 Javascript

JS实现容器模块左右拖动效果

2020/01/14 Javascript

uni-app微信小程序登录授权的实现

2020/05/22 Javascript

python生成验证码图片代码分享

2016/01/28 Python

解析Python中的eval()、exec()及其相关函数

2017/12/20 Python

Python Web框架之Django框架Model基础详解

2019/08/16 Python

python生成器用法实例详解

2019/11/22 Python

python编程进阶之类和对象用法实例分析

2020/02/21 Python

Pytorch - TORCH.NN.INIT 参数初始化的操作

2021/02/27 Python

尤妮佳moony海外旗舰店：日本殿堂级纸尿裤品牌

2018/02/23 全球购物

海量信息软件测试笔试题

2015/08/08 面试题

如何写一个自定义标签

2012/12/28 面试题

求职推荐信范文

2013/12/01 职场文书

给孩子的新年寄语

2014/04/08 职场文书

普通党员个人对照检查材料

2014/09/18 职场文书

2014年银行个人工作总结

2014/12/05 职场文书