时间戳

首页 > 解决方案 > 在我的 Nuxt js 应用程序中毁掉我的 CSS

javascript - 在我的 Nuxt js 应用程序中毁掉我的 CSS

问题描述

我的问题既简单又复杂，我分叉了这个简单的 HTML、CSS、JS 存储库：贪吃蛇游戏。然后我将其转换为 Nuxt Js 应用程序：我的仓库。

  1. 当我Scoped在标签中使用该属性时style，Js 代码工作正常，但看不到蛇： 在此处输入图像描述

  2. 当我删除该Scoped属性时，蛇会变得疯狂并且没有边界，并且会破坏样式： 在此处输入图像描述

我的代码：

window.onload = function() {
    // GAME_PIXEL_COUNT is the pixels on horizontal or vertical axis of the game board (SQUARE).
    const GAME_PIXEL_COUNT = 40;
    const SQUARE_OF_GAME_PIXEL_COUNT = Math.pow(GAME_PIXEL_COUNT, 2);

    let totalFoodAte = 0;
    let totalDistanceTravelled = 0;

    /// THE GAME BOARD:
    const gameContainer = document.getElementById("gameContainer");

    const createGameBoardPixels = () => {
        // Populate the [#gameContainer] div with small div's representing game pixels
        for (let i = 1; i <= SQUARE_OF_GAME_PIXEL_COUNT; ++i) {
            gameContainer.innerHTML = `${gameContainer.innerHTML} <div class="gameBoardPixel" id="pixel${i}"></div>`;
        }
    };

    // This variable always holds the updated array of game pixels created by createGameBoardPixels() :
    const gameBoardPixels = document.getElementsByClassName("gameBoardPixel");

    /// THE FOOD:
    let currentFoodPostion = 0;
    const createFood = () => {
        // Remove previous food;
        gameBoardPixels[currentFoodPostion].classList.remove("food");

        // Create new food
        currentFoodPostion = Math.random();
        currentFoodPostion = Math.floor(
            currentFoodPostion * SQUARE_OF_GAME_PIXEL_COUNT
        );
        gameBoardPixels[currentFoodPostion].classList.add("food");
    };

    /// THE SNAKE:

    // Direction codes (Keyboard key codes for arrow keys):
    const LEFT_DIR = 37;
    const UP_DIR = 38;
    const RIGHT_DIR = 39;
    const DOWN_DIR = 40;

    // Set snake direction initially to right
    let snakeCurrentDirection = RIGHT_DIR;

    const changeDirection = (newDirectionCode) => {
        // Change the direction of the snake
        if (newDirectionCode == snakeCurrentDirection) return;

        if (newDirectionCode == LEFT_DIR && snakeCurrentDirection != RIGHT_DIR) {
            snakeCurrentDirection = newDirectionCode;
        } else if (newDirectionCode == UP_DIR && snakeCurrentDirection != DOWN_DIR) {
            snakeCurrentDirection = newDirectionCode;
        } else if (
            newDirectionCode == RIGHT_DIR &&
            snakeCurrentDirection != LEFT_DIR
        ) {
            snakeCurrentDirection = newDirectionCode;
        } else if (newDirectionCode == DOWN_DIR && snakeCurrentDirection != UP_DIR) {
            snakeCurrentDirection = newDirectionCode;
        }
    };

    // Let the starting position of the snake be at the middle of game board
    let currentSnakeHeadPosition = SQUARE_OF_GAME_PIXEL_COUNT / 2;

    // Initial snake length
    let snakeLength = 1000;

    // Move snake continously by calling this function repeatedly :
    const moveSnake = () => {
        switch (snakeCurrentDirection) {
            case LEFT_DIR:
                --currentSnakeHeadPosition;
                const isSnakeHeadAtLastGameBoardPixelTowardsLeft =
                    currentSnakeHeadPosition % GAME_PIXEL_COUNT == GAME_PIXEL_COUNT - 1 ||
                    currentSnakeHeadPosition < 0;
                if (isSnakeHeadAtLastGameBoardPixelTowardsLeft) {
                    currentSnakeHeadPosition = currentSnakeHeadPosition + GAME_PIXEL_COUNT;
                }
                break;
            case UP_DIR:
                currentSnakeHeadPosition = currentSnakeHeadPosition - GAME_PIXEL_COUNT;
                const isSnakeHeadAtLastGameBoardPixelTowardsUp =
                    currentSnakeHeadPosition < 0;
                if (isSnakeHeadAtLastGameBoardPixelTowardsUp) {
                    currentSnakeHeadPosition =
                        currentSnakeHeadPosition + SQUARE_OF_GAME_PIXEL_COUNT;
                }
                break;
            case RIGHT_DIR:
                ++currentSnakeHeadPosition;
                const isSnakeHeadAtLastGameBoardPixelTowardsRight =
                    currentSnakeHeadPosition % GAME_PIXEL_COUNT == 0;
                if (isSnakeHeadAtLastGameBoardPixelTowardsRight) {
                    currentSnakeHeadPosition = currentSnakeHeadPosition - GAME_PIXEL_COUNT;
                }
                break;
            case DOWN_DIR:
                currentSnakeHeadPosition = currentSnakeHeadPosition + GAME_PIXEL_COUNT;
                const isSnakeHeadAtLastGameBoardPixelTowardsDown =
                    currentSnakeHeadPosition > SQUARE_OF_GAME_PIXEL_COUNT - 1;
                if (isSnakeHeadAtLastGameBoardPixelTowardsDown) {
                    currentSnakeHeadPosition =
                        currentSnakeHeadPosition - SQUARE_OF_GAME_PIXEL_COUNT;
                }
                break;
            default:
                break;
        }

        let nextSnakeHeadPixel = gameBoardPixels[currentSnakeHeadPosition];

        // Kill snake if it bites itself:
        if (nextSnakeHeadPixel.classList.contains("snakeBodyPixel")) {
            // Stop moving the snake
            clearInterval(moveSnakeInterval);
            if (!alert(
                    `You have ate ${totalFoodAte} food by travelling ${totalDistanceTravelled} blocks.`
                ))
                window.location.reload();
        }

        nextSnakeHeadPixel.classList.add("snakeBodyPixel");

        setTimeout(() => {
            nextSnakeHeadPixel.classList.remove("snakeBodyPixel");
        }, snakeLength);

        // Update total distance travelled
        totalDistanceTravelled++;
        // Update in UI:
        document.getElementById("blocksTravelled").innerHTML = totalDistanceTravelled;

        if (currentSnakeHeadPosition == currentFoodPostion) {
            // Update total food ate
            totalFoodAte++;
            // Update in UI:
            document.getElementById("pointsEarned").innerHTML = totalFoodAte;

            // Increase Snake length:
            snakeLength = snakeLength + 100;
            createFood();
        }
    };

    /// CALL THE FOLLOWING FUNCTIONS TO RUN THE GAME:

    // Create game board pixels:
    createGameBoardPixels();

    // Create initial food:
    createFood();

    // Move snake:
    var moveSnakeInterval = setInterval(moveSnake, 80);

    // Call change direction function on keyboard key-down event:
    addEventListener("keydown", (e) => changeDirection(e.keyCode));

    // ON SCREEN CONTROLLERS:
    const leftButton = document.getElementById("leftButton");
    const rightButton = document.getElementById("rightButton");
    const upButton = document.getElementById("upButton");
    const downButton = document.getElementById("downButton");

    leftButton.onclick = () => changeDirection(LEFT_DIR);
    rightButton.onclick = () => changeDirection(RIGHT_DIR);
    upButton.onclick = () => changeDirection(UP_DIR);
    downButton.onclick = () => changeDirection(DOWN_DIR);
}
<style scoped>
 body {
    background-color: darkslategrey;
    text-align: center;
}


/* GAME BOARD STYLES */

#gameContainer {
    /*
    width and height of .gameBoardPixel should 1/40 of the width and height of #gameContainer,
    because it is used in calculation in the jscript.js file
    */
    width: 40vw;
    height: 40vw;
    margin: 2vw auto;
    background-color: #0c1021;
    border: solid 10px slategrey;
    border-radius: 10px;
    -webkit-box-shadow: 0px 0px 20px 3px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: 0px 0px 20px 3px rgba(0, 0, 0, 0.6);
    box-shadow: 0px 0px 20px 3px rgba(0, 0, 0, 0.6);
}

.gameBoardPixel {
    /* background-color: slategrey; */
    /*
    width and height of .gameBoardPixel should 1/40 of the width and height of #gameContainer,
    because it is used in calculation in the jscript.js file
    */
    width: 1vw;
    height: 1vw;
    border-radius: 10px;
    float: left;
}


/* GAME BOARD STYLES END*/


/* SNAKE STYLES */

.snakeBodyPixel {
    background-color: #fd6401;
    box-shadow: 0 0 5px #fd6401;
}


/* SNAKE STYLES END*/


/* FOOD STYLES */

.food {
    background-color: #68e768;
}


/* FOOD STYLES END*/


/* SCORE STYLES */

#scoreContainer {
    width: 40vw;
    display: flex;
    margin: auto;
    justify-content: space-around;
}

.scoreBoard {
    border-radius: 10px;
    border: solid 5px slategrey;
    color: dimgray;
    background-color: #0c1021;
    display: inline-block;
    padding: 1vw;
    width: 40%;
    -webkit-box-shadow: 0px 0px 20px 3px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: 0px 0px 20px 3px rgba(0, 0, 0, 0.6);
    box-shadow: 0px 0px 20px 3px rgba(0, 0, 0, 0.6);
}


/* SCORE STYLES END */


/* Hide #onScreenControllers on desktop */

#onScreenControllers {
    display: none;
}

.developerDetails {
    margin-top: 2vw;
    display: flex;
    flex-direction: column;
    color: #0c1021;
    font-family: monospace;
}

.developerDetails a {
    color: #0c1021;
}

@media only screen and (max-width: 768px) {
    /* MOBILE */
    #gameContainer {
        width: 80vw;
        height: 80vw;
    }
    .gameBoardPixel {
        width: 2vw;
        height: 2vw;
    }
    #scoreContainer {
        width: 80vw;
    }
    #onScreenControllers {
        width: 80vw;
        margin: 5vw auto;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }
    #onScreenControllers>div {
        display: flex;
        flex-direction: column;
    }
    #onScreenControllers button {
        background-color: transparent;
        height: 20vw;
        width: 20vw;
        font-size: 10vw;
        border: none;
    }
    #onScreenControllers button:focus {
        outline: none;
    }
    #onScreenControllers button:active {
        background-color: slategray;
    }
}
</style>
<template>
<body>
<div>
    
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Snake v8</title>
    
   
 
 
    <!-- #gameContainer is the main game board-->
   
    <div id="gameContainer"></div>
   
    
    
    <!-- #scoreContainer contains the scores  -->
    <div id="scoreContainer">
      <div class="scoreBoard">Food: <span id="pointsEarned">0</span></div>
      <div class="scoreBoard">Blocks: <span id="blocksTravelled">0</span></div>
    </div>

    <!-- #onScreenControllers contains the navigation buttons for mobile screens -->
    <div id="onScreenControllers">
      <button id="leftButton">◀️&lt;/button>
      <div>
        <button id="upButton"></button>
        <button id="downButton"></button>
      </div>
      <button id="rightButton">▶️</button>
    </div>

    

</div>
</body>

</template>

请问有什么帮助吗？谢谢你

标签： javascriptcssvue.jsnuxt.js

解决方案

我实际上发现了问题所在：

在我的 Nuxt.js 应用程序中，我正在使用Tailwind，它会将默认样式应用于我的所有<div>标签。

解决方案是将其添加到我的全局 CSS 中：

*
{
box-sizing: initial;
}

推荐阅读