Spikeball rolling And destroying squares's game

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

No:17299

←

Prev Next

→

Spikeball rolling And destroying squares
Developer User7638｜Date and time 23/9/23 3:49:58
Build time 53.354 sec｜Game capacity 5.256KB｜

Script

Sure! Here's a simple game where you control a spikeball rolling and destroying squares using JavaScript. The game will be designed for smartphone operation and will use pictograms.

To play the game, simply save the above code as an HTML file, open it in any web browser, and you'll be able to control the spikeball by tapping/moving on the left or right side of the game canvas on your smartphone screen. The objective is to collide the spikeball with the squares to destroy them and earn points. The game will end when all the squares are destroyed, and your final score will be displayed.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームアプリランキング

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

Sure! Here's a simple game where you control a spikeball rolling and destroying squares using JavaScript. The game will be designed for smartphone operation and will use pictograms.

```html
<!DOCTYPE html>
<html>
<head>
<title>Spikeball Rolling Game</title>
<style>
    canvas {
        border: 1px solid black;
    }
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="400"></canvas>

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

// Create the spikeball
        spikeball = {
            x: canvas.width / 2,
            y: canvas.height - 30,
            radius: 10,
            color: "#0095DD",
            speed: 5,
            direction: 0 // 0 for left, 1 for right
        };

// Create initial squares
        for (var i = 0; i < 5; i++) {
            squares.push({
                x: Math.random() * (canvas.width - 50),
                y: Math.random() * (canvas.height - 250),
                width: 50,
                height: 50,
                color: getRandomColor()
            });
        }

// Add smartphone touch events
        canvas.addEventListener("touchstart", handleTouchStart, false);
        canvas.addEventListener("touchmove", handleTouchMove, false);

// Start the game loop
        gameLoop = setInterval(update, 10);
    }

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

// Move the spikeball
        if (spikeball.direction === 0) {
            spikeball.x -= spikeball.speed;
        } else {
            spikeball.x += spikeball.speed;
        }

// Handle spikeball reaching boundaries
        if (spikeball.x < spikeball.radius || spikeball.x > canvas.width - spikeball.radius) {
            spikeball.direction = 1 - spikeball.direction; // Reverse direction
        }

// Draw the spikeball
        context.beginPath();
        context.arc(spikeball.x, spikeball.y, spikeball.radius, 0, Math.PI * 2, false);
        context.fillStyle = spikeball.color;
        context.fill();
        context.closePath();

// Draw the squares
        for (var i = 0; i < squares.length; i++) {
            var square = squares[i];
            context.beginPath();
            context.rect(square.x, square.y, square.width, square.height);
            context.fillStyle = square.color;
            context.fill();
            context.closePath();

// Check collision with spikeball
            if (spikeball.x + spikeball.radius > square.x && spikeball.x - spikeball.radius < square.x + square.width &&
                spikeball.y + spikeball.radius > square.y && spikeball.y - spikeball.radius < square.y + square.height) {

// Spikeball collided with square, remove the square
                squares.splice(i, 1);
                score++;
            }
        }

// Display score
        context.font = "16px Arial";
        context.fillStyle = "#0095DD";
        context.fillText("Score: " + score, 10, 20);

// Check game over condition
        if (squares.length === 0) {
            gameOver();
        }
    }
    
    // Handle touch start event
    function handleTouchStart(event) {
        event.preventDefault();
    
        var touch = event.touches[0];
    
        if (touch.pageX < canvas.width / 2) {
            spikeball.direction = 0; // Move left
        } else {
            spikeball.direction = 1; // Move right
        }
    }
    
    // Handle touch move event
    function handleTouchMove(event) {
        event.preventDefault();
    
        var touch = event.touches[0];
    
        if (touch.pageX < canvas.width / 2) {
            spikeball.direction = 0; // Move left
        } else {
            spikeball.direction = 1; // Move right
        }
    }

// Game over
    function gameOver() {
        clearInterval(gameLoop);
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.font = "30px Arial";
        context.fillStyle = "#0095DD";
        context.fillText("Game Over", canvas.width / 2 - 90, canvas.height / 2);
        context.fillText("Final Score: " + score, canvas.width / 2 - 120, canvas.height / 2 + 40);
    }

// Helper function to generate a random color
    function getRandomColor() {
        var letters = "0123456789ABCDEF";
        var color = "#";
        for (var i = 0; i < 6; i++) {
            color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
    }

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