PHP代码猜数字游戏,基于JavaScript实现猜数字游戏代码实例
环境
vscode 1.46
Microsoft Edge 83
示例
以下内容为了解和熟悉 JavaScript,不需要理解,能够复制粘贴并正确运行即可。
新建网页模板
在 vscode 中新建一个 index.html 文件,然后输入以下内容。
猜数字游戏
html {
font-family: sans-serif;
}
body {
width: 50%;
max-width: 800px;
min-width: 480px;
margin: 0 auto;
}
.lastResult {
color: white;
padding: 3px;
}
猜数字游戏
我刚才随机选定了一个100以内的自然数。看你能否在 10 次以内猜中它。每次我都会告诉你所猜的结果是高了还是低了。
请猜数:
// 开始编写 JavaScript 代码
定义变量
首先将需要使用的变量都定义出来。
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;
}
浏览器打开
用浏览器打开刚刚编写的程序,试试游戏是否能够正常运行。
附录
源码
猜数字游戏
html {
font-family: sans-serif;
}
body {
width: 50%;
max-width: 800px;
min-width: 480px;
margin: 0 auto;
}
.lastResult {
color: white;
padding: 3px;
}
猜数字游戏
我刚才随机选定了一个100以内的自然数。看你能否在 10 次以内猜中它。每次我都会告诉你所猜的结果是高了还是低了。
请猜数:
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;
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
PHP代码猜数字游戏,基于JavaScript实现猜数字游戏代码实例相关推荐
- 曼哈顿距离java实现_基于javascript实现获取最短路径算法代码实例
这篇文章主要介绍了基于javascript实现获取最短路径算法代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 代码如下 //A算法 自动寻路 ...
- python扫雷的代码及原理_基于Python实现的扫雷游戏实例代码
摘要:这篇Python开发技术栏目下的"基于Python实现的扫雷游戏实例代码",介绍的技术点是"Python实现.Python.实例代码.扫雷游戏.扫雷.游戏" ...
- 基于javascript的div浮动效果代码
今天接到一个添加网页图片浮动的任务,花了一中午的时间进行了学习和编码,实现了两种方式的图片浮动,这里把遇到的问题和解决的方法做一个总结. 两种实现分别为:1)Z字形浮动 2)反弹浮动: 具体来说,需 ...
- 基于JavaScript和VUE数独游戏设计与实现
全套资料下载地址:https://download.csdn.net/download/sheziqiong/85595640 全套资料下载地址:https://download.csdn.net/d ...
- 两行代码完成特征工程-基于Python的特征自动化选择代码(提供下载)
本文介绍一个特征选择神器:特征选择器是用于减少机器学习数据集的维数的工具,可以傻瓜式地进行特征选择,两行代码即可搞定!! 来源:Will Koehrsen 代码整理及注释翻译:黄海广 代码和数据下载地 ...
- html5 websocket 游戏,基于Websocket的H5在线游戏对战平台
基于Websocket的H5在线游戏对战平台 摘要 随着计算机的普及与互联网技术的发展,人们的生活方式发生了巨大的变化.基于B/S(Browser/Server)结构的系统不需要用户安装客户端软件,它 ...
- 基于c语言的小游戏,--基于C语言的小游戏设计.doc
--基于C语言的小游戏设计.doc 级丌 密公 本科生毕业(学位)论文 基于c语言的爪游软设计 李俊佶 (2009061322) TOC \o "1-5" \h \z 指导教师姓名 ...
- html js制作高级拼图,基于JavaScript实现十五拼图代码实例
顾名思义,十五拼图就是将游戏画面中的数字从上到下,从左到右按顺序从1到15排列下来,看起来很简单,但是玩起来不容易. css代码 body { font-family: cursive; font-s ...
- java 3 3数字拼图,基于Vue.js实现数字拼图游戏
先来看看效果图: 功能分析 当然玩归玩,作为一名Vue爱好者,我们理应深入游戏内部,一探代码的实现.接下来我们就先来分析一下要完成这样的一个游戏,主要需要实现哪些功能.下面我就直接将此实例的功能点罗列 ...
最新文章
- 扩展LLVM:添加指令、内部函数、类型等
- 3142:[HNOI2013]数列 - BZOJ
- 【已解决】[Error] reference to ‘min‘ is ambiguous
- 2015-03-19 Opportunity order by implementation detail
- 【小试牛刀】短信验证码(随机数)的生成实现
- 项目管理(7):备战pmp
- 7 QM配置-质量计划配置-定义检验方法的编号范围
- 解决cannot import name ‘finance‘ from ‘matplotlib‘报错与问题解析
- 程序安装mysql数据库,安装mysql数据库
- [笔记]使用API函数 GetACP 获取Windows系统当前代码页
- Python数据可视化库汇总整理
- html5 游戏 圈 猫,HTML5捉猫游戏
- 全志F1C100S/F1C200S学习笔记(12)——问题解决汇总
- RTB广告大数据时代 人才奇缺培养迫在眉睫
- Java实现 for循环输出空心的菱形 在main方法中调用printHollowRhombus()方法完成10行的空心菱形输出,其中 printHollo
- 3.6 Meterpreter 键盘记录
- 三万字 | Kafka 知识体系保姆级教程宝典
- int, long int, long long int, _int64範圍
- USACO Monthly Expense
- 在微信小程序中如何引入iconfont