Erschaffe eine Kugel welche über den Bildschirm gezogen werden kann. Wenn man die Kugel loslässt fällt sie zum unterem Bildschirmrand.'s game

Click here for free DL of the app version that can save data.

No:28307

←

Prev Next

→

Erschaffe eine Kugel welche über den Bildschirm ge..ALL
Developer User14077｜Date and time 23/12/11 23:00:13
Build time 22.65 sec｜Game capacity 2.32KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
<title>Kugel-Spiel</title>
<style>
    canvas {
        border: 1px solid black;
        display: block;
        margin: 0 auto;
    }
</style>
</head>
<body>
<script>
    // Kugel-Spiel
    // Canvas erstellen
    const canvas = document.createElement("canvas");
    const context = canvas.getContext("2d");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    document.body.appendChild(canvas);

// Kugel Eigenschaften
    const ballRadius = 30;
    let ballX = canvas.width / 2;
    let ballY = 0;
    let fallingSpeed = 2;

let isDragging = false;
    let dragStartX;
    let dragEndX;

// Event Listener für Maus-/Touch-Bewegungen
    canvas.addEventListener("mousedown", startDragging);
    canvas.addEventListener("touchstart", startDragging);
    canvas.addEventListener("mousemove", drag);
    canvas.addEventListener("touchmove", drag);
    canvas.addEventListener("mouseup", endDragging);
    canvas.addEventListener("touchend", endDragging);

// Kugel zeichnen
    function drawBall() {
        context.beginPath();
        context.arc(ballX, ballY, ballRadius, 0, Math.PI * 2, false);
        context.fillStyle = "#FF0000";
        context.fill();
        context.closePath();
    }

// Kugel zum unteren Rand fallen lassen
    function letBallFall() {
        if (ballY + ballRadius >= canvas.height) {
            ballY = 0;
            ballX = canvas.width / 2;
        } else {
            ballY += fallingSpeed;
        }
    }

// Dragging starten
    function startDragging(event) {
        isDragging = true;
        dragStartX = event.clientX || event.touches[0].clientX;
    }

// Kugel beim Dragging bewegen
    function drag(event) {
        if (isDragging) {
            dragEndX = event.clientX || event.touches[0].clientX;
            let distance = dragEndX - dragStartX;
            ballX += distance;
            dragStartX = dragEndX;
        }
    }

// Dragging beenden
    function endDragging() {
        isDragging = false;
    }

// Spiele-Loop
    function gameLoop() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        drawBall();
        letBallFall();
        requestAnimationFrame(gameLoop);
    }

// Spiel starten
    gameLoop();
</script>
</body>
</html>