Question

我在下面的代码here中你可以和一个人玩一个类似财富的游戏（更多我对javascript对象的测试）。

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

例如：

圆圈在哪里，我有一个“空白”方块。我有一个空白正方形的原因是，当屏幕足够大时，正方形作为单词之间的空格。

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

我唯一的想法就是添加一个window.onresize事件来衡量这些字与游戏空间有多大有关，并根据这个事实做出决定，但这似乎非常低效。

这是我创建游戏板的代码（从my fiddle开始@第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

而不是JavaScript，这听起来更像是CSS的工作，它在处理居中文本时一直解决这个问题。

考虑这样的事情：

<强> CSS

#board {
    text-align: center;
    border: 1px solid blue;
    font-size: 60pt;
}

.word {
    display: inline-block;
    white-space: nowrap; /* Don't break up words */
    margin: 0 50px; /* The space between words */
}

.word span {
    display: inline-block;
    width: 100px;
    border: 1px solid black
}

<强> HTML

<div id="board">
    <span class="word"><span>W</span><span>h</span><span>e</span><span>e</span><span>l</span></span>
    <span class="word"><span>o</span><span>f</span></span>
    <span class="word"><span>F</span><span>o</span><span>r</span><span>t</span><span>u</span><span>n</span><span>e</span></span>
</div>

这是fiddle（尝试调整输出窗格的大小）。

Answer 2

你走了。使用element.offsetTop确定.space元素是否与其parent.previousSibling.lastChild或parent.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);

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

2 个答案:

相关代码

jsFiddle