基于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 相关文章推荐
js里的prototype使用示例
Nov 19 Javascript
JavaScript中的apply()方法和call()方法使用介绍
Jul 25 Javascript
js跳转页面方法实现汇总
Feb 11 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
Mar 18 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
Jun 16 Javascript
jQuery插件windowScroll实现单屏滚动特效
Jul 14 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
Sep 07 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
Nov 29 Javascript
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
Vue 实现展开折叠效果的示例代码
Aug 27 Javascript
小谈angular ng deploy的实现
Apr 07 Javascript
js调用网络摄像头的方法
Dec 05 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数组函数序列之asort() - 对数组的元素值进行升序排序,保持索引关系
2011/11/02 PHP
WordPress网站性能优化指南
2015/11/18 PHP
PHP设计模式之观察者模式实例
2016/02/22 PHP
JQuery判断子iframe何时加载完成解决方案
2013/08/20 Javascript
jQuery实现两款有动画功能的导航菜单代码
2015/09/16 Javascript
BootStrap glyphicon图标无法显示的解决方法
2016/09/06 Javascript
微信小程序  checkbox组件详解及简单实例
2017/01/10 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
2017/02/05 Javascript
js实现拖拽功能
2017/03/01 Javascript
为你的微信小程序体积瘦身详解
2017/05/20 Javascript
vue.js实现刷新当前页面的方法教程
2017/07/05 Javascript
ReactNative 之FlatList使用及踩坑封装总结
2017/11/29 Javascript
在Vue组件中使用 TypeScript的方法
2018/02/28 Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
2018/09/29 Javascript
[01:33]真香警告!DOTA2勇士令状不朽珍藏Ⅱ饰品欣赏
2018/06/26 DOTA
python读取csv文件示例(python操作csv)
2014/03/11 Python
Python判断直线和矩形是否相交的方法
2015/07/14 Python
python使用knn实现特征向量分类
2018/12/26 Python
python操作kafka实践的示例代码
2019/06/19 Python
Python线程threading模块用法详解
2020/02/26 Python
Python如何使用正则表达式爬取京东商品信息
2020/06/01 Python
记一次python 爬虫爬取深圳租房信息的过程及遇到的问题
2020/11/24 Python
英国票务网站:Ticketmaster英国
2018/08/27 全球购物
彪马日本官网:PUMA日本
2019/01/31 全球购物
千禧酒店及度假村官方网站:Millennium Hotels and Resorts
2019/05/10 全球购物
某公司C#程序员面试题笔试题
2014/05/26 面试题
大学生就业推荐信范文
2013/11/29 职场文书
关于逃课的检讨书
2014/01/23 职场文书
住院医师规范化培训实施方案
2014/06/12 职场文书
垃圾桶标语
2014/06/24 职场文书
技术经济专业求职信
2014/09/03 职场文书
防暑降温通知书
2015/04/27 职场文书
Nginx实现高可用集群构建(Keepalived+Haproxy+Nginx)
2021/05/27 Servers
再也不用花钱买漫画!Python爬取某漫画的脚本及源码
2021/06/09 Python
Pandas-DataFrame知识点汇总
2022/03/16 Python
Python 文字识别
2022/05/11 Python