AI game creator

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

No:11545

117

←

Prev Next

→

Snake
Developer User4917｜Date and time 23/8/11 1:55:28
Build time 40.545 sec｜Game capacity 6.48KB｜

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 {
            position: relative;
            width: 300px;
            height: 300px;
            border: 1px solid black;
        }
        .cell {
            width: 10px;
            height: 10px;
            background-color: #F5F5F5;
            border: 1px solid #E5E5E5;
            float: left;
        }
        #snake-head {
            background-color: #FF0000;
        }
        #snake-tail {
            background-color: #800000;
        }
        #food {
            background-color: #00FF00;
        }
    </style>
</head>
<body>
    <div id="game-board"></div>

// Constants
            var GRID_SIZE = 20;
            var CELL_SIZE = 15;
            var MOVE_INTERVAL = 100;
            var INITIAL_SNAKE_LENGTH = 3;

// Game variables
            var gameBoard = document.getElementById("game-board");
            var ctx = gameBoard.getContext("2d");
            var snake = [];
            var direction = "right";
            var food = {};
            var score = 0;

// Initialize the game
            function initGame() {
                createGrid();
                createSnake();
                generateFood();
                drawSnake();
                drawFood();

// Start moving the snake
                setInterval(moveSnake, MOVE_INTERVAL);

// Register touch events for controlling the snake on smartphones
                gameBoard.addEventListener("touchstart", handleTouchStart, false);
                gameBoard.addEventListener("touchmove", handleTouchMove, false);
            }

// Create the grid on the game board
            function createGrid() {
                for (var x = 0; x < GRID_SIZE; x++) {
                    for (var y = 0; y < GRID_SIZE; y++) {
                        ctx.fillStyle = "#F5F5F5";
                        ctx.fillRect(x * CELL_SIZE, y * CELL_SIZE, CELL_SIZE, CELL_SIZE);
                    }
                }
            }

// Create the snake
            function createSnake() {
                for (var i = 0; i < INITIAL_SNAKE_LENGTH; i++) {
                    snake.push({ x: i, y: 0 });
                }
            }

// Move the snake
            function moveSnake() {
                var headX = snake[0].x;
                var headY = snake[0].y;

// Update the position of the head based on the direction
                switch (direction) {
                    case "up":
                        headY--;
                        break;
                    case "down":
                        headY++;
                        break;
                    case "left":
                        headX--;
                        break;
                    case "right":
                        headX++;
                        break;
                }

// Check for game over conditions
                if (headX < 0 || headX >= GRID_SIZE || headY < 0 || headY >= GRID_SIZE || isSnakeCollision(headX, headY)){
                    alert("GAME OVER! Score: " + score);
                    location.reload();
                    return;
                }

// Update the position of the tail
                var tail = snake.pop();
                tail.x = headX;
                tail.y = headY;
                snake.unshift(tail);

// Check if the head collided with the food
                if (headX == food.x && headY == food.y) {
                    score++;
                    generateFood();
                }

drawSnake();
            }

// Check if the snake collided with itself
            function isSnakeCollision(headX, headY) {
                for (var i = 1; i < snake.length; i++) {
                    if (snake[i].x == headX && snake[i].y == headY) {
                        return true;
                    }
                }
                return false;
            }

// Generate new food
            function generateFood() {
                var foodX;
                var foodY;
                var collidedWithSnake = true;

while (collidedWithSnake) {
                    foodX = Math.floor(Math.random() * GRID_SIZE);
                    foodY = Math.floor(Math.random() * GRID_SIZE);
                    collidedWithSnake = isSnakeCollision(foodX, foodY);
                }

food = { x: foodX, y: foodY };
            }

// Draw the snake on the game board
            function drawSnake() {
                ctx.clearRect(0, 0, gameBoard.width, gameBoard.height);

ctx.fillStyle = "#FF0000"; // Head color
                ctx.fillRect(snake[0].x * CELL_SIZE, snake[0].y * CELL_SIZE, CELL_SIZE, CELL_SIZE);

ctx.fillStyle = "#800000"; // Tail color
                for (var i = 1; i < snake.length; i++) {
                    ctx.fillRect(snake[i].x * CELL_SIZE, snake[i].y * CELL_SIZE, CELL_SIZE, CELL_SIZE);
                }

drawFood();
            }

// Draw the food on the game board
            function drawFood() {
                ctx.fillStyle = "#00FF00";
                ctx.fillRect(food.x * CELL_SIZE, food.y * CELL_SIZE, CELL_SIZE, CELL_SIZE);
            }

// Handle touch start event
            function handleTouchStart(event) {
                startX = event.touches[0].clientX;
                startY = event.touches[0].clientY;
            }

// Handle touch move event
            function handleTouchMove(event) {
                event.preventDefault();
                endX = event.touches[0].clientX;
                endY = event.touches[0].clientY;

var diffX = startX - endX;
                var diffY = startY - endY;

// Determine the swipe direction
                if (Math.abs(diffX) > Math.abs(diffY)) {
                    direction = (diffX > 0) ? "left" : "right";
                } else {
                    direction = (diffY > 0) ? "up" : "down";
                }
                startX = endX;
                startY = endY;
            }

// Start the game
            initGame();
        });
    </script>
</body>
</html>