AI game creator

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

No:15560

←

Prev Next

→

Snake Game
Developer User6662｜Date and time 23/9/9 22:20:51
Build time 41.649 sec｜Game capacity 5.5KB｜

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>
        #game-board {
            width: 400px;
            height: 400px;
            margin: 0 auto;
            border: 1px solid #000;
            background-color: #f2f2f2;
            position: relative;
        }

.cell {
            width: 20px;
            height: 20px;
            position: absolute;
        }

.food {
            background-color: red;
        }

.snake {
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="game-board"></div>

function gameInitiation() {
            const boardSize = 20; // board size in cells
            const cellSize = 20; // size of each cell in pixels
            const initialSnakeLength = 3; // initial length of the snake
            const gameSpeed = 200; // speed of the snake movement in milliseconds

const gameBoard = document.getElementById('game-board');
            const canvasWidth = gameBoard.offsetWidth;
            const canvasHeight = gameBoard.offsetHeight;

const cellsPerRow = canvasWidth / cellSize;
            const totalRows = canvasHeight / cellSize;

let snake = [];
            let food = null;
            let direction = '';

// Function to create the game board cells
            function createGameBoard() {
                gameBoard.style.width = `${canvasWidth}px`;
                gameBoard.style.height = `${canvasHeight}px`;

for (let row = 0; row < totalRows; row++) {
                    for (let col = 0; col < cellsPerRow; col++) {
                        const cell = document.createElement('div');
                        cell.className = 'cell';
                        cell.style.top = `${row * cellSize}px`;
                        cell.style.left = `${col * cellSize}px`;
                        gameBoard.appendChild(cell);
                    }
                }
            }

// Function to generate a random food location
            function generateFood() {
                const foodCell = gameBoard.getElementsByClassName('food')[0];
                if (foodCell) {
                    foodCell.className = 'cell';
                }

let row = Math.floor(Math.random() * totalRows);
                let col = Math.floor(Math.random() * cellsPerRow);

food = document.getElementsByClassName('cell')[(row * cellsPerRow) + col];
                food.className = 'food';
            }

// Function to update the snake's position
            function moveSnake() {
                const head = snake[snake.length - 1];
                let nextCell;

if (direction === 'up') {
                    nextCell = document.getElementsByClassName('cell')[(head.row - 1) * cellsPerRow + head.col];
                } else if (direction === 'down') {
                    nextCell = document.getElementsByClassName('cell')[(head.row + 1) * cellsPerRow + head.col];
                } else if (direction === 'left') {
                    nextCell = document.getElementsByClassName('cell')[head.row * cellsPerRow + head.col - 1];
                } else if (direction === 'right') {
                    nextCell = document.getElementsByClassName('cell')[head.row * cellsPerRow + head.col + 1];
                }

if (!nextCell || nextCell.className.includes('snake')) {
                    clearInterval(gameInterval);
                    alert('Game Over! Your score: ' + (snake.length - initialSnakeLength));
                    return;
                }

snake.push({ row: nextCell.offsetTop / cellSize, col: nextCell.offsetLeft / cellSize });
                nextCell.className = 'cell snake';

if (nextCell === food) {
                    generateFood();
                } else {
                    const tail = snake.shift();
                    const tailCell = document.getElementsByClassName('cell')[tail.row * cellsPerRow + tail.col];
                    tailCell.className = 'cell';
                }
            }

// Function to handle the direction change
            function changeDirection(keyCode) {
                if (keyCode === 37 && direction !== 'right') {
                    direction = 'left';
                } else if (keyCode === 38 && direction !== 'down') {
                    direction = 'up';
                } else if (keyCode === 39 && direction !== 'left') {
                    direction = 'right';
                } else if (keyCode === 40 && direction !== 'up') {
                    direction = 'down';
                }
            }

// Function to start the game
            function startGame() {
                createGameBoard();
                generateFood();

for (let i = 0; i < initialSnakeLength; i++) {
                    snake.push({ row: 0, col: i });
                    const cell = document.getElementsByClassName('cell')[i];
                    cell.className = 'cell snake';
                }

document.addEventListener('keydown', function (event) {
                    changeDirection(event.keyCode);
                });

gameInterval = setInterval(moveSnake, gameSpeed);
            }

startGame();
        }
    </script>
</body>
</html>