Spaces:

gaur3009
/

Csdl

Running

App Files Files Community

gaur3009 commited on 22 days ago

Commit

04e2228

verified ·

1 Parent(s): f62d19e

Update index.html

Browse files

Files changed (1) hide show

index.html +365 -18

index.html CHANGED Viewed

@@ -1,19 +1,366 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

 <!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width,initial-scale=1" />
+<title>Sling Humans — Prototype</title>
+<style>
+  html,body{height:100%;margin:0;background:linear-gradient(#bfe9ff,#eaf7ff);font-family:Inter,system-ui,Segoe UI,Arial}
+  #game {width:100%;height:100vh;overflow:hidden}
+  .ui {position:absolute;left:14px;top:14px;background:rgba(255,255,255,0.9);padding:10px;border-radius:10px;box-shadow:0 6px 18px rgba(13,38,76,0.08);z-index:10}
+  .ui button{background:#1976d2;color:white;border:none;padding:8px 12px;border-radius:8px;cursor:pointer}
+  .ui .small{font-size:13px;color:#0b2540;margin-top:6px}
+  .credits{position:absolute;right:14px;top:14px;background:rgba(255,255,255,0.9);padding:8px 10px;border-radius:8px;font-size:13px;z-index:10}
+</style>
+</head>
+<body>
+<div id="game"></div>
+<div class="ui">
+  <div style="font-weight:700">Sling Humans — Prototype</div>
+  <div style="margin-top:8px;display:flex;gap:8px">
+    <button id="restart">Restart</button>
+    <button id="next">Next Level</button>
+    <button id="powerup">Mega Launch</button>
+  </div>
+  <div class="small">Score: <span id="score">0</span> • Ammo: <span id="ammo">5</span> • Stars: <span id="stars">0</span></div>
+  <div style="margin-top:8px;font-size:13px;color:#444">Human: <select id="hType">
+    <option value="regular">Regular</option>
+    <option value="heavy">Heavyweight</option>
+    <option value="jumper">Jumper</option>
+    <option value="boomer">Boomer</option>
+  </select></div>
+</div>
+<div class="credits">Cartoon style — non graphic</div>
+<!-- Phaser 3 CDN -->
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser.min.js"></script>
+<script>
+/*
+  Sling Humans — Prototype
+  - Single-file Phaser 3 game
+  - Uses emoji + basic shapes
+  - Extendable: add assets, audio, more levels
+*/
+const WIDTH = Math.min(window.innerWidth, 1200);
+const HEIGHT = Math.min(window.innerHeight, 800);
+const config = {
+  type: Phaser.AUTO,
+  parent: 'game',
+  width: WIDTH,
+  height: HEIGHT,
+  backgroundColor: 0xe8f7ff,
+  physics: { default: 'matter', matter: { gravity: { y: 1.0 }, debug: false } },
+  scene: { preload, create, update }
+};
+const game = new Phaser.Game(config);
+let slingPos = { x: 160, y: HEIGHT - 180 };
+let currentHuman = null, isDragging=false;
+let dottedLines = [];
+let score = 0, ammo = 5, level = 0, stars = 0;
+let blocksGroup = [], targetsGroup = [];
+let megaLaunchActive = false;
+function preload() {
+  // no external assets; can load sprites/sounds here later
+}
+function create() {
+  const scene = this;
+  // ground
+  const ground = scene.matter.add.rectangle(WIDTH/2, HEIGHT-24, WIDTH, 48, { isStatic: true, label: 'ground' });
+  // catapult base visuals
+  scene.add.circle(slingPos.x, slingPos.y, 20, 0x6d4c41).setDepth(2);
+  scene.add.rectangle(slingPos.x+28, slingPos.y+12, 10, 40, 0x4e342e).setOrigin(0.5).setDepth(2);
+  // UI hooks
+  document.getElementById('restart').onclick = () => resetLevel(scene);
+  document.getElementById('next').onclick = () => nextLevel(scene);
+  document.getElementById('powerup').onclick = () => { megaLaunchActive = true; document.getElementById('powerup').innerText='Mega! (On)'; setTimeout(()=>{megaLaunchActive=false; document.getElementById('powerup').innerText='Mega Launch';}, 8000); };
+  // level build
+  buildLevel(scene, level);
+  // spawn human
+  spawnHuman(scene);
+  // input handlers
+  scene.input.on('pointerdown', (pointer) => {
+    if (!currentHuman) return;
+    const bodies = Phaser.Physics.Matter.Matter.Query.point([currentHuman.body], pointer);
+    if (bodies.length) {
+      isDragging = true;
+      scene.matter.body.setStatic(currentHuman.body, true); // hold it while dragging
+    }
+  });
+  scene.input.on('pointermove', (pointer) => {
+    if (!isDragging || !currentHuman) return;
+    // clamp drag radius
+    const maxDrag = 250;
+    const dx = pointer.x - slingPos.x;
+    const dy = pointer.y - slingPos.y;
+    const dist = Math.min(Math.hypot(dx,dy), maxDrag);
+    const angle = Math.atan2(dy,dx);
+    const px = slingPos.x + Math.cos(angle)*dist;
+    const py = slingPos.y + Math.sin(angle)*dist;
+    currentHuman.setPosition(px, py);
+    drawTrajectory(scene, currentHuman.x, currentHuman.y, slingPos.x - px, slingPos.y - py);
+  });
+  scene.input.on('pointerup', (pointer) => {
+    if (!isDragging || !currentHuman) return;
+    isDragging = false;
+    clearTrajectory();
+    // compute launch velocity
+    const dx = slingPos.x - currentHuman.x;
+    const dy = slingPos.y - currentHuman.y;
+    let power = Math.sqrt(dx*dx + dy*dy);
+    const angle = Math.atan2(dy, dx);
+    let velocityFactor = 0.08 * (megaLaunchActive ? 2.2 : 1.0); // mega launch stronger
+    const vx = Math.cos(angle) * power * velocityFactor;
+    const vy = Math.sin(angle) * power * velocityFactor;
+    scene.matter.body.setStatic(currentHuman.body, false);
+    scene.matter.body.setVelocity(currentHuman.body, { x: vx, y: vy });
+    // small spin
+    scene.matter.body.setAngularVelocity(currentHuman.body, (Math.random()*6-3));
+    // track with camera
+    scene.cameras.main.startFollow(currentHuman, true, 0.06, 0.06);
+    // reduce ammo and update UI
+    ammo = Math.max(0, ammo-1);
+    updateUi();
+    // after a delay spawn next if ammo left
+    scene.time.delayedCall(800, ()=>{ if (ammo>0) spawnHuman(scene); });
+  });
+  // collision detection with blocks/targets
+  scene.matter.world.on('collisionstart', (event) => {
+    event.pairs.forEach(pair => {
+      const { bodyA, bodyB } = pair;
+      [bodyA, bodyB].forEach(b => {
+        if (!b.gameObject) return;
+        const go = b.gameObject;
+        // if boomer explosion type and collision strong, explode
+        if (go.humanType === 'boomer') {
+          const speed = pair.collision.penetration && Math.hypot(pair.collision.penetration.x, pair.collision.penetration.y) || 0;
+          if (speed > 1.2 && !go.exploded) {
+            go.exploded = true;
+            explodeAt(scene, go.x, go.y);
+            scene.matter.world.remove(go.body);
+            go.destroy();
+          }
+        }
+      });
+      // scoring: check if block knocked far or high force
+      const bodies = [bodyA.gameObject, bodyB.gameObject];
+      bodies.forEach(obj => {
+        if (obj && obj.isBlock && !obj.scored) {
+          // if block speed large or rotated a lot -> scored
+          const speed = obj.body.speed || 0;
+          const angle = Math.abs(obj.rotation || 0);
+          if (speed > 3 || angle > 0.6) {
+            obj.scored = true;
+            score += (obj.blockType==='glass' ? 30 : obj.blockType==='wood' ? 15 : 8);
+            updateUi();
+            // small tint animation
+            scene.tweens.add({ targets: obj, alpha: 0.3, duration: 200, yoyo: true });
+          }
+        }
+      });
+    });
+  });
+  // camera bounds
+  scene.cameras.main.setBounds(0,0, WIDTH*1.5, HEIGHT);
+  scene.cameras.main.setZoom(1.0);
+}
+function update() {
+  // nothing heavy here; could check win/lose
+  const scene = this;
+  // check win: all targets destroyed
+  if (targetsGroup.every(t=>t.destroyed)) {
+    // level clear
+    if (!this._cleared) {
+      this._cleared = true;
+      scene.cameras.main.fadeOut(600, 255,255,255);
+      scene.time.delayedCall(700, ()=> {
+        // award stars
+        const blocksLeft = blocksGroup.filter(b=>!b.scored).length;
+        stars = Math.min(3, Math.max(1, Math.floor(score/100)+1));
+        document.getElementById('stars').innerText = stars;
+        alert('Level Cleared! Score: '+score+' Stars: '+stars);
+        nextLevel(scene);
+      });
+    }
+  }
+  // if out of ammo and no current human, show message
+  if (ammo<=0 && !currentHuman) {
+    // optional: show a small hint
+  }
+}
+/* ---------- Helpers ---------- */
+function spawnHuman(scene) {
+  const type = document.getElementById('hType').value;
+  const emoji = '🧑';
+  const container = scene.add.container(slingPos.x, slingPos.y);
+  const circle = scene.add.circle(0,0,22, 0xffcc80).setStrokeStyle(2,0xdb8b3b);
+  const txt = scene.add.text(-10,-16, emoji, { fontSize: '28px' });
+  container.add([circle, txt]);
+  scene.matter.add.gameObject(container, { shape: { type: 'circle', radius: 22 }, label: 'human' });
+  container.setDepth(3);
+  container.isHuman = true;
+  container.humanType = type;
+  // set physics params by type
+  const body = container.body;
+  body.friction = 0.8;
+  body.restitution = (type==='jumper' ? 0.8 : 0.2);
+  body.density = (type==='heavy' ? 0.009 : type==='boomer' ? 0.002 : 0.004);
+  // special behaviours
+  if (type==='jumper') {
+    container.onGroundBounce = true;
+  }
+  if (type==='boomer') {
+    // boomer will explode on high impact (handled in collision)
+  }
+  // mark human as current
+  currentHuman = container;
+  // small bobbing animation
+  scene.tweens.add({ targets: container, y: container.y-6, duration: 600, yoyo:true, repeat:-1 });
+  // ensure it collides with world and blocks
+  scene.matter.world.setCollisionCategory(0);
+  // collisions with blocks
+  blocksGroup.forEach(b => scene.matter.add.collider(container, b));
+  // collisions with targets
+  targetsGroup.forEach(t => scene.matter.add.collider(container, t));
+  // update UI
+  updateUi();
+}
+function buildLevel(scene, lvl) {
+  // clear old
+  blocksGroup.forEach(b=>{ try{ b.destroy(); }catch(e){} });
+  targetsGroup.forEach(t=>{ try{ t.destroy(); }catch(e){} });
+  blocksGroup = []; targetsGroup = [];
+  // create a simple structure of blocks depending on level
+  const baseX = WIDTH - 300;
+  const baseY = HEIGHT - 120;
+  const pattern = 2 + (lvl % 3); // complexity
+  for (let s=0; s<pattern; s++) {
+    const cols = 2 + s;
+    const rows = 2 + Math.floor(s/1);
+    const startX = baseX + s*70;
+    for (let i=0;i<cols;i++){
+      for (let j=0;j<rows;j++){
+        const x = startX + i*48;
+        const y = baseY - j*42;
+        const type = (Math.random()<0.15 ? 'metal' : Math.random()<0.4 ? 'glass' : 'wood');
+        const color = type==='metal' ? 0x90a4ae : type==='glass' ? 0x81d4fa : 0xffcc80;
+        const rect = scene.add.rectangle(x,y,44,38,color).setStrokeStyle(2,0x333333);
+        scene.matter.add.gameObject(rect, { shape: { type:'rectangle', width:44, height:38 }});
+        rect.isBlock = true; rect.blockType = type; rect.scored = false;
+        blocksGroup.push(rect);
+      }
+    }
+  }
+  // add a couple of "targets" (robots)
+  for (let k=0;k<Math.min(3, 1+lvl); k++) {
+    const tx = baseX + 40 + k*70;
+    const ty = baseY - (2+k%2)*42 - 20;
+    const container = scene.add.container(tx, ty);
+    const body = scene.add.circle(0,0,18,0xa5d6a7).setStrokeStyle(2,0x2e7d32);
+    const smile = scene.add.text(-9,-12, '🤖', {fontSize:'26px'});
+    container.add([body, smile]);
+    scene.matter.add.gameObject(container, { shape: { type: 'circle', radius: 18 }});
+    container.isTarget = true; container.destroyed = false;
+    targetsGroup.push(container);
+    // collision behavior: if high impact -> destroyed
+    scene.matter.world.on('collisionactive', (ev) => {
+      ev.pairs.forEach(pair => {
+        if ((pair.bodyA === container.body || pair.bodyB === container.body)) {
+          // check relative speed
+          const speed = pair.collision.penetration && Math.hypot(pair.collision.penetration.x, pair.collision.penetration.y) || 0;
+          if (speed > 1.1 && !container.destroyed) {
+            container.destroyed = true;
+            // small explosion
+            explodeAt(scene, container.x, container.y);
+            try { scene.matter.world.remove(container.body); } catch(e){}
+            container.destroy();
+            score += 80;
+            updateUi();
+          }
+        }
+      });
+    });
+  }
+  // camera reset
+  scene.cameras.main.setScroll(0,0);
+  scene.cameras.main.stopFollow();
+}
+function drawTrajectory(scene, x0, y0, vx, vy) {
+  // clear old
+  clearTrajectory();
+  // simulate points using simple physics approx (not matter sim)
+  const g = 1.0 * 60; // pixel/s^2 scale approx
+  const steps = 25;
+  const dt = 1/12;
+  for (let i=0;i<steps;i++){
+    const t = i*dt;
+    const px = x0 + vx * 60 * t; // 60 to scale to pixels
+    const py = y0 + vy * 60 * t + 0.5 * g * t * t;
+    const dot = scene.add.circle(px, py, 3, 0x0d47a1).setAlpha(0.6).setDepth(1);
+    dottedLines.push(dot);
+  }
+}
+function clearTrajectory() {
+  dottedLines.forEach(d=>d.destroy());
+  dottedLines = [];
+}
+function explodeAt(scene, x, y) {
+  // particle-ish effect using small circles
+  for (let i=0;i<18;i++){
+    const p = scene.add.circle(x, y, 4, 0xff8a80);
+    scene.tweens.add({ targets: p, x: x + Phaser.Math.Between(-120,120), y: y + Phaser.Math.Between(-120,120), alpha: 0, duration: 500 + Math.random()*400, onComplete: ()=>p.destroy() });
+  }
+}
+function updateUi() {
+  document.getElementById('score').innerText = score;
+  document.getElementById('ammo').innerText = ammo;
+  document.getElementById('stars').innerText = stars;
+}
+function resetLevel(scene) {
+  score = 0; ammo = 5; stars = 0;
+  currentHuman = null; isDragging=false; megaLaunchActive=false;
+  updateUi();
+  // remove all matter children and rebuild scene - easiest: reload page
+  window.location.reload();
+}
+function nextLevel(scene) {
+  level += 1; ammo = 5 + Math.min(level, 3);
+  score = score + 50; // small bonus
+  currentHuman = null;
+  buildLevel(scene, level);
+  spawnHuman(scene);
+  updateUi();
+}
+</script>
+</body>
+</html>