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

No:33506

←

Prev Next

→

Snake Game
Developer User6662｜Date and time 24/1/4 15:14:40
Build time 32.723 sec｜Game capacity 3.904KB｜

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;
            border: 1px solid black;
            position: relative;
        }

.cell {
            width: 20px;
            height: 20px;
            border: 1px solid #ddd;
            position: absolute;
        }

#snake {
            background-color: green;
        }

#food {
            background-color: red;
        }
    </style>
</head>
<body>
    <h1 style="text-align: center;">لعبة الثعبان</h1>
    <div id="game-board"></div>

var cellSize = 20;
        var direction = "right";
        var snake = [{ x: cellSize * 5, y: cellSize * 5 }];
        var food = { x: getRandomCoordinate(), y: getRandomCoordinate() };
        var score = 0;
        var interval;

function drawCell(x, y, color) {
            context.fillStyle = color;
            context.fillRect(x, y, cellSize, cellSize);
            context.strokeStyle = "black";
            context.strokeRect(x, y, cellSize, cellSize);
        }

function drawSnake() {
            snake.forEach(function (cell) {
                drawCell(cell.x, cell.y, "green");
            });
        }

function drawFood() {
            drawCell(food.x, food.y, "red");
        }

function getRandomCoordinate() {
            return Math.floor(Math.random() * (canvas.width / cellSize)) * cellSize;
        }

function moveSnake() {
            var head = { x: snake[0].x, y: snake[0].y };

if (direction === "right") {
                head.x += cellSize;
            } else if (direction === "left") {
                head.x -= cellSize;
            } else if (direction === "up") {
                head.y -= cellSize;
            } else if (direction === "down") {
                head.y += cellSize;
            }

snake.unshift(head);

if (head.x === food.x && head.y === food.y) {
                score++;
                food = { x: getRandomCoordinate(), y: getRandomCoordinate() };
            } else {
                snake.pop();
            }
        }

function checkCollision() {
            var head = snake[0];

if (
                head.x < 0 ||
                head.y < 0 ||
                head.x >= canvas.width ||
                head.y >= canvas.height
            ) {
                clearInterval(interval);
                alert("لقد خسرت! النقاط: " + score);
            }

for (var i = 1; i < snake.length; i++) {
                if (head.x === snake[i].x && head.y === snake[i].y) {
                    clearInterval(interval);
                    alert("لقد خسرت! النقاط: " + score);
                }
            }
        }

function updateGame() {
            context.clearRect(0, 0, canvas.width, canvas.height);

moveSnake();
            drawSnake();
            drawFood();
            checkCollision();
        }

function startGame() {
            interval = setInterval(updateGame, 100);
            window.addEventListener("keydown", changeDirection);
        }

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