{"id":298,"date":"2025-07-14T02:52:50","date_gmt":"2025-07-14T02:52:50","guid":{"rendered":"https:\/\/insaatsirketleri.com.tr\/en\/?p=298"},"modified":"2025-07-14T02:52:50","modified_gmt":"2025-07-14T02:52:50","slug":"snake-game","status":"publish","type":"post","link":"https:\/\/insaatsirketleri.com.tr\/en\/snake-game\/","title":{"rendered":"Snake Game"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n    <style>\n        body {\n            font-family: 'Press Start 2P', cursive;\n            background-color: #1a202c; \/* Koyu Gri *\/\n            color: #a0aec0; \/* A\u00e7\u0131k Gri *\/\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            height: 100vh;\n            margin: 0;\n            text-align: center;\n        }\n        .game-container {\n            border: 4px solid #4a5568; \/* Gri *\/\n            border-radius: 10px;\n            background-color: #2d3748; \/* Daha Koyu Gri *\/\n            padding: 20px;\n            box-shadow: 0 10px 20px rgba(0,0,0,0.2);\n        }\n        canvas {\n            background-color: #000;\n            border-radius: 5px;\n            border: 2px solid #a0aec0;\n        }\n        .score-board {\n            font-size: 1.5rem;\n            margin-bottom: 15px;\n            color: #f7fafc; \/* Beyaz *\/\n        }\n        .score-value {\n            color: #48bb78; \/* Ye\u015fil *\/\n        }\n        .game-over-screen {\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            background-color: rgba(0, 0, 0, 0.8);\n            padding: 40px;\n            border-radius: 10px;\n            color: white;\n            z-index: 10;\n        }\n        .restart-button {\n            background-color: #48bb78; \/* Ye\u015fil *\/\n            color: white;\n            padding: 10px 20px;\n            border: none;\n            border-radius: 5px;\n            font-family: 'Press Start 2P', cursive;\n            cursor: pointer;\n            margin-top: 20px;\n            font-size: 1rem;\n            transition: background-color 0.3s;\n        }\n        .restart-button:hover {\n            background-color: #38a169; \/* Koyu Ye\u015fil *\/\n        }\n    <\/style>\n<\/head>\n<body>\n\n<div class=\"game-container\">\n    <div class=\"score-board\">SKOR: <span id=\"score\" class=\"score-value\">0<\/span><\/div>\n    <canvas id=\"gameCanvas\" width=\"400\" height=\"400\"><\/canvas>\n    <div id=\"gameOverScreen\" class=\"game-over-screen hidden\">\n        <h2 class=\"text-3xl mb-4\">OYUN B\u0130TT\u0130<\/h2>\n        <p>Skorun: <span id=\"finalScore\">0<\/span><\/p>\n        <button id=\"restartButton\" class=\"restart-button\">YEN\u0130DEN BA\u015eLA<\/button>\n    <\/div>\n<\/div>\n\n<script>\n    \/\/ Oyun Alan\u0131 ve De\u011fi\u015fkenler\n    const canvas = document.getElementById('gameCanvas');\n    const ctx = canvas.getContext('2d');\n    const scoreElement = document.getElementById('score');\n    const gameOverScreen = document.getElementById('gameOverScreen');\n    const finalScoreElement = document.getElementById('finalScore');\n    const restartButton = document.getElementById('restartButton');\n\n    const gridSize = 20; \/\/ Her bir kare 20x20 piksel\n    const tileCount = canvas.width \/ gridSize; \/\/ 400 \/ 20 = 20 kare\n\n    let snake = [{ x: 10, y: 10 }]; \/\/ Y\u0131lan\u0131n ba\u015flang\u0131\u00e7 pozisyonu\n    let food = { x: 15, y: 15 }; \/\/ Yemin ba\u015flang\u0131\u00e7 pozisyonu\n    let dx = 0; \/\/ X eksenindeki hareket y\u00f6n\u00fc\n    let dy = 0; \/\/ Y eksenindeki hareket y\u00f6n\u00fc\n    let score = 0;\n    let changingDirection = false;\n    let gameRunning = true;\n\n    \/\/ Ana Oyun D\u00f6ng\u00fcs\u00fc\n    function main() {\n        if (!gameRunning) return;\n\n        setTimeout(function onTick() {\n            changingDirection = false;\n            clearCanvas();\n            drawFood();\n            moveSnake();\n            drawSnake();\n            checkCollision();\n            main();\n        }, 100); \/\/ Oyun h\u0131z\u0131 (ms)\n    }\n\n    \/\/ Ba\u015flang\u0131\u00e7\n    generateFood();\n    main();\n\n    \/\/ Olay Dinleyicileri\n    document.addEventListener('keydown', changeDirection);\n    restartButton.addEventListener('click', restartGame);\n\n    \/\/ Fonksiyonlar\n    function clearCanvas() {\n        ctx.fillStyle = '#1a202c'; \/\/ Arka plan rengi\n        ctx.fillRect(0, 0, canvas.width, canvas.height);\n    }\n\n    function drawSnake() {\n        snake.forEach(drawSnakePart);\n    }\n\n    function drawSnakePart(snakePart) {\n        ctx.fillStyle = '#48bb78'; \/\/ Y\u0131lan rengi (Ye\u015fil)\n        ctx.strokeStyle = '#2d3748'; \/\/ Y\u0131lan kenarl\u0131k rengi\n        ctx.fillRect(snakePart.x * gridSize, snakePart.y * gridSize, gridSize, gridSize);\n        ctx.strokeRect(snakePart.x * gridSize, snakePart.y * gridSize, gridSize, gridSize);\n    }\n\n    function drawFood() {\n        ctx.fillStyle = '#e53e3e'; \/\/ Yem rengi (K\u0131rm\u0131z\u0131)\n        ctx.strokeStyle = '#9b2c2c'; \/\/ Yem kenarl\u0131k rengi\n        ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize, gridSize);\n        ctx.strokeRect(food.x * gridSize, food.y * gridSize, gridSize, gridSize);\n    }\n\n    function moveSnake() {\n        const head = { x: snake[0].x + dx, y: snake[0].y + dy };\n        snake.unshift(head); \/\/ Yeni ba\u015f\u0131 y\u0131lan\u0131n \u00f6n\u00fcne ekle\n\n        \/\/ Yemi yiyip yemedi\u011fini kontrol et\n        const didEatFood = snake[0].x === food.x && snake[0].y === food.y;\n        if (didEatFood) {\n            score += 10;\n            scoreElement.textContent = score;\n            generateFood();\n        } else {\n            snake.pop(); \/\/ Yem yemediysen kuyru\u011fu kald\u0131r\n        }\n    }\n\n    function changeDirection(event) {\n        if (changingDirection) return;\n        changingDirection = true;\n\n        const GOING_UP = dy === -1;\n        const GOING_DOWN = dy === 1;\n        const GOING_RIGHT = dx === 1;\n        const GOING_LEFT = dx === -1;\n\n        \/\/ Y\u00f6n tu\u015flar\u0131 kodlar\u0131\n        const LEFT_KEY = 37;\n        const RIGHT_KEY = 39;\n        const UP_KEY = 38;\n        const DOWN_KEY = 40;\n\n        const keyPressed = event.keyCode;\n\n        if (keyPressed === LEFT_KEY && !GOING_RIGHT) {\n            dx = -1;\n            dy = 0;\n        }\n        if (keyPressed === UP_KEY && !GOING_DOWN) {\n            dx = 0;\n            dy = -1;\n        }\n        if (keyPressed === RIGHT_KEY && !GOING_LEFT) {\n            dx = 1;\n            dy = 0;\n        }\n        if (keyPressed === DOWN_KEY && !GOING_UP) {\n            dx = 0;\n            dy = 1;\n        }\n    }\n\n    function checkCollision() {\n        \/\/ Kendine \u00e7arpma kontrol\u00fc\n        for (let i = 4; i < snake.length; i++) {\n            if (snake[i].x === snake[0].x &#038;&#038; snake[i].y === snake[0].y) {\n                gameOver();\n                return;\n            }\n        }\n\n        \/\/ Duvarlara \u00e7arpma kontrol\u00fc\n        const hitLeftWall = snake[0].x < 0;\n        const hitRightWall = snake[0].x > tileCount - 1;\n        const hitTopWall = snake[0].y < 0;\n        const hitBottomWall = snake[0].y > tileCount - 1;\n\n        if (hitLeftWall || hitRightWall || hitTopWall || hitBottomWall) {\n            gameOver();\n        }\n    }\n\n    function generateFood() {\n        \/\/ Y\u0131lan\u0131n \u00fczerinde olmayan rastgele bir konumda yem olu\u015ftur\n        food.x = Math.floor(Math.random() * tileCount);\n        food.y = Math.floor(Math.random() * tileCount);\n        snake.forEach(function isFoodOnSnake(part) {\n            if (part.x === food.x && part.y === food.y) {\n                generateFood();\n            }\n        });\n    }\n\n    function gameOver() {\n        gameRunning = false;\n        finalScoreElement.textContent = score;\n        gameOverScreen.classList.remove('hidden');\n    }\n\n    function restartGame() {\n        \/\/ De\u011fi\u015fkenleri s\u0131f\u0131rla\n        snake = [{ x: 10, y: 10 }];\n        food = { x: 15, y: 15 };\n        dx = 0;\n        dy = 0;\n        score = 0;\n        scoreElement.textContent = score;\n        gameRunning = true;\n\n        \/\/ Oyun Bitti ekran\u0131n\u0131 gizle\n        gameOverScreen.classList.add('hidden');\n\n        \/\/ Oyunu yeniden ba\u015flat\n        generateFood();\n        main();\n    }\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>SKOR: 0 OYUN B\u0130TT\u0130 Skorun: 0 YEN\u0130DEN BA\u015eLA<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-298","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/insaatsirketleri.com.tr\/en\/wp-json\/wp\/v2\/posts\/298","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/insaatsirketleri.com.tr\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/insaatsirketleri.com.tr\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/insaatsirketleri.com.tr\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/insaatsirketleri.com.tr\/en\/wp-json\/wp\/v2\/comments?post=298"}],"version-history":[{"count":1,"href":"https:\/\/insaatsirketleri.com.tr\/en\/wp-json\/wp\/v2\/posts\/298\/revisions"}],"predecessor-version":[{"id":299,"href":"https:\/\/insaatsirketleri.com.tr\/en\/wp-json\/wp\/v2\/posts\/298\/revisions\/299"}],"wp:attachment":[{"href":"https:\/\/insaatsirketleri.com.tr\/en\/wp-json\/wp\/v2\/media?parent=298"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/insaatsirketleri.com.tr\/en\/wp-json\/wp\/v2\/categories?post=298"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/insaatsirketleri.com.tr\/en\/wp-json\/wp\/v2\/tags?post=298"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}