0048 JavaScript编程实现算24点游戏

上节课在网页上使用JavaScript实现了根据输入日期计算星座的程序。
这节课来做一个算24点游戏，主要是练习使用JavaScript来控制网页元素。

程序设计思路

在第1章的教程里面，学习过如何编写算法来计算给出4个1到13之间的数字来求出所有的算出24点的算法。
这节课就不做算法了，来在网页上实现这个游戏。
游戏规则是这样的：网页加载后，现实4个随机数，范围是从1到13之间，可以重复。同时显示4个运算法，加减乘除。
然后在下方显示5种运算次序，然后可以通过点击数字或者运算符，将数字或运算符进行移动，当将一个运算次序填满之后，程序会进行计算，假如结果等于24，则提示回答正确并将分数加1分，同时题目数加1，进入下一道题目。
大致的显示界面是这样的：

3-7-1.jpg

网页元素的边框为红色颜色时，表示该元素被选中了。选中某个元素之后，点击其它空白元素，可以将当前选中的元素移动过去。
如果选中的元素时运算符需要清除，则可以点击运算符元素右侧的清除按钮。
这是因为运算符可以重续选用多个，因此采用此种处理方式。
因此，网页的JavaScript当中，要存储一个当前的元素的代表值。因此需要给每一个元素都指定一个编号，可以如下图一般：

3-7-2.jpg

编写页面显示效果

创建3个文件，get24.html，get24.css，get24.js。
首先来编写网页的内容和相应的显示样式，可以参考前面四则运算器的样式。
同时给每个元素增加onclick="dc(this.id);"事件。
get24.html代码如下：

3-7-3.jpg

3-7-4.jpg

3-7-5.jpg

3-7-6.jpg

get24.css代码如下：

3-7-7.jpg

3-7-8.jpg

3-7-9.jpg

3-7-10.jpg

浏览器打开这个网页：

3-7-11.jpg

可以看到，所有的的显示样式，其中的如果要修改选中元素，则只要在div元素上增加或减少样式selecteddiv即可达到切换选中元素的样式。

编写移动元素处理逻辑

然后来编写JavaScript的代码。
设置一个变量selectedid来存储当前选中的元素id的值，默认为n1。
然后在dc函数中，通过this.id参数可以将不同的div元素的id传递到函数当中，这样就不需要每个div都写一个不同的函数了，使用同样的一个函数，进行同样的逻辑处理，同时也能知道是哪一个div的事件被触发了。
get24.js代码如下：

3-7-12.jpg

3-7-13.jpg

3-7-14.jpg

修改html文件，将所有测试的内容删除，并设置body的onload事件和重新开始按钮onclick事件为initPage函数，设置清除按钮的事件为cleartype函数。
get24.html代码如下：

3-7-15.jpg

3-7-16.jpg

刷新网页：

3-7-17.jpg

可以看到默认第一个数字的边框变成红色了，表示此数字被选中，然后点击第一种运算次序的第一个空白元素：

3-7-18.jpg

可以看到，原始的数字不见了，数字出现在第一种运算次序的第一个空白元素，表示数字被移动过来了。
此时数字被选中状态也跟着移动了，此时如果点击原始的第一个数字的空白元素：

3-7-19.jpg

可以看到，数字又被移动回去了。通过这样的方式就可以移动数字。
此时，如果被选中元素是原始数字第1个，点击原始数字第2个，就可以切换选中的焦点到第2个了。

3-7-20.jpg

也就是，假如选中一个元素，再去选第二个元素，假如第二个元素是空白则移动第一个元素的值到第二个元素，假如第二个元素不是空白有数值的话，就是移动选中的焦点。
有一种特殊情况要处理，假如焦点在某个元素上，此时点击这个元素，则什么事情也不需要做。

来看看如果是运算符该如何处理。
首先要明确数字和运算符是不同类的元素，互相之间不能移动内容。
然后运算符的移动和数字不同，因为数字是必须使用且只能使用一次，但是运算符却是可以重复使用的。比如三个运算符都可以是加号。
因此，将运算符移动到空白运算符位置之后，原始的运算符内容仍然要保留。
如果要删除已经设置的运算符，可以点击原始运算符右侧的清除按钮，这样做起来比较方便。
因此需要判断如果是运算符元素，则清除按钮才起作用。

首先选中一个运算符加号：

3-7-21.jpg

然后，点击第一种运算次序的第一个运算符空白元素：

3-7-22.jpg

可以看到，空白运算符填好了加号，并且原来的加号还在，可以继续将加号放到其它空白运算符种。
此时在运算符被选中的情况下，点击清除按钮，可以清除这个填好的运算符。

3-7-23.jpg

测试每一种运算次序，看看各种数字和各种运算符的移动是否正常。

增加随机题目生成代码

前面的处理都是针对网页元素的控制。
接下来编写JavaScript代码，nextSubject函数随机生成4个1到13之间的整数，然后题目数加1。

get24.js代码修改如下：

3-7-24.jpg

get24.html代码删除掉测试的4个值：

3-7-25.jpg

刷新网页：

3-7-26.jpg

可以看到生成了4个随机数，多刷新网页看看是否每次都生成的是不一样的4个数字。

计算验证结果

现在来编写检查按钮的事件。
首先修改html代码增加事件处理函数。检查按钮的事件。
get24.html代码修改如下：

3-7-27.jpg

然后增加JavaScript函数，首先检查5种运算次序，如果全部空白元素都填写好了则进行计算，判断是否等于24。
如果正确，则alert显示正确，然后分数增加，然后调用下一题目函数。
如果错误，则alert显示错误，然后分数不变，调用下一题目函数。
get24.js代码修改如下：

3-7-28.jpg

3-7-29.jpg

3-7-30.jpg

刷新网页，开始测试：

3-7-31.jpg

移动数字到相应位置：

3-7-32.jpg

移动运算符到相应位置：

3-7-33.jpg

然后点击检查按钮：

3-7-34.jpg

显示检查结果是答案正确，点击确定按钮：

3-7-35.jpg

可以看到下一题了，并且分数加1了。
然后移动数字和运算符，故意结果不正确，点击检查按钮：

3-7-36.jpg

看到显示结果不正确，点击确定按钮：

3-7-37.jpg

可以看到下一题了，分数不变。

题目没有答案怎么办

持续测试下去，会碰到一种情况，也就是说，给出的4个随机数非常不巧，加减乘除怎么计算也算不出24点，那么这种情况怎么办呢？

有2种解决办法，一种办法是在生成4个随机数之后就写一个函数去计算能不能得到一个解法算出24，如果没有解法，则重新生成另外4个随机数，直到一定有解法，才显示到界面上。
另外一种办法是在页面上增加一个按钮，无答案，当用户发现没有解法时，点击这个按钮，此时程序去计算是否有解法，如果有解法则说明用户回答错误，则显示回答错误，不加分进入下一题，如果确实没有解法，则说明用户回答正确，则显示回答正确，加分并进入下一题。

由于这里学习的重点是如何使用JavaScript来控制网页元素，这里的求算24点解法的逻辑在第1章里面有说明，这里就不深入讲解了。
大家可以作为课后练习将这块内容自行完成。