Javascript, HTML, CSS Code
Copy
<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 > Random Maze Generator Game</title >
<meta name ="description" content ="A simple random maze generator game on a 512x512 canvas" >
<meta name ="keywords" content ="maze, generator, game, random, canvas" >
<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-168118684954265" ;
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" >
let canvas, ctx, player, maze, timer, timerInterval;
const mazeWidth = 512 ;
const mazeHeight = 512 ;
const cellSize = 16 ;
const playerSize = 16 ;
function randomColor ( ) {
return '#' + Math .floor (Math .random () * 16777215 ).toString (16 );
}
function drawMaze ( ) {
for (let y = 0 ; y < mazeHeight; y += cellSize) {
for (let x = 0 ; x < mazeWidth; x += cellSize) {
let cell = maze[y / cellSize][x / cellSize];
ctx.fillStyle = cell === 1 ? maze.wallColor : maze.floorColor ;
ctx.fillRect (x, y, cellSize, cellSize);
}
}
}
function drawPlayer ( ) {
ctx.fillStyle = player.color ;
ctx.fillRect (player.x * cellSize, player.y * cellSize, playerSize, playerSize);
}
function updateTimer ( ) {
let minutes = Math .floor (timer / 60 );
let seconds = timer % 60 ;
$('#timer' ).text (minutes + ':' + (seconds < 10 ? '0' : '' ) + seconds);
}
function startTimer ( ) {
timer = 120 ;
updateTimer ();
timerInterval = setInterval (function ( ) {
timer--;
updateTimer ();
if (timer <= 0 ) {
clearInterval (timerInterval);
alert ("Time's up! Generating a new maze..." );
generateMaze ();
}
}, 1000 );
}
function generateMaze ( ) {
clearInterval (timerInterval);
startTimer ();
maze = [];
for (let y = 0 ; y < mazeHeight / cellSize; y++) {
let row = [];
for (let x = 0 ; x < mazeWidth / cellSize; x++) {
row.push (Math .random () > 0.3 ? 0 : 1 );
}
maze.push (row);
}
maze[0 ][0 ] = 0 ;
maze[mazeHeight / cellSize - 1 ][mazeWidth / cellSize - 1 ] = 0 ;
maze.wallColor = randomColor ();
maze.floorColor = randomColor ();
player = { x : 0 , y : 0 , color : randomColor () };
drawMaze ();
drawPlayer ();
}
function movePlayer (dx, dy ) {
let newX = player.x + dx;
let newY = player.y + dy;
if (newX >= 0 && newX < mazeWidth / cellSize && newY >= 0 && newY < mazeHeight / cellSize && maze[newY][newX] === 0 ) {
player.x = newX;
player.y = newY;
drawMaze ();
drawPlayer ();
if (newX === mazeWidth / cellSize - 1 && newY === mazeHeight / cellSize - 1 ) {
clearInterval (timerInterval);
alert ("You've reached the finish! Generating a new maze..." );
generateMaze ();
}
}
}
$(document ).ready (function ( ) {
canvas = document .getElementById ('maze' );
ctx = canvas.getContext ('2d' );
generateMaze ();
$(document ).keydown (function (e ) {
switch (e.which ) {
case 37 : movePlayer (-1 , 0 ); break ;
case 38 : movePlayer (0 , -1 ); break ;
case 39 : movePlayer (1 , 0 ); break ;
case 40 : movePlayer (0 , 1 ); break ;
default : return ;
}
e.preventDefault ();
});
});
</script >
<style >
body {
display : flex;
justify-content : center;
align-items : center;
height : 100vh ;
background : linear-gradient (45deg , #f06 , transparent);
margin : 0 ;
font-family : 'Courier New' , monospace;
}
#maze-container {
display : flex;
flex-direction : column;
align-items : center;
}
#timer {
font-size : 24px ;
margin-bottom : 16px ;
}
canvas {
border : 1px solid #000 ;
}
</style >
<link rel ="canonical" href ="https://calculator.tools/prompt/206/" >
<meta charset ="utf-8" >
</head >
<body >
<div id ="maze-container" >
<div id ="timer" > 2:00</div >
<canvas id ="maze" width ="512" height ="512" > </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 >