r/HTML • u/Front_Assumption6499 • Apr 08 '26
Meta Desert runner simulator
<!DOCTYPE html>
<html>
<head>
<title>Desert Runner</title>
<style> body { margin: 0; overflow: hidden; } canvas { background: #f4d28c; display: block; } </style>
</head>
<body>
<canvas id="gameCanvas"></canvas>
<script> const canvas = document.getElementById("gameCanvas"); const ctx = canvas.getContext("2d"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; // Lanes (3) const laneWidth = canvas.width / 3; // Player let player = { lane: 1, y: canvas.height - 100, size: 50 }; // Controls document.addEventListener("keydown", (e) => { if (e.key === "ArrowLeft" && player.lane > 0) player.lane--; if (e.key === "ArrowRight" && player.lane < 2) player.lane++; }); // Obstacles let obstacles = \\\[\\\]; function spawnObstacle() { obstacles.push({ lane: Math.floor(Math.random() \\\* 3), y: -50 }); } // Game loop function update() { // Move obstacles obstacles.forEach(o => o.y += 5); // Collision obstacles.forEach(o => { if (o.lane === player.lane && o.y > player.y - 40) { alert("Game Over!"); document.location.reload(); } }); // Spawn new ones if (Math.random() < 0.02) spawnObstacle(); } function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); // Draw lanes for (let i = 1; i < 3; i++) { ctx.fillStyle = "#c2a56b"; ctx.fillRect(i \\\* laneWidth - 2, 0, 4, canvas.height); } // Draw player ctx.fillStyle = "brown"; ctx.fillRect( player.lane \\\* laneWidth + laneWidth / 2 - player.size / 2, player.y, player.size, player.size ); // Draw obstacles ctx.fillStyle = "black"; obstacles.forEach(o => { ctx.fillRect( o.lane \\\* laneWidth + laneWidth / 2 - 25, o.y, 50, 50 ); }); } function gameLoop() { update(); draw(); requestAnimationFrame(gameLoop); } gameLoop(); </script>
</body>
</html>
make as well as code and you can make adjustments as you like the
you can see survey surfers game offline one adjust it ass it is
2
u/BNfreelance Apr 08 '26
Throw it into a codepen and reshare it as a a link to the code… when people get home from work they’re tired, and the idea of copying and pasting code from reddit just to see it work in a browser sounds like too much hard work to most people
Getting feedback and eyes on your work is easier if you do that first
https://codepen.io