Javascript, HTML, CSS Code
<html> <head> <script type="text/javascript"> window.addEventListener('error', function(event) { var message = JSON.parse(JSON.stringify(event.message)); var source = event.filename; var lineno = event.lineno; var colno = event.colno; var error = event.error; window.parent.postMessage({ type: 'iframeError', details: { message: message, source: source, lineno: lineno, colno: colno, error: error ? error.stack : '' } }, '*'); }); window.addEventListener('unhandledrejection', function(event) { window.parent.postMessage({ type: 'iframePromiseRejection', details: { reason: event.reason } }, '*'); }); </script> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Snake Game</title> <meta name="description" content="Snake is eating apple game"> <meta name="keywords" content="snake, game, apple"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <!-- Built-In Functions for Apps --> <script type="text/javascript"> var localStoragePrefix = "ct-168751377187475"; var lastSave = 0; // save to localstorage function saveLocal(data) { if (Date.now() - lastSave < 1000) { return; } // save to cookie let cookie = localStoragePrefix + "=" + JSON.stringify(data) + "; path=" + window.location.pathname + "'; SameSite=Strict"; cookie += "; expires=" + new Date(Date.now() + 1000 * 60 * 60 * 24 * 365 * 1000).toUTCString(); document.cookie = cookie; lastSave = Date.now(); } // load from localstorage function loadLocal() { var cookiePrefix = localStoragePrefix + "="; var cookieStart = document.cookie.indexOf(cookiePrefix); if (cookieStart > -1) { let cookieEnd = document.cookie.indexOf(";", cookieStart); if (cookieEnd == -1) { cookieEnd = document.cookie.length; } var cookieData = document.cookie.substring(cookieStart + cookiePrefix.length, cookieEnd); return JSON.parse(cookieData); } } </script> <script type="text/javascript"> // App Javascript Goes Here $(document).ready(function(){ // Constants const canvas = $("#game-canvas")[0]; const ctx = canvas.getContext("2d"); const box = 32; // Snake let snake = []; snake[0] = { x: 9 * box, y: 10 * box }; // Apple let apple = { x: Math.floor(Math.random() * 17 + 1) * box, y: Math.floor(Math.random() * 15 + 3) * box }; // Score let score = 0; // Direction let d; // Controls $(document).keydown(function (e) { if (e.keyCode == 37 && d != "RIGHT") { d = "LEFT"; } else if (e.keyCode == 38 && d != "DOWN") { d = "UP"; } else if (e.keyCode == 39 && d != "LEFT") { d = "RIGHT"; } else if (e.keyCode == 40 && d != "UP") { d = "DOWN"; } }); // Collision Detection function collision(head, array) { for (let i = 0; i < array.length; i++) { if (head.x == array[i].x && head.y == array[i].y) { return true; } } return false; } // Draw Everything function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); // Draw Background ctx.fillStyle = "#1abc9c"; ctx.fillRect(0, 0, canvas.width, canvas.height); // Draw Snake for (let i = 0; i < snake.length; i++) { ctx.fillStyle = i === 0 ? "#2ecc71" : "#27ae60"; ctx.fillRect(snake[i].x, snake[i].y, box, box); ctx.strokeStyle = "#ffffff"; ctx.strokeRect(snake[i].x, snake[i].y, box, box); } // Draw Apple ctx.fillStyle = "#e74c3c"; ctx.fillRect(apple.x, apple.y, box, box); // Draw Score ctx.fillStyle = "#ffffff"; ctx.font = "20px Arial"; ctx.fillText("Score: " + score, box, box); // Snake's Head let snakeX = snake[0].x; let snakeY = snake[0].y; // Move Snake if (d == "LEFT") snakeX -= box; if (d == "UP") snakeY -= box; if (d == "RIGHT") snakeX += box; if (d == "DOWN") snakeY += box; // Eat Apple if (snakeX == apple.x && snakeY == apple.y) { score++; apple = { x: Math.floor(Math.random() * 17 + 1) * box, y: Math.floor(Math.random() * 15 + 3) * box }; } else { snake.pop(); } // Game Over if (snakeX < box || snakeX > 17 * box || snakeY < 3 * box || snakeY > 17 * box || collision({ x: snakeX, y: snakeY }, snake)) { clearInterval(game); } // Add New Head let newHead = { x: snakeX, y: snakeY }; snake.unshift(newHead); } // Game Loop let game = setInterval(draw, 150); }); </script> <style> /* App CSS Goes Here */ canvas { border: 1px solid #ffffff; display: block; margin: 0 auto; } </style> <link rel="canonical" href="https://calculator.tools/prompt/837/"> <meta charset="utf-8"> </head> <body> <div id="main-container" class="container"> <h1 class="text-center mt-5">Snake Game</h1> <canvas id="game-canvas" width="576" height="576"></canvas> </div> <script type="text/javascript"> var localStoragePrefix = "ct-{{ cachebreaker }}"; var lastSave = 0; function saveLocal(data) { if (Date.now() - lastSave < 1000) { return; } let cookie = localStoragePrefix + "=" + JSON.stringify(data) + "; path=" + window.location.pathname + "'; SameSite=Strict"; cookie += "; expires=" + new Date(Date.now() + 1000 * 60 * 60 * 24 * 365 * 1000).toUTCString(); document.cookie = cookie; lastSave = Date.now(); } function loadLocal() { var cookiePrefix = localStoragePrefix + "="; var cookieStart = document.cookie.indexOf(cookiePrefix); if (cookieStart > -1) { let cookieEnd = document.cookie.indexOf(";", cookieStart); if (cookieEnd == -1) { cookieEnd = document.cookie.length; } var cookieData = document.cookie.substring(cookieStart + cookiePrefix.length, cookieEnd); return JSON.parse(cookieData); } } </script> <script type="text/javascript"> window.addEventListener('load', function() { var observer = new MutationObserver(function() { window.parent.postMessage({height: document.documentElement.scrollHeight || document.body.scrollHeight},"*"); }); observer.observe(document.body, {attributes: true, childList: true, subtree: true}); window.parent.postMessage({height: document.documentElement.scrollHeight || document.body.scrollHeight},"*"); }); </script> </body> </html>
Snake Game
Calculator Tools