TrxShell [ mangaberri.com ]

Name	Size	Permission
background.png	1.31 MB	-rw-rw-r--
basketball.php	7.5 KB	-rw-rw-r--
bird.php	14.99 KB	-rw-rw-r--
capybara_jump.png	1.36 MB	-rw-rw-r--
capybara_stand.png	1.34 MB	-rw-rw-r--
galaxian.php	11.92 KB	-rw-rw-r--
rock_pipe.png	1.49 MB	-rw-rw-r--
snake.php	4.31 KB	-rw-rw-r--
storm_cloud.png	1.35 MB	-rw-rw-r--

Code Editor : basketball.php

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Basketball Shoot - Enhanced</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            background: #222;
            overflow: hidden;
        }

canvas {
            display: block;
            background: #87ceeb;
        }
    </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;

let ball = {
            x: 100,
            y: canvas.height - 100,
            r: 15,
            vx: 0,
            vy: 0,
            isMoving: false
        };
        const gravity = 0.4;
        let score = 0;
        let level = 1;

const hoop = {
            x: canvas.width - 200,
            y: 200,
            w: 60,
            h: 10,
            dx: 2
        };

let dragging = false;
        let dragStart = null;
        let power = 0;
        let angle = Math.PI / 4;

canvas.addEventListener("pointerdown", (e) => {
            attemptStartTime = Date.now();
            if (!ball.isMoving) {
                dragging = true;
                dragStart = {
                    x: e.clientX,
                    y: e.clientY
                };
            }
        });

canvas.addEventListener("pointermove", (e) => {
            if (dragging) {
                const dx = e.clientX - dragStart.x;
                const dy = dragStart.y - e.clientY;
                angle = Math.atan2(dy, dx);
                power = Math.min(25, Math.sqrt(dx * dx + dy * dy) / 5);
            }
        });

canvas.addEventListener("pointerup", () => {
            if (dragging) {
                ball.vx = power * Math.cos(angle);
                ball.vy = -power * Math.sin(angle);
                ball.isMoving = true;
                dragging = false;
            }
        });

function drawHoop() {
            ctx.fillStyle = "#fff";
            ctx.fillRect(hoop.x, hoop.y, hoop.w, hoop.h);
            ctx.beginPath();
            ctx.arc(hoop.x + hoop.w / 2, hoop.y, 30, 0, Math.PI, false);
            ctx.strokeStyle = "orange";
            ctx.lineWidth = 4;
            ctx.stroke();
        }

function drawBall() {
            ctx.beginPath();
            ctx.arc(ball.x, ball.y, ball.r, 0, Math.PI * 2);
            ctx.fillStyle = "orange";
            ctx.fill();
            ctx.strokeStyle = "#333";
            ctx.stroke();
        }

function drawPowerBar() {
            if (!dragging) return;
            const barWidth = 150;
            const barHeight = 10;
            ctx.fillStyle = "white";
            ctx.fillRect(20, canvas.height - 40, barWidth, barHeight);
            ctx.fillStyle = "limegreen";
            ctx.fillRect(20, canvas.height - 40, (power / 25) * barWidth, barHeight);
            ctx.strokeStyle = "black";
            ctx.strokeRect(20, canvas.height - 40, barWidth, barHeight);
        }

function checkScore() {
            if (
                ball.x > hoop.x && ball.x < hoop.x + hoop.w &&
                ball.y > hoop.y && ball.y < hoop.y + hoop.h + ball.r
            ) {

let elapsed = (Date.now() - attemptStartTime) / 1000;
                lastShotTime = elapsed;
                if (!bestTime || elapsed < bestTime) bestTime = elapsed;

totalTime += elapsed;
                attemptCount++;
                averageTime = totalTime / attemptCount;

let medal = '';
                if (elapsed <= 1.5) medal = '🏅 Gold';
                else if (elapsed <= 3) medal = '🥈 Silver';
                else medal = '🥉 Bronze';

score++;
                if (score % 3 === 0) {
                    level++;
                    hoop.dx += 0.5;
                }
                resetBall();
            } else if (ball.y > canvas.height || ball.x > canvas.width || ball.x < 0) {
                resetBall();
            }
        }

function resetBall() {
            ball.x = 100;
            ball.y = canvas.height - 100;
            ball.vx = 0;
            ball.vy = 0;
            ball.isMoving = false;
        }

function moveHoop() {
            hoop.x += hoop.dx;
            if (hoop.x < 50 || hoop.x + hoop.w > canvas.width - 50) {
                hoop.dx *= -1;
            }
        }

function drawUI() {
            ctx.fillStyle = "#fff";
            ctx.font = "20px Arial";
            ctx.fillText("Score: " + score, 20, 30);
            ctx.fillText("Level: " + level, 20, 60);

if (lastShotTime) {
                ctx.fillText(`Last Shot: ${lastShotTime.toFixed(2)}s`, 20, 90);
                ctx.fillText(`Medal: ${lastMedal}`, 20, 120);
            }
            if (averageTime && attemptCount > 0) {
                ctx.fillText(`Attempts: ${attemptCount}`, 20, 150);
                ctx.fillText(`Avg Time: ${averageTime.toFixed(2)}s`, 20, 180);
            }
        }

function drawTrajectory() {
            if (!dragging) return;

const points = [];
            const x = ball.x;
            const y = ball.y;
            const vx = power * Math.cos(angle);
            const vy = -power * Math.sin(angle);
            const timeStep = 0.1;
            const maxT = Math.min(5, power * 0.2 + 1); // Duration based on power

for (let t = 0; t < maxT; t += timeStep) {
                let px = x + vx * t;
                let py = y + vy * t + 0.5 * gravity * t * t;
                if (py > canvas.height) break;

// Optional: Clip if hits hoop
                if (
                    px > hoop.x && px < hoop.x + hoop.w &&
                    py > hoop.y && py < hoop.y + hoop.h
                ) {
                    break;
                }

points.push({
                    x: px,
                    y: py,
                    alpha: 1 - t / maxT
                });
            }

for (let i = 0; i < points.length - 1; i++) {
                const p1 = points[i];
                const p2 = points[i + 1];

const hue = 120 - Math.min(power / 15, 1) * 120; // green to red
                ctx.strokeStyle = `hsla(${hue}, 100%, 50%, ${p1.alpha})`;
                ctx.lineWidth = 2;
                ctx.beginPath();
                ctx.moveTo(p1.x, p1.y);
                ctx.lineTo(p2.x, p2.y);
                ctx.stroke();
            }
        }

let attemptStartTime = Date.now();
        let lastShotTime = 0;
        let bestTime = null;

let totalTime = 0;
        let attemptCount = 0;
        let averageTime = 0;

let lastMedal = '';

function gameLoop() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

moveHoop();
            drawHoop();
            drawTrajectory();
            drawBall();
            drawPowerBar();
            drawUI();

if (ball.isMoving) {
                ball.vy += gravity;
                ball.x += ball.vx;
                ball.y += ball.vy;
                checkScore();
            }

requestAnimationFrame(gameLoop);
        }

gameLoop();
    </script>
</body>

</html>

${this.title}

Code Editor : basketball.php