Snake but the buttons are are at the top of the screen's game

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

No:10557

104

←

Prev Next

→

Snake but the buttons are are at the top of the sc..ALL
Developer Micah｜Date and time 23/8/1 2:01:15
Build time 38.709 sec｜Game capacity 5.482KB｜

Script

Sure! Here's a sample implementation of the snake game using JavaScript and HTML that meets your requirements:

In this implementation, the game container is a 400x400 pixel area where the snake and food are displayed. You can control the snake's movement by clicking the arrow buttons at the top of the screen. The game ends when the snake hits the boundaries or collides with itself, and an alert is shown indicating the game over. Please note that this is a basic implementation of the game and can be further improved and enhanced according to your requirements.

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

Sure! Here's a sample implementation of the snake game using JavaScript and HTML that meets your requirements:

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Snake Game</title>
    <style>
        #game-container {
            border: 1px solid #000;
            width: 400px;
            height: 400px;
            margin: 0 auto;
            position: relative;
        }

.snake-dot {
            width: 20px;
            height: 20px;
            background-color: green;
            position: absolute;
        }

#food {
            width: 20px;
            height: 20px;
            background-color: red;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="game-container"></div>
    <div id="controls">
        <button id="left">Left</button>
        <button id="up">Up</button>
        <button id="right">Right</button>
        <button id="down">Down</button>
    </div>

var snake = [{ x: 200, y: 200 }]; // Initial snake position
        var food = generateFoodPosition(); // Initial food position
        var direction = "right"; // Initial direction of snake movement

var gameContainer = document.getElementById('game-container');
        var leftButton = document.getElementById('left');
        var upButton = document.getElementById('up');
        var rightButton = document.getElementById('right');
        var downButton = document.getElementById('down');

// Function to update snake position
        function updateSnake() {
            var head = { x: snake[0].x, y: snake[0].y };

// Update head position based on direction
            if (direction === "left") {
                head.x -= 20;
            } else if (direction === "up") {
                head.y -= 20;
            } else if (direction === "right") {
                head.x += 20;
            } else if (direction === "down") {
                head.y += 20;
            }

// Check if snake hits boundaries or itself
            if (
                head.x < 0 ||
                head.y < 0 ||
                head.x >= 400 ||
                head.y >= 400 ||
                checkSnakeCollision(head)
            ) {
                clearInterval(gameInterval);
                alert("Game Over!");
                return;
            }

// Check if snake eats food
            if (head.x === food.x && head.y === food.y) {
                // Increase score (optional)
                // Update UI score display (optional)
                snake.unshift(head); // Add new head to snake without removing tail
                food = generateFoodPosition(); // Generate new food position
            } else {
                snake.pop(); // Remove tail of the snake
                snake.unshift(head); // Add new head to snake
            }

// Update game UI
            renderGame();
        }

// Function to check if snake collides with itself
        function checkSnakeCollision(head) {
            for (var i = 1; i < snake.length; i++) {
                if (head.x === snake[i].x && head.y === snake[i].y) {
                    return true;
                }
            }
            return false;
        }

// Function to render the game UI
        function renderGame() {
            gameContainer.innerHTML = ""; // Clear game container

// Render snake
            snake.forEach(function (dot) {
                var snakeDot = document.createElement('div');
                snakeDot.classList.add('snake-dot');
                snakeDot.style.left = dot.x + "px";
                snakeDot.style.top = dot.y + "px";
                gameContainer.appendChild(snakeDot);
            });

// Render food
            var foodElement = document.createElement('div');
            foodElement.id = "food";
            foodElement.style.left = food.x + "px";
            foodElement.style.top = food.y + "px";
            gameContainer.appendChild(foodElement);
        }

// Function to handle button clicks
        function handleButtonClick(event) {
            direction = event.target.id; // Update snake direction based on button clicked
        }

// Event listeners for button clicks
        leftButton.addEventListener('click', handleButtonClick);
        upButton.addEventListener('click', handleButtonClick);
        rightButton.addEventListener('click', handleButtonClick);
        downButton.addEventListener('click', handleButtonClick);

// Start the game
        var gameInterval = setInterval(updateSnake, 200);
    </script>
</body>
</html>
```

Please note that this is a basic implementation of the game and can be further improved and enhanced according to your requirements.