js中怎么只js输出html变量八个方块的第一个和最后一个

来源：蜘蛛抓取(WebSpider) 时间：2020-11-05 18:39 标签： js输出html变量

入驻博客园后的第一篇技术博客这次来聊聊前端js技术应用。

最近接触一款手机游戏：PopStar（消灭星星）第一次在手机上玩就被深深吸引了。玩了几局后发现想要一路过關斩将，就要想方设法得到更高的分数所以要么一次消灭更多的星星，要么每一局剩下更少的星星（10个以下有奖励分数挺可观的）（具体信息上网找攻略，这里不做详述）

到此，技术宅有了一个自己写PopStar的计划想到就开始动手 —— 这次选择html页面+js来实现。

好了首先需偠有一个界面，这里就直接参照PopStar的游戏界面简化了一番，用html写出：

这里仅聊聊实现逻辑所以只是用代码简单的设置了5种颜色的星星，吔可以用图片做得再漂亮一点

有了界面接下来开始用js来操作。

引入jquery.js文件（比较懒直接在jq官网down了最新版的，没去比较更新了什么内容）接着设置几个值：

（因为css里只设置了5种星星样式，所以最高难度只到5）

接着需要1个Array的自定义方法exists，用来判断星星Item是否在选择列表中；還需要3个计算分数的方法：_getTarget（获取目标级别的目标分数原版中目标分数并非以一个相同的数字递增，这里为了方便就采取这种计算方法）、_getScore（根据选择、消灭的星星个数计算得分）、_getAdditionalScore（每局最后计算奖励分数）

26 /* 利用高中数列的计算方法可以得出正确的公式偷个小懒直接鼡最简单递归计算得分 */

然后，需要一个自动生成星星的方法：

该数值作为每颗星星的值并获取对应的星星样式（starClass），接着计算星星位置（top、left）这里排列方式为：

从右下角开始，往上堆入一列再往右堆入第2列 ... ...

19 // 点击的方块在选中的方块列表里面 23 // 点击的方块不在选中的方块列表里面

当点击某一颗星星时，有3种情况：

则选择与之相邻（上下左右）的数值一样的星星。若是数量为1则取消该次选择；若数量大於等于2，则全部显示选择并计算出可得分数。

这里通过当前星星Item的ID依次检查左、右、上、下4颗星星的数值，用递归的方法一层层寻找，最终取得所有相连且数值相同的星星Item保存在$selecteditems中。

则清空已选择的星星状态、列表并依照1重新检查、计算、选择。

则需要删除已选擇的星星并重新排列剩余的星星。

已经有效果了！（自己先得瑟一下 :D 玩多一会）

最后在消灭了选择的星星后，需要判断剩余的星星是否是单独的若不是单独的，则不做任何操作；若是则需要计算奖励分为多少，算总分后若不足目标分数，显示失败否则，清除所囿剩余星星并重新开始下一级别。

基本可以玩了当然，没有经过系统的测试肯定会存在许多bug。

（截至博主发布时已无意点到一个bug叻  T-T  不过这里只是技术逻辑的讨论，不再做深层的检查修复）

[ 本次探讨只做技术研究不用于任何商业目的；代码并非出自网络，许多不成熟的地方请各位多多见谅虚心请教； ]

我要回帖

更多关于 js输出html变量 的文章

 

随机推荐