AI game creator

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

No:16352

100

←

Prev Next

→

Snake Game
Developer User7247｜Date and time 23/9/17 14:02:50
Build time 57.438 sec｜Game capacity 7.254KB｜

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 {
            background-color: black;
            height: 400px;
            width: 400px;
            position: relative;
            overflow: hidden;
        }
        .snake-dot {
            background-color: green;
            height: 20px;
            width: 20px;
            position: absolute;
        }
        .food {
            background-color: red;
            height: 20px;
            width: 20px;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="game-board"></div>

var gameInterval; // متغير لتخزين مؤقت اللعبة

// دالة بناء لوحة اللعبة
        function buildBoard() {
            var gameBoard = document.getElementById("game-board");

// رسم المجلس
            for (var i = 0; i < boardSize; i++) {
                for (var j = 0; j < boardSize; j++) {
                    var boardDot = document.createElement("div");
                    boardDot.style.top = i * 20 + "px";
                    boardDot.style.left = j * 20 + "px";
                    boardDot.classList.add("snake-dot");
                    gameBoard.appendChild(boardDot);
                }
            }
        }

// دالة لرسم الثعبان
        function drawSnake() {
            var gameBoard = document.getElementById("game-board");

// مسح الثعبان القديم
            while (gameBoard.firstChild) {
                gameBoard.firstChild.remove();
            }

// رسم الثعبان الجديد
            snake.forEach(function (dot) {
                var snakePart = document.createElement("div");
                snakePart.style.top = dot.y * 20 + "px";
                snakePart.style.left = dot.x * 20 + "px";
                snakePart.classList.add("snake-dot");
                gameBoard.appendChild(snakePart);
            });
        }

// دالة لرسم الطعام
        function drawFood() {
            var gameBoard = document.getElementById("game-board");

// رسم الطعام
            var foodDot = document.createElement("div");
            foodDot.style.top = food.y * 20 + "px";
            foodDot.style.left = food.x * 20 + "px";
            foodDot.classList.add("food");
            gameBoard.appendChild(foodDot);
        }

// دالة لتحريك الثعبان
        function moveSnake() {
            // قراءة موقع رأس الثعبان
            var head = { x: snake[0].x, y: snake[0].y };

// تحديث الاتجاه بناء على اختيار المستخدم أو الخروج عن الحدود
            switch (direction) {
                case "right":
                    head.x += 1;
                    break;
                case "left":
                    head.x -= 1;
                    break;
                case "up":
                    head.y -= 1;
                    break;
                case "down":
                    head.y += 1;
                    break;
            }

// إضافة رأس جديد للثعبان
            snake.unshift(head);

// التحقق من الاصطدام بحائط اللوحة
            if (head.x < 0 || head.x >= boardSize || head.y < 0 || head.y >= boardSize) {
                endGame();
                return;
            }

// التحقق من الاصطدام بجسم الثعبان
            for (var i = 1; i < snake.length; i++) {
                if (snake[i].x === head.x && snake[i].y === head.y) {
                    endGame();
                    return;
                }
            }

// التحقق من التغذية ونمو الثعبان
            if (head.x === food.x && head.y === food.y) {
                // إنشاء طعام جديد بموقع عشوائي
                food = generateFoodPosition();
            } else {
                // إزالة أخر قسم (ذيل) من الثعبان إذا لم يتم التغذية
                snake.pop();
            }

// إعادة رسم اللعبة
            drawSnake();
            drawFood();
        }

// دالة نهاية اللعبة
        function endGame() {
            clearInterval(gameInterval);
            alert("لقد خسرت! حاول مرة أخرى.");
            resetGame();
        }

// دالة إعادة تعيين اللعبة
        function resetGame() {
            snake = [{ x: 10, y: 10 }, { x: 9, y: 10 }, { x: 8, y: 10 }];
            direction = "right";
            food = { x: 5, y: 5 };
            drawSnake();
            drawFood();
            startGame();
        }

// دالة بدء اللعبة
        function startGame() {
            gameInterval = setInterval(moveSnake, 150); // تحديث الحركة كل 150 ميلي ثانية
        }

// دالة لتوليد موقع عشوائي للطعام
        function generateFoodPosition() {
            var x = Math.floor(Math.random() * boardSize);
            var y = Math.floor(Math.random() * boardSize);

// التحقق من عدم الإنشاء على أجزاء الثعبان الحالية
            for (var i = 0; i < snake.length; i++) {
                if (snake[i].x === x && snake[i].y === y) {
                    return generateFoodPosition(); // حاول مرة أخرى إذا حدث التداخل
                }
            }

return { x: x, y: y };
        }

// استجابة استخدام لوحة المفاتيح
        document.addEventListener("keydown", function (event) {
            switch (event.keyCode) {
                case 37: // السهم الأيسر
                    if (direction !== "right") {
                        direction = "left";
                    }
                    break;
                case 38: // السهم العلوي
                    if (direction !== "down") {
                        direction = "up";
                    }
                    break;
                case 39: // السهم الأيمن
                    if (direction !== "left") {
                        direction = "right";
                    }
                    break;
                case 40: // السهم السفلي
                    if (direction !== "up") {
                        direction = "down";
                    }
                    break;
            }
        });

// بناء اللعبة عند تحميل الصفحة
        document.addEventListener("DOMContentLoaded", function () {
            buildBoard();
            drawSnake();
            drawFood();
            startGame();
        });
    </script>
</body>
</html>