html，为什么有些对象不显示？

问题描述 投票：0回答：1

我正在做一个生物学项目（声音对注意力的影响），我需要一个程序来检查注意力本身。我不会html所以我让AI给我做了一个代码，但是不行，我也不知道为什么。关于代码的本质：一开始我们选择时间，然后在这段时间点击方块，然后出现一个按钮开始第二个游戏，这个游戏的本质是首先显示数字并消失在中心（圆形、方形和三角形），然后您需要通过单击三个按钮（圆形、方形和三角形）来重复该序列，首先您需要重复 3 个数字，然后是 5 个数字，然后是 10 个数字，依此类推（+5每次）等等，直到这个人犯错误。之后，它会显示错误，并出现一个屏幕，其中写入第一场和第二场比赛的结果。 （这是我通过翻译写的，可能有错误，敬请谅解）。有人可以帮忙看一下这段代码吗？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <style>
        body {
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #333333;
            font-family: Arial, sans-serif;
        }

        .game-container {
            position: relative;
            width: 100vw;
            height: 100vh;
        }

        .square, .circle, .triangle {
            position: absolute;
            width: 50px;
            height: 50px;
            cursor: pointer;
        }

        .square {
            background-color: rgb(190, 57, 57);
        }

        .circle {
            background-color: rgb(57, 190, 57);
            border-radius: 50%;
        }

        .triangle {
            width: 0;
            height: 0;
            border-left: 25px solid transparent;
            border-right: 25px solid transparent;
            border-bottom: 50px solid rgb(57, 57, 190);
            clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
        }

        #timer, #result {
            position: absolute;
            top: 20px;
            left: 20px;
            color: rgb(255, 255, 255);
            font-size: 20px;
        }

        #start-screen, #game2-screen {
            position: absolute;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background-color: #333333;
            z-index: 1000;
            color: white;
        }

        #restart-button, #next-game-button {
            margin-top: 20px;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .button {
            padding: 10px;
            font-size: 16px;
            margin: 10px;
            background-color: #555;
            border: none;
            color: white;
            cursor: pointer;
        }

        .button:hover {
            background-color: #777;
        }

        .game2-button {
            width: 50px;
            height: 50px;
        }
    </style>
</head>
<body>

    <div id="start-screen">
        <h1>Click on as many squares as possible</h1>
        <label for="time-input">Select a time (in seconds):</label>
        <input type="number" id="time-input" min="5" max="60" value="10">
        <button id="start-button" class="button">Start the game</button>
    </div>

    <div id="game2-screen" style="display: none;">
        <h1>Remember the sequence and repeat</h1>
        <div id="sequence"></div>
        <div>
            <button id="square-button" class="game2-button square"></button>
            <button id="circle-button" class="game2-button circle"></button>
            <button id="triangle-button" class="game2-button triangle"></button>
        </div>
        <div id="feedback"></div>
        <button id="next-game-button" class="button" style="display: none;">Restart game</button>
    </div>

    <div class="game-container">
        <div id="timer"></div>
        <div id="result"></div>
    </div>

    <script>
        const gameContainer = document.querySelector('.game-container');
        const timerElement = document.getElementById('timer');
        const resultElement = document.getElementById('result');
        const startScreen = document.getElementById('start-screen');
        const game2Screen = document.getElementById('game2-screen');
        const startButton = document.getElementById('start-button');
        const timeInput = document.getElementById('time-input');
        const restartButton = document.getElementById('restart-button');
        const nextGameButton = document.getElementById('next-game-button');

        let score = 0;
        let timeLeft;
        let gameInterval;
        let game2Score1 = 0;
        let game2Score2 = 0;
        let sequence = [];
        let userSequence = [];
        let sequenceLength = 3;

        function getRandomPosition() {
            const x = Math.random() * (window.innerWidth - 50);
            const y = Math.random() * (window.innerHeight - 50);
            return { x, y };
        }

        function spawnSquare() {
            const square = document.createElement('div');
            square.classList.add('square');
            const { x, y } = getRandomPosition();
            square.style.left = `${x}px`;
            square.style.top = `${y}px`;
            square.addEventListener('click', () => {
                score++;
                square.remove();
                spawnSquare();
            });
            gameContainer.appendChild(square);
        }

        function startGame() {
            score = 0;
            timeLeft = parseInt(timeInput.value);
            startScreen.style.display = 'none';
            spawnSquare();
            timerElement.textContent = `Time: ${timeLeft}s`;

            gameInterval = setInterval(() => {
                timeLeft--;
                timerElement.textContent = `Time: ${timeLeft}s`;
                if (timeLeft <= 0) {
                    endGame();
                }
            }, 1000);
        }

        

        function startMemoryGame() {
            sequence = [];
            userSequence = [];
            generateSequence();
            showSequence();
        }

        function generateSequence() {
            for (let i = 0; i < sequenceLength; i++) {
                const shapes = ['square', 'circle', 'triangle'];
                sequence.push(shapes[Math.floor(Math.random() * shapes.length)]);
            }
        }

        function showSequence() {
            const sequenceDiv = document.getElementById('sequence');
            sequenceDiv.innerHTML = '';
            sequence.forEach((shape, index) => {
                setTimeout(() => {
                    const shapeDiv = document.createElement('div');
                    shapeDiv.classList.add(shape);
                    sequenceDiv.appendChild(shapeDiv);
                    setTimeout(() => shapeDiv.remove(), 500);
                }, index * 1000);
            });
            setTimeout(() => {
                sequenceDiv.innerHTML = '';
                enableButtons();
            }, sequence.length * 1000);
        }

        function enableButtons() {
            document.getElementById('square-button').addEventListener('click', () => handleUserInput('square'));
            document.getElementById('circle-button').addEventListener('click', () => handleUserInput('circle'));
            document.getElementById('triangle-button').addEventListener('click', () => handleUserInput('triangle'));
        }

        function handleUserInput(shape) {
            userSequence.push(shape);
            if (userSequence[userSequence.length - 1] !== sequence[userSequence.length - 1]) {
                endMemoryGame(false);
                return;
            }
            if (userSequence.length === sequence.length) {
                endMemoryGame(true);
            }
        }


    function endMemoryGame(success) {  
    document.getElementById('square-button').removeEventListener('click', () => handleUserInput('square'));  
    document.getElementById('circle-button').removeEventListener('click', () => handleUserInput('circle'));  
    document.getElementById('triangle-button').removeEventListener('click', () => handleUserInput('triangle'));  

    if (success) {  
        game2Score2 = sequenceLength;  
        sequenceLength += 5;  
        document.getElementById('feedback').textContent = 'Well done!';  
    } else {  
        document.getElementById('feedback').textContent = 'Try again!';  
    }  

    resultElement.innerHTML = `  
        Your score of 1 game: ${game2Score1}<br>  
        Your score of 2 game: ${game2Score2}  
    `;  
    
    nextGameButton.style.display = 'block';
}


        function restartGame() {
            resultElement.textContent = '';
            game2Screen.style.display = 'none';
            startScreen.style.display = 'flex';
            nextGameButton.style.display = 'none';
        }

        function startNewGame() {
            resultElement.textContent = '';
            game2Screen.style.display = 'none';
            startGame();
        }

        startButton.addEventListener('click', startGame);
        nextGameButton.addEventListener('click', startNewGame);
    </script>

</body>
</html>
html
1个回答
-1
投票

人工智能曾经做过一些疏忽。下面的代码有一些设计问题，但它应该按预期工作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Two-Part Game: Shape Clicking and Memory Sequence</title>
    <style>
        body {
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #333333;
            font-family: Arial, sans-serif;
        }

        .game-container {
            position: relative;
            width: 100vw;
            height: 100vh;
        }

        .square, .circle, .triangle {
            position: absolute;
            width: 50px;
            height: 50px;
            cursor: pointer;
        }

        .square {
            background-color: rgb(190, 57, 57);
        }

        .circle {
            background-color: rgb(57, 190, 57);
            border-radius: 50%;
        }

        .triangle {
            width: 0;
            height: 0;
            border-left: 25px solid transparent;
            border-right: 25px solid transparent;
            border-bottom: 50px solid rgb(57, 57, 190);
            clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
        }

        #timer, #result {
            position: absolute;
            top: 20px;
            left: 20px;
            color: rgb(255, 255, 255);
            font-size: 20px;
        }

        #start-screen, #game2-screen {
            position: absolute;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background-color: #333333;
            z-index: 1000;
            color: white;
        }

        #restart-button, #next-game-button {
            margin-top: 20px;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }

        .button {
            padding: 10px;
            font-size: 16px;
            margin: 10px;
            background-color: #555;
            border: none;
            color: white;
            cursor: pointer;
        }

        .button:hover {
            background-color: #777;
        }

        .game2-button {
            width: 50px;
            height: 50px;
            margin: 0 10px;
        }

        #sequence {
            display: flex;
            margin-bottom: 20px;
        }

        #sequence > div {
            margin: 0 5px;
        }
    </style>
</head>
<body>

    <div id="start-screen">
        <h1>Click on as many shapes as possible</h1>
        <label for="time-input">Select a time (in seconds):</label>
        <input type="number" id="time-input" min="5" max="60" value="10">
        <button id="start-button" class="button">Start the game</button>
    </div>

    <div id="game2-screen" style="display: none;">
        <h1>Remember the sequence and repeat</h1>
        <div id="sequence"></div>
        <div>
            <button id="square-button" class="game2-button square"></button>
            <button id="circle-button" class="game2-button circle"></button>
            <button id="triangle-button" class="game2-button triangle"></button>
        </div>
        <div id="feedback"></div>
        <button id="next-game-button" class="button" style="display: none;">Start New Game</button>
    </div>

    <div class="game-container">
        <div id="timer"></div>
        <div id="result"></div>
    </div>

    <script>
        const gameContainer = document.querySelector('.game-container');
        const timerElement = document.getElementById('timer');
        const resultElement = document.getElementById('result');
        const startScreen = document.getElementById('start-screen');
        const game2Screen = document.getElementById('game2-screen');
        const startButton = document.getElementById('start-button');
        const timeInput = document.getElementById('time-input');
        const nextGameButton = document.getElementById('next-game-button');

        let score = 0;
        let timeLeft;
        let gameInterval;
        let game2Score1 = 0;
        let game2Score2 = 0;
        let sequence = [];
        let userSequence = [];
        let sequenceLength = 3;

        function getRandomPosition() {
            const x = Math.random() * (window.innerWidth - 50);
            const y = Math.random() * (window.innerHeight - 50);
            return { x, y };
        }

        function spawnShape() {
            const shapes = ['square', 'circle', 'triangle'];
            const shape = shapes[Math.floor(Math.random() * shapes.length)];
            const element = document.createElement('div');
            element.classList.add(shape);
            const { x, y } = getRandomPosition();
            element.style.left = `${x}px`;
            element.style.top = `${y}px`;
            element.addEventListener('click', () => {
                score++;
                element.remove();
                spawnShape();
            });
            gameContainer.appendChild(element);
        }

        function startGame() {
            score = 0;
            timeLeft = parseInt(timeInput.value);
            startScreen.style.display = 'none';
            gameContainer.innerHTML = '';
            spawnShape();
            timerElement.textContent = `Time: ${timeLeft}s`;

            gameInterval = setInterval(() => {
                timeLeft--;
                timerElement.textContent = `Time: ${timeLeft}s`;
                if (timeLeft <= 0) {
                    endGame();
                }
            }, 1000);
        }

        function endGame() {
            clearInterval(gameInterval);
            gameContainer.innerHTML = '';
            timerElement.textContent = '';
            resultElement.textContent = `Game 1 Over! Your score: ${score}`;
            game2Score1 = score;
            setTimeout(() => {
                startMemoryGame();
            }, 2000);
        }

        function startMemoryGame() {
            game2Screen.style.display = 'flex';
            sequence = [];
            userSequence = [];
            generateSequence();
            showSequence();
        }

        function generateSequence() {
            for (let i = 0; i < sequenceLength; i++) {
                const shapes = ['square', 'circle', 'triangle'];
                sequence.push(shapes[Math.floor(Math.random() * shapes.length)]);
            }
        }

        function showSequence() {
            const sequenceDiv = document.getElementById('sequence');
            sequenceDiv.innerHTML = '';
            sequence.forEach((shape, index) => {
                setTimeout(() => {
                    const shapeDiv = document.createElement('div');
                    shapeDiv.classList.add(shape);
                    sequenceDiv.appendChild(shapeDiv);
                    setTimeout(() => shapeDiv.remove(), 500);
                }, index * 1000);
            });
            setTimeout(() => {
                sequenceDiv.innerHTML = '';
                enableButtons();
            }, sequence.length * 1000);
        }

        function enableButtons() {
            document.getElementById('square-button').onclick = () => handleUserInput('square');
            document.getElementById('circle-button').onclick = () => handleUserInput('circle');
            document.getElementById('triangle-button').onclick = () => handleUserInput('triangle');
        }

        function handleUserInput(shape) {
            userSequence.push(shape);
            if (userSequence[userSequence.length - 1] !== sequence[userSequence.length - 1]) {
                endMemoryGame(false);
                return;
            }
            if (userSequence.length === sequence.length) {
                endMemoryGame(true);
            }
        }

        function endMemoryGame(success) {
            const squareButton = document.getElementById('square-button');
            const circleButton = document.getElementById('circle-button');
            const triangleButton = document.getElementById('triangle-button');

            squareButton.onclick = null;
            circleButton.onclick = null;
            triangleButton.onclick = null;

            if (success) {
                game2Score2 = sequenceLength;
                sequenceLength++;
                document.getElementById('feedback').textContent = 'Well done!';
            } else {
                document.getElementById('feedback').textContent = 'Game Over!';
            }

            resultElement.innerHTML = `
                Your score of Game 1: ${game2Score1}<br>
                Your score of Game 2: ${game2Score2}
            `;
            
            nextGameButton.style.display = 'block';
        }

        function startNewGame() {
            resultElement.textContent = '';
            game2Screen.style.display = 'none';
            startScreen.style.display = 'flex';
            nextGameButton.style.display = 'none';
            document.getElementById('feedback').textContent = '';
            score = 0;
            game2Score1 = 0;
            game2Score2 = 0;
            sequenceLength = 3;
        }

        startButton.addEventListener('click', startGame);
        nextGameButton.addEventListener('click', startNewGame);
    </script>

</body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.