AI game creator

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

No:10009

←

Prev Next

→

Snake Game
Developer User4463｜Date and time 23/7/28 20:18:18
Build time 28.176 sec｜Game capacity 4.237KB｜

Script

Sure! Here's an example of a Snake Game implemented as a single HTML file using JavaScript and enclosed in script tags:

This code will create a simple Snake Game where you control a snake using the arrow keys on a smartphone. The objective is to eat the red food and grow the snake without hitting the game board edges or the snake's own body. The game board is displayed as a square with a green snake head and light green snake body using pictograms. The food is indicated by a red pictogram.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an example of a Snake Game implemented as a single HTML file using JavaScript and enclosed in script tags:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Snake Game</title>
    <style>
        #game-board {
            position: relative;
            width: 400px;
            height: 400px;
            border: 1px solid black;
        }
        .dot {
            position: absolute;
            width: 20px;
            height: 20px;
        }
        #snake-head {
            background-color: green;
        }
        .snake-body {
            background-color: lightgreen;
        }
        #food {
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="game-board">
        <div id="snake-head" class="dot"></div>
        <div id="food" class="dot"></div>
    </div>

// Game loop
        setInterval(moveSnake, 200);

// Keyboard controls
        document.addEventListener("keydown", changeDirection)

// Move the snake
        function moveSnake() {
            var headPosition = { top: snake[0].top, left: snake[0].left };

if (direction === "up")
                headPosition.top -= 20;
            else if (direction === "down")
                headPosition.top += 20;
            else if (direction === "left")
                headPosition.left -= 20;
            else if (direction === "right")
                headPosition.left += 20;

snake.unshift(headPosition);

if (headPosition.top === food.offsetTop && headPosition.left === food.offsetLeft)
                generateFood();
            else
                snake.pop();

drawSnake();
        }

// Draw the snake on the game board
        function drawSnake() {
            // Clear previous snake body
            var snakeBody = document.getElementsByClassName("snake-body");
            while (snakeBody.length)
                snakeBody[0].parentNode.removeChild(snakeBody[0]);

// Draw snake head
            snakeHead.style.top = snake[0].top + "px";
            snakeHead.style.left = snake[0].left + "px";

// Draw snake body
            for (var i = 1; i < snake.length; i++) {
                var bodyPart = document.createElement("div");
                bodyPart.className = "snake-body";
                bodyPart.style.top = snake[i].top + "px";
                bodyPart.style.left = snake[i].left + "px";
                gameBoard.appendChild(bodyPart);
            }
        }

// Generate random food position
        function generateFood() {
            var maxTop = gameBoard.offsetHeight - 20;
            var maxLeft = gameBoard.offsetWidth - 20;

var topPosition = Math.floor(Math.random() * maxTop / 20) * 20;
            var leftPosition = Math.floor(Math.random() * maxLeft / 20) * 20;

food.style.top = topPosition + "px";
            food.style.left = leftPosition + "px";
        }

// Change snake's direction
        function changeDirection(event) {
            var key = event.keyCode;

if (key === 38 && direction !== "down") // up arrow
                direction = "up";
            else if (key === 40 && direction !== "up") // down arrow
                direction = "down";
            else if (key === 37 && direction !== "right") // left arrow
                direction = "left";
            else if (key === 39 && direction !== "left") // right arrow
                direction = "right";
        }
    </script>
</body>
</html>
```