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>3D Snake Game</title> <meta name="description" content="Play the classic snake game in 3D!"> <meta name="keywords" content="snake game, 3D, fun, game"> <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"> <script type="text/javascript"> var localStoragePrefix = "ct-169293546340714"; 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"> // Game Variables var canvas, ctx; var snake; var blockSize = 20; var apple; var score; var animationTime = 100; var direction = "right"; var gameLoop; // Initialize the game function init() { canvas = document.getElementById("gameCanvas"); ctx = canvas.getContext("2d"); canvas.width = 800; canvas.height = 600; score = 0; snake = []; snake[0] = { x: 10 * blockSize, y: 10 * blockSize }; createApple(); document.addEventListener("keydown", directionHandler); gameLoop = setInterval(draw, animationTime); } // Handle keyboard input for changing direction function directionHandler(event) { var key = event.keyCode; if (key == 37 && direction != "right") { direction = "left"; } else if (key == 38 && direction != "down") { direction = "up"; } else if (key == 39 && direction != "left") { direction = "right"; } else if (key == 40 && direction != "up") { direction = "down"; } } // Create a new apple at a random position function createApple() { apple = { x: Math.floor(Math.random() * (canvas.width / blockSize)) * blockSize, y: Math.floor(Math.random() * (canvas.height / blockSize)) * blockSize }; } // Check if the snake has collided with the apple function checkCollision() { if (snake[0].x == apple.x && snake[0].y == apple.y) { score++; createApple(); return true; } return false; } // Check if the snake has collided with the walls or itself function checkGameOver() { for (var i = 1; i < snake.length; i++) { if (snake[i].x == snake[0].x && snake[i].y == snake[0].y) { return true; } } if ( snake[0].x < 0 || snake[0].x >= canvas.width || snake[0].y < 0 || snake[0].y >= canvas.height ) { return true; } return false; } // Draw the game on the canvas function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < snake.length; i++) { ctx.fillStyle = (i === 0) ? "#2ecc71" : "#27ae60"; ctx.fillRect(snake[i].x, snake[i].y, blockSize, blockSize); } ctx.fillStyle = "#e74c3c"; ctx.fillRect(apple.x, apple.y, blockSize, blockSize); var snakeX = snake[0].x; var snakeY = snake[0].y; if (direction == "right") snakeX += blockSize; if (direction == "left") snakeX -= blockSize; if (direction == "up") snakeY -= blockSize; if (direction == "down") snakeY += blockSize; var newHead = { x: snakeX, y: snakeY }; if (checkGameOver()) { clearInterval(gameLoop); alert("Game Over!"); return; } snake.unshift(newHead); if (!checkCollision()) { snake.pop(); } ctx.fillStyle = "#fff"; ctx.font = "20px Arial"; ctx.fillText("Score: " + score, blockSize, blockSize); } </script> <style> body { background-color: #f1c40f; font-family: 'Roboto', sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; } #gameCanvas { border: 2px solid #34495e; background-color: #ecf0f1; } </style> <link rel="canonical" href="https://calculator.tools/prompt/4928/"> <meta charset="utf-8"> </head> <body onload="init()"> <div id="main-container" class="container"> <canvas id="gameCanvas" width="800" height="600"></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>
3D Snake Game
Calculator Tools