shoot clowns with a shotgun's game

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

No:15836

136

←

Prev Next

→

shoot clowns with a shotgun
Developer User6918｜Date and time 23/9/12 12:41:02
Build time 37.943 sec｜Game capacity 3.948KB｜

Script

Sure! Here's a simple game where you can shoot clowns with a shotgun using pictograms. It is implemented as a single HTML file, enclosed in script tags, and contains JavaScript for game logic. You can play it on a smartphone:

This game creates clowns that move horizontally across the screen. Your task is to tap/click on any clown to shoot them with a shotgun. Each successful shot increases your score by 10 points. The game is over if any clown reaches the right end of the canvas. Enjoy shooting the clowns!

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Clown Shooter</title>
    <style>
        canvas {
            border: 2px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="300"></canvas>

// Add event listener for touch input
        canvas.addEventListener("click", shootClown);

// Create Clown object
        var Clown = function(x, y) {
            this.x = x;
            this.y = y;
            this.width = 50;
            this.height = 50;
            this.img = new Image();
            this.img.src = "clown.png";
        }

// Draw Clown on canvas
        Clown.prototype.draw = function() {
            ctx.drawImage(this.img, this.x, this.y, this.width, this.height);
        }

// Update Clown position
        Clown.prototype.update = function() {
            this.x += 1; // Move clown horizontally

if (this.x > canvas.width) {
                this.y = Math.random() * (canvas.height - this.height); // Randomize clown vertical position if it reaches right end
                this.x = -this.width; // Reset clown to left side of the canvas
            }
        }

// Create initial set of clowns
        function createClowns() {
            for (var i = 0; i < 5; i++) {
                var x = Math.random() * (canvas.width - 50);
                var y = Math.random() * (canvas.height - 50);
                clowns.push(new Clown(x, y));
            }
        }

// Draw everything on canvas
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            for (var i = 0; i < clowns.length; i++) {
                clowns[i].draw();
            }

// Draw score
            ctx.font = "20px Arial";
            ctx.fillText("Score: " + score, 10, 30);
        }

// Update game logic
        function update() {
            for (var i = 0; i < clowns.length; i++) {
                clowns[i].update();

// Check if a clown has reached the right end of the canvas
                if (clowns[i].x > canvas.width) {
                    gameOver();
                }
            }
        }

// Game Over function
        function gameOver() {
            alert("Game Over! Your Score: " + score);
            clearInterval(gameLoop);
        }

// Shoot Clown
        function shootClown(event) {
            var rect = canvas.getBoundingClientRect();
            var clickX = event.clientX - rect.left;
            var clickY = event.clientY - rect.top;

for (var i = 0; i < clowns.length; i++) {
                if (clickX >= clowns[i].x && clickX <= clowns[i].x + clowns[i].width &&
                    clickY >= clowns[i].y && clickY <= clowns[i].y + clowns[i].height) {
                    clowns.splice(i, 1); // Remove clown from array
                    score += 10; // Increase score
                    break;
                }
            }
        }

// Game Loop
        function gameLoop() {
            draw();
            update();
        }

// Start the game
        createClowns();
        var gameLoop = setInterval(gameLoop, 20);
    </script>
</body>
</html>
```