Make a game with jelly physics and a red blob as the main character. It as to be 2d and the background must be dark blue's game

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

No:17807

←

Prev Next

→

Make a game with jelly physics and a red blob as t..ALL
Developer User7797｜Date and time 23/9/24 18:22:28
Build time 50.513 sec｜Game capacity 5.505KB｜

Script

Sure, below is a basic implementation of a game with jelly physics featuring a red blob as the main character. The game is designed for smartphone operation, and the background is dark blue. The game has simple mechanics where you can control the blob's movement by tilting your phone left or right. The objective is to collect as many stars as possible while avoiding obstacles.

Please note that this is a basic implementation, and you can customize it further according to your preferences, like adding scores, levels, or additional game elements as per your requirements.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Jelly Blob Game</title>
    <style>
        body {
            background-color: #000066;
            margin: 0;
            overflow: hidden;
        }

canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>

// Game Variables
        let canvas, ctx;
        let blob;
        let stars = [];
        let obstacles = [];
        let tilt = 0;

// Initialize the game
        function init() {
            canvas = document.getElementById("gameCanvas");
            ctx = canvas.getContext("2d");
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;

blob = {
                x: canvas.width / 2,
                y: canvas.height / 2,
                radius: 50,
                velocity: 0,
                tilt: tilt
            };

// Create stars
            for (let i = 0; i < 10; i++) {
                stars.push({
                    x: getRandomInt(STAR_RADIUS, canvas.width - STAR_RADIUS),
                    y: getRandomInt(STAR_RADIUS, canvas.height - STAR_RADIUS)
                });
            }

// Create obstacles
            for (let i = 0; i < 3; i++) {
                obstacles.push({
                    x: getRandomInt(STAR_RADIUS, canvas.width - OBSTACLE_WIDTH - STAR_RADIUS),
                    y: getRandomInt(STAR_RADIUS, canvas.height - OBSTACLE_HEIGHT - STAR_RADIUS)
                });
            }

document.addEventListener("devicemotion", updateTilt);
            requestAnimationFrame(update);
        }

// Update tilt based on device motion
        function updateTilt(event) {
            let acceleration = event.accelerationIncludingGravity;
            tilt = -acceleration.x / 5;
        }

// Update game state
        function update() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// Blob movement
            blob.tilt = tilt;
            blob.velocity += GRAVITY;
            blob.y += blob.velocity;

// Jelly physics effect
            let sway = Math.sin(blob.tilt * Math.PI / 180) * JELLY_FORCE;
            blob.x += sway;

// Blob boundaries collision
            if (blob.x < 0) blob.x = 0;
            if (blob.x > canvas.width) blob.x = canvas.width;
            if (blob.y > canvas.height - blob.radius) blob.y = canvas.height - blob.radius;

// Draw blob
            ctx.fillStyle = "red";
            ctx.beginPath();
            ctx.arc(blob.x, blob.y, blob.radius, 0, Math.PI * 2, false);
            ctx.closePath();
            ctx.fill();

// Draw stars
            ctx.fillStyle = "yellow";
            for (let i = 0; i < stars.length; i++) {
                let star = stars[i];
                ctx.beginPath();
                ctx.arc(star.x, star.y, STAR_RADIUS, 0, Math.PI * 2, false);
                ctx.closePath();
                ctx.fill();

// Collect stars
                if (
                    blob.x - blob.radius < star.x &&
                    blob.x + blob.radius > star.x &&
                    blob.y - blob.radius < star.y &&
                    blob.y + blob.radius > star.y
                ) {
                    stars.splice(i, 1);
                }
            }

// Draw obstacles
            ctx.fillStyle = "white";
            for (let i = 0; i < obstacles.length; i++) {
                let obstacle = obstacles[i];
                ctx.fillRect(obstacle.x, obstacle.y, OBSTACLE_WIDTH, OBSTACLE_HEIGHT);

// Obstacle collision
                if (
                    blob.x + blob.radius > obstacle.x &&
                    blob.x - blob.radius < obstacle.x + OBSTACLE_WIDTH &&
                    blob.y + blob.radius > obstacle.y &&
                    blob.y - blob.radius < obstacle.y + OBSTACLE_HEIGHT
                ) {
                    gameOver();
                }
            }

requestAnimationFrame(update);
        }

// Game over
        function gameOver() {
            document.removeEventListener("devicemotion", updateTilt);
            alert("Game Over");
            location.reload();
        }

// Utility function to get random integer within a range
        function getRandomInt(min, max) {
            min = Math.ceil(min);
            max = Math.floor(max);
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }

// Initialize the game when the page is loaded
        window.addEventListener("load", init);
    </script>
</body>
</html>
```

Please note that this is a basic implementation, and you can customize it further according to your preferences, like adding scores, levels, or additional game elements as per your requirements.