灵通163百科在线-实用的手机,证券免费资源网站

您现在的位置:首页 > K-JAVA资源 > JAVA游戏 >

0048 JavaScript编程实现算24点游戏

教程来源:www.lt163.com     点击数:     更新时间:2017-12-09 12:33

上节课在网页上使用Java实现了根据输入日期计算星座的程序。

这节课来做一个算24点游戏,主要是练习使用Java来控制网页元素。

程序设计思路

在第1章的教程里面,学习过如何编写算法来计算给出4个1到13之间的数字来求出所有的算出24点的算法。

这节课就不做算法了,来在网页上实现这个游戏。

游戏规则是这样的:网页加载后,显示4个随机数,范围是从1到13之间,可以重复。同时显示4个运算法,加减乘除。

然后在下方显示5种运算次序,然后可以通过点击数字或者运算符,将数字或运算符进行移动,当将一个运算次序填满之后,程序会进行计算,假如结果等于24,则提示回答正确并将分数加1分,同时题目数加1,进入下一道题目。

大致的显示界面是这样的:

网页元素的边框为红色颜色时,表示该元素被选中了。选中某个元素之后,点击其它空白元素,可以将当前选中的元素移动过去。

如果选中的元素时运算符需要清除,则可以点击运算符元素右侧的清除按钮。

这是因为运算符可以重续选用多个,因此采用此种处理方式。

因此,网页的Java当中,要存储一个当前的元素的代表值。因此需要给每一个元素都指定一个编号,可以如下图一般:

编写页面显示效果

创建3个文件,get24.html,get24.css,get24.js。

首先来编写网页的内容和相应的显示样式,可以参考前面四则运算器的样式。

同时给每个元素增加onclick="dc(this.id);"事件。

get24.html代码如下:

get24.css代码如下:

浏览器打开这个网页:

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

编写移动元素处理逻辑

然后来编写Java的代码。

设置一个变量selectedid来存储当前选中的元素id的值,默认为n1。

然后在dc函数中,通过this.id参数可以将不同的div元素的id传递到函数当中,这样就不需要每个div都写一个不同的函数了,使用同样的一个函数,进行同样的逻辑处理,同时也能知道是哪一个div的事件被触发了。

get24.js代码如下:

修改html文件,将所有测试的内容删除,并设置body的事件和重新开始按钮onclick事件为initPage函数,设置清除按钮的事件为cleartype函数。

get24.html代码如下:

刷新网页:

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

可以看到,原始的数字不见了,数字出现在第一种运算次序的第一个空白元素,表示数字被移动过来了。

此时数字被选中状态也跟着移动了,此时如果点击原始的第一个数字的空白元素:

可以看到,数字又被移动回去了。通过这样的方式就可以移动数字。

此时,如果被选中元素是原始数字第1个,点击原始数字第2个,就可以切换选中的焦点到第2个了。

没有相关教程
UC浏览器 最先进实用的手机端浏览器,最大限度节省页面浏览流量,点击下载
老虎地图 绿色纯免费GPS定位省流量的最佳手机地图,点击下载
网秦手机安全系列 手机杀毒防盗,防火墙,构建手机安全,点击进入
塞班精品游戏 最流行最给力的塞班S60免签名名精品游戏合集,点击进入
阿里通 手机上轻松拨打网络电话和收发短信,高音质超省话费,资费标准
爱科手机电话 国内最好的手机网络电话领先品牌,价格低廉,点击查看
愤怒的小鸟2 全民挑战超流行休闲游戏力推新作-愤怒的小鸟2,点击查看
魔力旺旺 淘宝卖家首选的交易工具

资源下载排行
文章阅读排行