Click here for free DL of the app version that can save data.

No:13834

136

←

Prev Next

→

Game with main menu and settings
Developer User6030｜Date and time 23/8/30 4:10:10
Build time 23.713 sec｜Game capacity 4.033KB｜

Script

Игра

Скорость:

Игра окончена!

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
<title>Игра</title>
<style>
    body {
        background-color: #f0f0f0;
        text-align: center;
        font-family: Arial, sans-serif;
    }
    
    h1 {
        color: #333333;
    }
    
    #menu {
        margin-top: 150px;
    }
    
    #menu button {
        background-color: #4CAF50;
        color: white;
        border: none;
        padding: 10px 20px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 10px 2px;
        cursor: pointer;
    }
    
    #settings {
        display: none;
        margin-top: 50px;
    }
    
    #settings label {
        font-size: 14px;
    }
    
    #settings select {
        padding: 5px;
        font-size: 14px;
    }
    
    #start-button {
        margin: 20px auto;
    }
    
    #game {
        display: none;
        margin-top: 50px;
    }
    
    #game canvas {
        border: 1px solid #333333;
    }
    
    #game-over {
        display: none;
        margin-top: 50px;
    }
    
    #game-over p {
        font-size: 18px;
    }
    
    #game-over button {
        background-color: #f44336;
        color: white;
        border: none;
        padding: 10px 20px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 10px 2px;
        cursor: pointer;
    }
</style>
</head>
<body>
    <h1>Игра</h1>
    
    <div id="menu">
        <button onclick="showSettings()">Настройки</button>
        <button onclick="startGame()">Старт</button>
    </div>
    
    <div id="settings">
        <label for="speed">Скорость:</label>
        <select id="speed">
            <option value="1">Медленно</option>
            <option value="2">Средне</option>
            <option value="3">Быстро</option>
        </select>
        <br><br>
        <button onclick="saveSettings()">Сохранить</button>
    </div>
    
    <div id="game-over">
        <p>Игра окончена!</p>
        <button onclick="restartGame()">Начать заново</button>
    </div>
    
    <div id="game">
        <canvas id="canvas" width="400" height="400"></canvas>
    </div>
    
    <script>
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        var gameInterval;
        var score = 0;
        var speed = 1;
        
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            // рисуем игровые объекты
        }
        
        function update() {
            // обновляем состояние игры
            // проверяем коллизии
        }
        
        function gameLoop() {
            update();
            draw();
        }
        
        function startGame() {
            document.getElementById("menu").style.display = "none";
            document.getElementById("game").style.display = "block";
            gameInterval = setInterval(gameLoop, 1000 / speed);
        }
        
        function gameOver() {
            clearInterval(gameInterval);
            document.getElementById("game").style.display = "none";
            document.getElementById("game-over").style.display = "block";
        }
        
        function restartGame() {
            score = 0;
            startGame();
        }
        
        function showSettings() {
            document.getElementById("menu").style.display = "none";
            document.getElementById("settings").style.display = "block";
        }
        
        function saveSettings() {
            var speedSelect = document.getElementById("speed");
            speed = parseInt(speedSelect.options[speedSelect.selectedIndex].value);
            document.getElementById("settings").style.display = "none";
            document.getElementById("menu").style.display = "block";
        }
    </script>
</body>
</html>