8

次のコードでは、Wheel of Fortune のようなゲームを 1 人でプレイできます (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";
};
4

2 に答える 2

1

どうぞ。を使用して、要素がまたはと同じ行にあるelement.offsetTopかどうかを判断します。.spaceparent.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);

jsフィドル

于 2013-07-31T19:38:12.590 に答える