我怎么知道财富之轮上有新线？

Question

我下面的代码在这里您可以在其中发挥财富类游戏的车轮,一个人(更我的JavaScript对象的测试).

我的问题是,当屏幕足够小时,线条似乎没有正确破坏.

例如:

圆圈在哪里,我有一个"空白"方块.我有一个空白正方形的原因是,当屏幕足够大时,正方形用作单词之间的空格.

我的代码中有没有办法有效地知道空白方块是否在行的末尾并且不显示它,然后窗口调整大小,以便相应地显示它？

我唯一想到的是添加一个window.onresize事件来衡量这些词与游戏空间有多大有关,并根据这个事实做出决定,但这看起来非常低效.

这是我创建游戏板的代码(在我的小提琴中以@ 266行开头):

WheelGame.prototype.startRound = function (round) {
    this.round = round;
    this.lettersInPuzzle = [];
    this.guessedArray = [];
    this.puzzleSolved = false;
    this.currentPuzzle = this.puzzles[this.round].toUpperCase();
    this.currentPuzzleArray = this.currentPuzzle.split("");
    var currentPuzzleArray = this.currentPuzzleArray;
    var lettersInPuzzle = this.lettersInPuzzle;
    var word = document.createElement('div');
    displayArea.appendChild(word);
    word.className = "word";
    for (var i = 0; i < currentPuzzleArray.length; ++i) {
        var span = document.createElement('div');
        span.className = "wordLetter ";

        if (currentPuzzleArray[i] != " ") {
            span.className += "letter";
            if (!(currentPuzzleArray[i] in lettersInPuzzle.toObject())) {
                lettersInPuzzle.push(currentPuzzleArray[i]);
            }
            word.appendChild(span);
        } else {
            span.className += "space";
            word = document.createElement('div');
            displayArea.appendChild(word);
            word.className = "word";
            word.appendChild(span);
            word = document.createElement('div');
            displayArea.appendChild(word);
            word.className = "word";
        }

        span.id = "letter" + i;
    }

    var clear = document.createElement('div');
    displayArea.appendChild(clear);
    clear.className = "clear";
};

Answer 1

干得好。使用element.offsetTop确定某个元素是否与其或.space位于同一行。parent.previousSibling.lastChildparent.nextSibling.firstChild

相关代码

注意：在小提琴中，我更改了背景颜色而不是更改显示，以便您可以看到它的工作原理。

// hides and shows spaces if they are at the edge of a line or not.
function showHideSpaces() {
    var space,
        spaces = document.getElementsByClassName('space');

    for (var i = 0, il = spaces.length ; i < il; i++) {
        space = spaces[i];
        // if still display:none, then offsetTop always 0.
        space.style.display = 'inline-block';

        if (getTop(nextLetter(space)) != space.offsetTop || getTop(prevLetter(space)) != space.offsetTop) {
            space.style.display = 'none';
        } else {
            space.style.display = 'inline-block';
        }
    }
}

// navigate to previous letter
function nextLetter(fromLetter) {
    if (fromLetter.nextSibling) return fromLetter.nextSibling;
    if (fromLetter.parentElement.nextSibling) 
        return fromLetter.parentElement.nextSibling.firstChild;
    return null;
}

// navigate to next letter
function prevLetter(fromLetter) {
    if (fromLetter.previousSibling) return fromLetter.previousSibling;
    if (fromLetter.parentElement.previousSibling)
        return fromLetter.parentElement.previousSibling.lastChild;
    return null;
}

// get offsetTop
function getTop(element) {
    return (element) ? element.offsetTop : 0;
}

showHideSpaces();
if (window.addEventListener) window.addEventListener('resize', showHideSpaces);
else if (window.attachEvent) window.attachEvent('onresize', showHideSpaces);

jsFiddle