【JavaScript】猜数字小游戏

最新推荐文章于 2024-04-26 16:47:03 发布

1024A

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量1.4k

点赞数

分类专栏： JavaScript 前端文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_58309844/article/details/126185037

版权

前端同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

JavaScript

15 篇文章 1 订阅

订阅专栏

如果输入的数字比随机的数字大，会在页面里输出“猜大了”,若比随机数字小，会在页面里输出"猜小了"，否则，就是"猜对了"，会出现对应提醒。

一、游戏简介

猜数字(又称 Bulls and Cows )是一种古老的的密码破译类益智类小游戏，起源于20世纪中期，一般由两个人或多人玩，也可以由一个人和电脑玩。

二、游戏规则

在输入框中输入你猜的数字，然后会和系统里随机的数字进行比较返回比较结果，如果你手动输入的数字比随机的数字大，会在页面里输出“猜大了”,若比随机数字小，会在页面里输出"猜小了"，否则，就是"猜对了"，会出现对应提醒。如果猜对的话，会出现之前隐藏的一个按钮，提醒你是否继续游戏，点击代表继续游戏，小按钮也会消失。

三、游戏设计原理

random生成一个随机数作为被猜数，然后input输入一个数字，用if与被猜数比较，print输出猜大或猜小，如果没有猜对便继续重新输出一个缩小范围内的数字继续猜。

四、用代码实现

1.代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#btn2{
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="box"></div><br>
		<input type="text" id="text" placeholder="请输入你所猜到的数字" />
		<button id="btn">猜一猜</button>
		<button id="btn2">继续游戏</button>
		<script>
			var num1 = Math.floor(Math.random() * 100);
			console.log(num1);
			var _box = document.querySelector("#box");
			var _btn = document.querySelector("#btn");
			var _text = document.querySelector("#text");
			var _btn2 = document.querySelector("#btn2");
			_btn.onclick = function() {
				if (_text.value == num1) {
					_box.innerHTML = "猜对了";
					_btn2.style.display = "block";
				} else if (_text.value > num1) {
					_box.innerHTML = "猜大了";
				} else {
					_box.innerHTML = "猜小了";
				}
			}
			_btn2.onclick = function() {
				_box.innerHTML = "";
				_text.value = "";
				num1= Math.floor(Math.random() * 10);
				console.log(num1);
				_btn2.style.display = "none";
			}
		</script>
	</body>
</html>