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章里面有说明,这里就不深入讲解了。
大家可以作为课后练习将这块内容自行完成。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,189评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,577评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,857评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,703评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,705评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,620评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,995评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,656评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,898评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,639评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,720评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,395评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,982评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,953评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,195评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,907评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,472评论 2 342

推荐阅读更多精彩内容