soumyadeepdas/tbl_WebBotPublic · Community Store Listing
Demo WebApp
14 commands0 envUpdated 19d agoCreated Oct 27, 2025
commands/normal.html.js
javascript · 240 lines · click line # to share
1/**#command2name: normal.html3answer: 4keyboard: 5parse_mode: 6aliases: 7allow_only_group: false8need_reply: false9is_web: 010#command**/11 12<!DOCTYPE html>13<html lang="en">14<head>15<meta charset="UTF-8" />16<meta name="viewport" content="width=device-width, initial-scale=1.0" />17<title>Catch The Gems</title>18<style>19 * { box-sizing: border-box; margin: 0; padding: 0; }20 body {21 background: linear-gradient(to bottom, #0a0a0a, #1e3c72);22 height: 100vh;23 display: flex;24 align-items: center;25 justify-content: center;26 overflow: hidden;27 font-family: "Poppins", sans-serif;28 user-select: none;29 touch-action: none;30 }31 32 #score {33 position: fixed;34 top: 15px;35 left: 50%;36 transform: translateX(-50%);37 font-size: 20px;38 font-weight: 600;39 color: #fff;40 background: rgba(0, 0, 0, 0.35);41 padding: 6px 15px;42 border-radius: 8px;43 }44 45 canvas {46 background: rgba(255, 255, 255, 0.05);47 border: 1px solid rgba(255, 255, 255, 0.2);48 border-radius: 10px;49 }50</style>51</head>52<body>53 <div id="score">Score: 0</div>54 <canvas id="gameCanvas" width="380" height="550"></canvas>55 56 <script>57 const canvas = document.getElementById("gameCanvas");58 const ctx = canvas.getContext("2d");59 60 const basket = { x: 160, y: 500, width: 70, height: 16 };61 let moveTarget = null;62 let objects = [];63 let score = 0;64 let gameOver = false;65 66 let fallSpeed = 1.8; // starting speed (slower)67 const maxFallSpeed = 5.5; // limit for max speed68 let spawnRate = 0.025; // start spawn rate69 const maxSpawnRate = 0.06; // limit for max spawn70 71 function newObject() {72 const rand = Math.random();73 let type = "gem";74 let color = `hsl(${Math.random() * 360}, 70%, 55%)`;75 let value = 1;76 77 if (rand < 0.15) {78 type = "bomb";79 color = "#e63946";80 } else if (rand > 0.95) {81 type = "bonus";82 color = "#f1c40f";83 value = 5;84 }85 86 objects.push({87 x: Math.random() * (canvas.width - 25),88 y: -25,89 width: 22,90 height: 22,91 type,92 color,93 speed: fallSpeed + Math.random() * 1.5,94 rotation: Math.random() * Math.PI,95 value,96 });97 }98 99 function drawBasket() {100 ctx.fillStyle = "#f1c40f";101 ctx.fillRect(basket.x, basket.y, basket.width, basket.height);102 ctx.strokeStyle = "#d4ac0d";103 ctx.strokeRect(basket.x, basket.y, basket.width, basket.height);104 }105 106 function drawObjects() {107 for (let o of objects) {108 ctx.save();109 ctx.translate(o.x + o.width / 2, o.y + o.height / 2);110 ctx.rotate(o.rotation);111 ctx.beginPath();112 if (o.type === "gem" || o.type === "bonus") {113 ctx.fillStyle = o.color;114 ctx.moveTo(0, -9);115 for (let i = 1; i < 6; i++) {116 const angle = i * (Math.PI * 2) / 5;117 ctx.lineTo(9 * Math.sin(angle), -9 * Math.cos(angle));118 }119 ctx.closePath();120 } else {121 ctx.fillStyle = o.color;122 ctx.arc(0, 0, 10, 0, Math.PI * 2);123 }124 ctx.fill();125 ctx.restore();126 }127 }128 129 function updateObjects() {130 for (let o of objects) {131 o.y += o.speed;132 o.rotation += 0.05;133 }134 objects = objects.filter(o => o.y < canvas.height + 25);135 }136 137 function checkCatch() {138 for (let i = objects.length - 1; i >= 0; i--) {139 const o = objects[i];140 if (141 o.y + o.height > basket.y &&142 o.x < basket.x + basket.width &&143 o.x + o.width > basket.x144 ) {145 if (o.type === "bomb") {146 gameOver = true;147 } else {148 score += o.value;149 scorePop(o.x + 10, o.y, o.value === 5 ? "+5" : "+1");150 // Gradually increase difficulty but within limits151 if (fallSpeed < maxFallSpeed) fallSpeed += 0.03;152 if (spawnRate < maxSpawnRate) spawnRate += 0.001;153 }154 objects.splice(i, 1);155 }156 }157 }158 159 const pops = [];160 function scorePop(x, y, text) {161 pops.push({ x, y, text, opacity: 1 });162 }163 164 function drawPops() {165 for (let i = pops.length - 1; i >= 0; i--) {166 const p = pops[i];167 ctx.font = "16px Poppins";168 ctx.fillStyle = `rgba(255,255,255,${p.opacity})`;169 ctx.fillText(p.text, p.x, p.y);170 p.y -= 1;171 p.opacity -= 0.02;172 if (p.opacity <= 0) pops.splice(i, 1);173 }174 }175 176 function moveBasket() {177 if (moveTarget !== null) {178 const dx = moveTarget - (basket.x + basket.width / 2);179 basket.x += dx * 0.15; // smooth slide180 if (Math.abs(dx) < 1) moveTarget = null;181 }182 basket.x = Math.max(0, Math.min(canvas.width - basket.width, basket.x));183 }184 185 function loop() {186 if (gameOver) {187 ctx.fillStyle = "rgba(0,0,0,0.6)";188 ctx.fillRect(0, 0, canvas.width, canvas.height);189 ctx.fillStyle = "#fff";190 ctx.font = "28px Poppins";191 ctx.fillText("Game Over", 115, 250);192 ctx.font = "18px Poppins";193 ctx.fillText("Score: " + score, 150, 285);194 ctx.fillText("Tap to Restart", 120, 320);195 return;196 }197 198 ctx.clearRect(0, 0, canvas.width, canvas.height);199 drawBasket();200 drawObjects();201 updateObjects();202 checkCatch();203 moveBasket();204 drawPops();205 document.getElementById("score").textContent = "Score: " + score;206 207 if (Math.random() < spawnRate) newObject();208 requestAnimationFrame(loop);209 }210 211 document.addEventListener("keydown", (e) => {212 if (e.key === "ArrowLeft") basket.x -= 10;213 if (e.key === "ArrowRight") basket.x += 10;214 });215 216 canvas.addEventListener("touchstart", (e) => {217 const touchX = e.touches[0].clientX - canvas.getBoundingClientRect().left;218 moveTarget = touchX;219 });220 221 canvas.addEventListener("touchmove", (e) => {222 const touchX = e.touches[0].clientX - canvas.getBoundingClientRect().left;223 moveTarget = touchX;224 });225 226 canvas.addEventListener("click", () => {227 if (gameOver) {228 score = 0;229 fallSpeed = 1.3;230 spawnRate = 0.025;231 objects = [];232 gameOver = false;233 loop();234 }235 });236 237 loop();238 </script>239</body>240</html>