前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JavaScript成语消消乐

JavaScript成语消消乐

作者头像
Javanx
发布2019-09-05 18:42:37
1.5K0
发布2019-09-05 18:42:37
举报
文章被收录于专栏:web秀web秀web秀

一、预览

JavaScript成语消消乐
JavaScript成语消消乐

二、开发步骤

基本面向过程的思想。没有面向对象的部分。

准备好成语库。db.js 选出每一关的成语。 对成语进行乱序。 初始化表格的同时,将单个字放到每个单元格的按钮上展示。 对tbody进行点击事件的监听。事件函数中获取btn。用变量记录选中的文字。 判断得分、判断下一关、判断游戏结束(成语库毕竟用数组来保存。成语数量有限。)

三、代码

只有两个文件:index.html和db.js

核心方法:

1、 每关成语,返回乱序前的拼接字符串,并存储本关成语数组

var dbtxt = "";
var start = this.current_index * this.every_words;
var end = start + this.every_words <= this.dbs.length ? start + this.every_words : this.dbs.length;
this.current_words = end - start;
if (this.current_words <= 0) {
    end = 0;
    this.current_words = 0;
}
for (var i = start; i < end; i++) {
    dbtxt += this.dbs[i];
    this.chooseData.push(this.dbs[i]);
}
return dbtxt; //返回乱序前的拼接字符串。

2、 打乱成语字符串

var luanxu = [];
while (dbtxt.length > 0) {
    var index = parseInt(Math.random() * dbtxt.length);
    luanxu.push(dbtxt.charAt(index));
    dbtxt = dbtxt.substring(0, index) + dbtxt.substring(index + 1, dbtxt.length);
}
return luanxu; //返回乱序后的字符。

3、加载界面

var len = 0;
var tbody = document.getElementById("mytbody");
tbody.innerHTML = ""; //清空tbody。
var tbodyhtml = "";
for (var i = 0; i < XXL.current_words; i++) {
    var tr = "<tr>";
    for (var j = 0; j < 4; j++) {
        var td = "<td>";
        td += ("<button type='button'>" + words[len++] + "</button>");
        td += "</td>";
        tr += td;
    }
    tr += "</tr>";
    tbodyhtml += tr;
}
tbody.innerHTML = tbodyhtml;

4、 检查点击成语是否匹配

//判断选择的成语,是否能够组成一个四字成语。
var find = false; //是否匹配标志位。
for (var i = 0; i < this.chooseData.length; i++) {
      if (this.recordChooseText == this.chooseData[i]) {
           find = true;
           break;
       }
}

5、 匹配后消除正常的

for (var i = 0; i < XXL.recordChooseBtn.length; i++) {
     XXL.recordChooseBtn[i].remove();
}

db.js文件如下

var listWords=["金蝉脱壳","百里挑一","金玉满堂","背水一战","霸王别姬", ....];

演示程序:演示代码 源码下载:源码下载

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018年9月30日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、预览
  • 二、开发步骤
  • 三、代码
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档