AI game creator

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

No:26319

←

Prev Next

→

Blade ball
Developer User13006｜Date and time 23/11/29 4:49:51
Build time 72.975 sec｜Game capacity 4.224KB｜

Script

Sure, here's a simple game called "Blade Ball" implemented as a single HTML file with JavaScript. The game can be played on a smartphone and uses pictograms for visuals. Just copy and paste the following code into an HTML file:

To play the game on a smartphone, simply open the HTML file in a mobile browser. The game starts when you touch the screen, and the goal is to keep the blade ball bouncing by moving the blade with your finger. Each time the ball hits the top boundary, your score increases and the ball changes color. The current score is displayed at the top left corner of the screen. Have fun playing Blade Ball!

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f0f0f0;
            overflow: hidden;
        }

canvas {
            border: 2px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

// Initialize game
        function init() {
            canvas = document.getElementById("gameCanvas");
            context = canvas.getContext("2d");

// Set initial position of blade ball
            bladeBall = {
                x: canvas.width / 2,
                y: canvas.height - bladeSize - ballSize / 2,
                dx: 0,
                dy: 0,
                speed: 5,
                color: "#ff0000"
            };

// Add event listeners
            canvas.addEventListener("touchstart", startGame);

update();
        }

// Start game on touchstart
        function startGame() {
            if (!gameStarted) {
                gameStarted = true;
                canvas.removeEventListener("touchstart", startGame);
                moveBladeBall();
            }
        }

// Move the blade ball based on touch input
        function moveBladeBall() {
            canvas.addEventListener("touchmove", function(e) {
                let touchX = e.touches[0].clientX - canvas.offsetLeft;
                bladeBall.x = touchX;
            });
        }

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

// Draw blade
                context.fillStyle = "#000000";
                context.fillRect(bladeBall.x - bladeSize / 2, bladeBall.y - bladeSize / 2, bladeSize, bladeSize);

// Draw ball
                context.beginPath();
                context.arc(bladeBall.x, bladeBall.y, ballSize / 2, 0, Math.PI * 2);
                context.fillStyle = bladeBall.color;
                context.fill();
                context.closePath();

// Check collision with top boundary
                if (bladeBall.y < ballSize / 2) {
                    bladeBall.speed = -bladeBall.speed;
                    score++;
                    bladeBall.color = getRandomColor();
                }

// Check collision with sides
                if (bladeBall.x < ballSize / 2 || bladeBall.x > canvas.width - ballSize / 2) {
                    bladeBall.dx = -bladeBall.dx;
                }

// Move the ball
                bladeBall.y += bladeBall.speed;

// Show current score
                context.fillStyle = "#000000";
                context.font = "24px Arial";
                context.fillText("Score: " + score, 10, 30);

// Request animation frame
                requestAnimationFrame(update);
            }
        }

// Generate random color
        function getRandomColor() {
            return "#" + ((Math.random() * 0xffffff) << 0).toString(16);
        }

// Start the game
        init();
    </script>
</body>
</html>
```