目前我的拼写游戏中,网格是设计为三个字母的单词。我可以将更大的单词添加到“wordList”中(它会动态创建网格),但是网格的大小会改变,并且会覆盖在更大的单词所在的行上。
目前,例如添加四个字母的单词时,网格将在该行末尾添加一个额外的单元格,而不是判断该单词不适合该行并在可用的网格位置上选择另一个位置。
基本上,我需要网格保持相同的大小,当单词随机放置时,确定一个允许网格保持6x6的位置,而不是当它们不适合位置时超出边界。显然,当添加超过6个字母的单词时,这种方法将不起作用,因为它是一个6x6,但我认为我们不会使用那么长的单词,所以这不应该成为问题。
单词通过html像这样添加...
然后,网格从列表动态创建,代码如下...
这是一个示例,展示了我的意思。我已经在“wordList”中添加了两个由4个字母组成的单词,以展示我的意思。http://jsfiddle.net/cTGGA/18/ 编辑:
一旦我将更大的单词适应到网格中,我该如何准备这个陈述。
目前,例如添加四个字母的单词时,网格将在该行末尾添加一个额外的单元格,而不是判断该单词不适合该行并在可用的网格位置上选择另一个位置。
基本上,我需要网格保持相同的大小,当单词随机放置时,确定一个允许网格保持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);
这是一个示例,展示了我的意思。我已经在“wordList”中添加了两个由4个字母组成的单词,以展示我的意思。http://jsfiddle.net/cTGGA/18/ 编辑:
一旦我将更大的单词适应到网格中,我该如何准备这个陈述。
var completeLetters = $('.wordglow2').length;
var completeWords = (completeLetters / 3);
$('.counter').html(completeWords + '/6');