《head first JavaScript程序设计》三之战舰游戏雏形逻辑

马上就要到过年了，这一段时间也一直没有写，现在放假回家了，发现比上班更忙碌了，趁小家伙没在身边抓紧把这一篇文章更了，年前应该是最后一篇了。

最近一段时间一直都在研究书中的战舰游戏，经过这几天的努力，由原来的逻辑不清晰，到现在能够完全搞懂，并且能够写出另一种逻辑。

书中由浅入深的讲解了如何一步一步的写出初级简单的能够与用户互动的战舰游戏雏形。

刚开始书中说代码有点小毛病，动动脑子看能不能改一下，看了好几天都没看出是哪的错。后来经过不断地摸索与尝试，终于找到毛病并加以改正。反正我感觉应该是这的毛病，如果有专业人员参观后发现毛病欢迎指正，博主一定虚心采纳。

先上源代码：

//首先先定义变量
var location1 = 1; //定义三个数值变量
var location2 = 2;
var location3 = 3;
var guess;//由于是获取用户的输入所以不能指定值
var guesses = 0;//猜测的次数，初始化为0，每猜一次就增加1
var hits = 0;//用户击中战舰的次数，初始化为0
var isSunk = false;

while (isSunk == false) { 
//当此值为false时将一直进行循环，此值为true循环将结束
	guess = prompt("Ready,aim,fire!(enter a number from 0-6:");
//prompt()函数用于获取用户的输入
	if (guess < 0 || guess > 6) {
		alert("Please enter a valid cell number:");
		//如果输入的值大于0，或者小于6的时候，就报警 并返回重新输入即输入值无效的时候
	} else {
//否则即输入有效值之后

		guesses = guesses + 1; //猜测的值将增加1
		if (guess == location1 || guess == location2 || guess == location3) {
			hits = hits + 1;
			alert("HIT");
//如果输入的有效值正好能够与先前定义的值相符，定义的击中次数将增加一，并报警提示
			if (hits == 3) {
				isSunk = true;
				alert("You sank my battleship!!");
				//如果猜对了三次就将isSunk变量赋值为true以结束循环，并报警提示
			}
		} else {
			alert("MISS");
			//如果用户输入的值不能够与定义的值相符，就报警并提示用户MISS，并返回重新获取用户输入
		}
	}
}
var stats = "You took " + guesses + " guesses to sink the battleship, " + 
	"which means your shooting accuracy was " + (3/guesses);
//将用户的战绩显示在屏幕上

alert(stats);

刚开始各种逻辑关系搞不清楚，整段代码理解起来很难，花括号老是搞混。经过不断的练习，慢慢掌握知识点，再写就没那么困难了。

这段代码能够正常显示，但是存在小BUG。
如果运行的话将会发现，这段代码计数存在问题。

原因是逻辑上存在错误，源代码是只有输入有效值才会计数，但是输入的值不满足条件 if(guess < 0 || guess > 6)将会不计数。（目前还没搞明白字符串如何与数值比较的，先留着这个问题。）

只需要将 guesses = guesses + 1;加入到输入错误的条件下即可改善这个问题。

完善后代码如下：

var location1 = 1,location2 = 2, location3 = 3;
var guess,guesses = 0;
var hits = 0,isSunk = false;

while (isSunk == false) {
	guess = prompt("Ready,aim,fire!(enter a number from 0-6:");

	if (guess < 0 || guess > 6) {
		alert("Please enter a valid cell number:");
		guesses = guesses + 1;
	} else {

		guesses = guesses + 1;
		if (guess == location1 || guess == location2 || guess == location3) {
			hits = hits + 1;
			alert("HIT");

			if (hits == 3) {
				isSunk = true;
				alert("You sank my battleship!!");
			}
		} else {
			alert("MISS");
		}
	}
}
var stats = "You took " + guesses + " guesses to sink the battleship, " + 
	"which means your shooting accuracy was " + (3/guesses);

alert(stats);

下面这一段是我参考原代码写出的另一逻辑代码经过实验能够正常运行，不过还是有一个缺陷，F5刷新键无效。这个问题我目前的能力解决不了，以后学的多了会慢慢改善的。

上代码：

var hits = 0;
var guess;
var guesses = 0;
var isSunk = false;

while (isSunk == false) {
        guess = prompt("Ready,aim,fire(enter a number frome 0-6:");

        if (guess >= 0 && guess <= 6) {

                guesses = guesses + 1;
                if (guess == location1 || guess == location2 || guess == location3) {
                        alert("HITS!!");
                        hits = hits + 1;

                        if (hits == 3) {
                                alert("You sank my battleship!!");
                                isSunk = true;
                        } 
                } else {
                        guesses = guesses + 1;
                        alert("MISS!!");
                }
        } else {
                alert("Please enter a valid cell number:");
        }
}
var stat = "You took " + guesses + " guesses to sink the battleship, " +
        "which means you shooting sccuracy was " + (3/guesses);
alert(stat);

下面这段是应用随机数函数Math.random()与Math.floor()函数组合，将随机数加工后写入循环，这样数字每次循环产生的值重复的几率就降低了很多，（每次循环随机数都会不同）增加了游戏的趣味性。顺便完成了书中的作业。

代码：

var hits = 0;
var guess;
var guesses = 0;
var isSunk = false;

while (isSunk == false) {
        var randomLoc = Math.floor(Math.random() * 5);
        var location1 = randomLoc;
        var location2 = location1 + 1;
        var location3 = location2 + 1;
        guess = prompt("Ready,aim,fire(enter a number frome 0-6:");

        if (guess >= 0 && guess <= 6) {

                guesses = guesses + 1;
                if (guess == location1 || guess == location2 || guess == location3) {
                        alert("HITS!!");
                        hits = hits + 1;

                        if (hits == 3) {
                                alert("You sank my battleship!!");
                                isSunk = true;
                        }
                } else {
                        guesses = guesses + 1;
                        alert("MISS!!");
                }
        } else {
                alert("Please enter a valid cell number:");
        }
}
var stat = "You took " + guesses + " guesses to sink the battleship, " +
        "which means you shooting sccuracy was " + (3/guesses);
alert(stat);