停止较大单词的重叠
Stopping overlap for bigger words
在我目前的拼写游戏中,网格是为3个字母的单词设计的。我可以将较大的单词添加到"wordList"(动态创建网格)中,但网格的大小会发生变化,并在较大单词所在的行上重叠。
例如,当添加一个四个字母的单词时,网格会在该行的末尾添加一个额外的单元格,而不是判断该单词不适合该行,并在网格中占据另一个有效的位置。
基本上,我需要网格保持相同的大小,当单词被随机放置时,确定一个允许网格保持6x6的位置,而不是在它们不合适的位置时离开边缘。显然,当添加大于6个字母的单词时,这将不起作用,因为它是6x6,但这应该不是问题,因为我认为我们不会扩展到那么大的单词。
单词是这样通过html添加的。。。
<ul style="display:none;" id="wordlist">
<li data-word="rat"
data-audio="http://www.wav-sounds.com/cartoon/bugsbunny1.wav"
data-pic="http://www.clker.com/cliparts/C/j/X/e/k/D/mouse-md.png">
</li>
</ul>
然后从列表中动态创建网格,如下所示。。。
var listOfWords = [];
var rndWord = [];
var counter = 0;
var ul = document.getElementById("wordlist");
var i;
for (i = 0; i < ul.children.length; ++i) {
listOfWords.push({
"name": ul.children[i].getAttribute("data-word"),
"pic": ul.children[i].getAttribute("data-pic"),
"audio": ul.children[i].getAttribute("data-audio")
});
}
var chosenWords = [];
var copylist = listOfWords.slice();
for (var x = 0; x < ul.children.length; x++) {
var rand = Math.floor(Math.random() * (copylist.length));
chosenWords.push(copylist[rand].name);
copylist.splice(rand, 1);
if (chosenWords.length < 12) {
chosenWords.push(' ');
}
}
var shuffledWords = [];
shuffledWords = chosenWords.sort(function() {
return 0.5 - Math.random()
});
var guesses = {};
var tbl = document.createElement('table');
tbl.className = 'tablestyle';
var wordsPerRow = 2;
for (var i = 0; i < shuffledWords.length - 1; i += wordsPerRow) {
var row = document.createElement('tr');
for (var j = i; j < i + wordsPerRow; ++j) {
var word = shuffledWords[j];
guesses[word] = [];
for (var k = 0; k < word.length; ++k) {
var cell = document.createElement('td');
$(cell).addClass('drop-box').attr('data-word', word).attr('data-letter', word[k]);
cell.textContent = word[k];
row.appendChild(cell);
}
}
tbl.appendChild(row);
}
$(".container").append(tbl);
这是一把小提琴,用来表明我的意思。我在单词表中添加了两个4个字母的单词来表明我的意思。http://jsfiddle.net/cTGGA/18/
编辑
一旦我把较大的单词改编成网格,我会在这个声明中说什么来准备它。
var completeLetters = $('.wordglow2').length;
var completeWords = (completeLetters / 3);
$('.counter').html(completeWords + '/6');
我认为您要么需要使从shuffled单词列表中选择的单词成为一个函数,该函数返回下一个未使用的单词,该单词适合行中剩余的空间。
或者,如果您希望每行有2个单词,则将行设为最长单词的2倍,并在从列表中选择一个或两个单词后将空格填充到行的末尾。
相关文章:
- 当鼠标悬停在文本中的单词上时显示警报
- 匹配一个单词,其中候选人可以跨越顺序组(跨度)
- 如何使用jquery强制一个单词更改大小写等以保留品牌
- 拆分单词jquery
- 如何让程序检查所选单词中是否有按键
- HighCharts长标题文本在某些元素上重叠
- 如何在悬停时流畅地更改单词
- EmberJS中支持单字母单词模型
- 字母计数:返回重复字母数最多的第一个单词
- 如何在Javascript中从字符串中提取某些单词
- 如何创建一个“;表单弹出框“;在chrome中右键单击时位于突出显示的单词上方
- 如何检测重叠元素下的单击
- 在javascript中查找单词
- 使用jQuery检查提交时添加到句子中的单词
- 如何在PHP中获取特定的字符串单词
- 停止较大单词的重叠
- 如何在没有单词的情况下从命令行运行Node.js程序'节点'
- 用于匹配不带字符的单词的正则表达式
- 从输入值中删除最后一个单词
- d3单词clouds-出现了太多的重叠