8

我在下面的代码中可以和一个人玩类似命运之轮的游戏（更多我对 javascript 对象的测试）。

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

例如：

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

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

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

这是我创建游戏板的代码（从我的小提琴中的@ line 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";
};
4

2 回答 2

2

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

考虑这样的事情：

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>

这是一个小提琴（尝试调整输出窗格的大小）。

于 2013-07-31T21:04:20.133 回答
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

于 2013-07-31T19:38:12.590 回答