十分钟学会制作JS猜数字游戏

2018年2月11日21:36:09 发表评论 20

我在看JavaScript的教程的时候偶然发现了用JS实现一个猜数字功能的小游戏,自己尝试着不看教程写了一遍,发现还是存在一些不会的东西,尽管这是一个很简单的JS猜数字的小游戏,可见我的JS水平比小白阶段也好不到哪里去,但是我仍然在进步,现在我已经完成了这个JS猜数字的小游戏,感兴趣的接下去看看我是如何实现的。

十分钟学会制作JS猜数字游戏

一、JS猜数字游戏预览

二、游戏思路

试着玩下上面的猜数字游戏,你可以发现下面这些游戏思路:

  1. 随机生成1-100的整数
  2. 记录玩家每一次猜的数字
  3. 为玩家提供一种猜数字方法
  4. 检测提交的数字是否正确:(1)、如果正确显示祝贺消息,阻止玩家输入,显示重新开始游戏的按钮(2)、如果错误,告诉玩家是大了还是小了,并且允许他们猜测下一个,将猜测次数加1(3)如果错误并且次数到达10,就结束游戏,阻止玩家输入,显示重新开始的按钮。
  5. 添加一个游戏重置的方法

三、游戏代码

HTML代码

猜数字游戏

请猜1到100的整数:

js代码

var oTxt = document.getElementById('txt');
var oBtn = document.getElementById('btn');
var oHistory = document.querySelector('.history');
var oHint = document.querySelector('.hint');
var oHintSize = document.querySelector('.hint-size');


// 初始化
var number = randomNum(1, 100);
var residue = 10;
var time = 1;	



// 猜数字
function guessNum() {
	var num = Number(oTxt.value);
	console.log(number);
	if(time === 1) {
		oHistory.textContent = "你猜的历史记录:"
	}
	oHistory.textContent += num + ' ';

	if(num != 0 || !isNaN(oTxt.value)) {
		// 检测数字是否正确
		if(num === number) {
			oHint.innerHTML = '你猜对了!';
			oHint.style.background = 'blue';
			oHintSize.textContent = '';
			gameOver();

		}
		else if(time === 10) {
			oHint.innerHTML = '!!!GAME OVER!!!';
			oHint.style.background = "yellow";
			gameOver();
		}
		else {
			
			oHint.innerHTML = "错误!";
			oHint.style.background = "red";

			if(num > number) {
				oHintSize.innerHTML = "你输入的数字大了!"
			}
			else if(num < number) {
				oHintSize.innerHTML = "你输入的数字小了!"
			}
		}
	}
	else {
		alert('请输入正确的数字');
	}
	console.log(time);
	time++;
	oTxt.value = '';
	oTxt.focus();
}
oBtn.addEventListener('click', guessNum);

// 游戏结束
function gameOver() {
	oTxt.disabled = true;
	oBtn.disabled = true;
	var resetBtn = document.createElement('button');
	resetBtn.className = 'reset';
	resetBtn.innerHTML = 'restart';
	document.body.appendChild(resetBtn);
	resetBtn.addEventListener('click', resetGame);
}

// 游戏重置
function resetGame() {
	var oReset = document.querySelector('.reset');

	time = 1;
	document.body.removeChild(oReset);
	oHistory.textContent = '';
	oHint.textContent = '';
	oHintSize.textContent = '';

	oTxt.disabled = false;
	oBtn.disabled = false;
	oHistory.style.backgroundColor = 'white';
	number = randomNum(1, 100);
}

// 随机生成n-m的随机整数
function randomNum(n, m) {
	var c = m-n+1;
	return Math.floor(Math.random() * c + n);
}


这个小小的JS猜数字游戏主要介绍了几个重要的知识点,函数声明、事件绑定、判断语句、DOM操作等,程序最难的不是语法,而是编程思想,我们写程序前一定整理下自己的思维,写下程序的整个实现流程,这样写出来就不会出现卡壳现象了。

猿梦

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: