AI game creator

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

No:15889

123

←

Prev Next

→

Snake Game
Developer User6942｜Date and time 23/9/13 6:34:55
Build time 32.191 sec｜Game capacity 4.749KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Snake Game</title>
    <style>
        #game-board {
            width: 400px;
            height: 400px;
            border: 1px solid #000;
            position: relative;
            margin: 0 auto;
        }

.dot {
            width: 20px;
            height: 20px;
            background-color: #000;
            position: absolute;
        }

.food {
            width: 20px;
            height: 20px;
            background-color: red;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="game-board"></div>
  
    <script>
        // Game Variables
        var boardSize = 20; // Number of dots in one row/column
        var dotSize = 20;  // Width and height of each dot
        var direction = "right";
        var snake = [{ top: 0, left: 0 }];
        var food = { top: 0, left: 0 };
        var intervalId;

// Function to initialize the game
        function init() {
            intervalId = setInterval(moveSnake, 200); // Adjust the speed of the game by changing the interval time
            generateFood();
            drawSnake();
            document.onkeydown = changeDirection;
        }

// Function to generate food at random position
        function generateFood() {
            var randomTop = Math.floor(Math.random() * boardSize) * dotSize;
            var randomLeft = Math.floor(Math.random() * boardSize) * dotSize;
            food = { top: randomTop, left: randomLeft };
            drawFood();
        }

// Function to draw the snake on the game board
        function drawSnake() {
            var gameBoard = document.getElementById("game-board");
            gameBoard.innerHTML = "";

snake.forEach(function (dot) {
                var snakeDot = document.createElement("div");
                snakeDot.className = "dot";
                snakeDot.style.top = dot.top + "px";
                snakeDot.style.left = dot.left + "px";
                gameBoard.appendChild(snakeDot);
            });
        }

// Function to draw the food on the game board
        function drawFood() {
            var gameBoard = document.getElementById("game-board");

var foodDot = document.createElement("div");
            foodDot.className = "food";
            foodDot.style.top = food.top + "px";
            foodDot.style.left = food.left + "px";
            gameBoard.appendChild(foodDot);
        }

// Function to update the snake's position
        function moveSnake() {
            var head = { top: snake[0].top, left: snake[0].left };

if (direction === "right") {
                head.left += dotSize;
            } else if (direction === "left") {
                head.left -= dotSize;
            } else if (direction === "up") {
                head.top -= dotSize;
            } else if (direction === "down") {
                head.top += dotSize;
            }

snake.unshift(head);

// Check if snake ate the food
            if (head.top === food.top && head.left === food.left) {
                generateFood();
            } else {
                snake.pop();
            }

// Check if snake collided with itself or the wall
            if (collisionDetected()) {
                clearInterval(intervalId);
                alert("Game Over! Your Score: " + (snake.length - 1));
                location.reload();
            }

drawSnake();
        }

// Function to check if collision occurred
        function collisionDetected() {
            var head = snake[0];

// Check if snake collided with itself
            for (var i = 1; i < snake.length; i++) {
                if (snake[i].top === head.top && snake[i].left === head.left) {
                    return true;
                }
            }

// Check if snake collided with walls
            if (head.top < 0 || head.left < 0 || head.top >= boardSize * dotSize || head.left >= boardSize * dotSize) {
                return true;
            }

return false;
        }

// Function to handle keyboard input and change direction accordingly
        function changeDirection(event) {
            if (event.keyCode === 37 && direction !== "right") {
                direction = "left";
            } else if (event.keyCode === 38 && direction !== "down") {
                direction = "up";
            } else if (event.keyCode === 39 && direction !== "left") {
                direction = "right";
            } else if (event.keyCode === 40 && direction !== "up") {
                direction = "down";
            }
        }

init();
    </script>
</body>
</html>