100 squares throwing boomerangs at each other's game

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

No:17100

←

Prev Next

→

100 squares throwing boomerangs at each other
Developer User7570｜Date and time 23/9/22 8:43:30
Build time 39.561 sec｜Game capacity 5.583KB｜

Script

Sure! Here's a simple game where 100 squares throw boomerangs at each other. Each square can be controlled using touch gestures on a smartphone. The game is implemented as a single HTML file, enclosed in script tags, and written in JavaScript. Here's the code:

To play the game on a smartphone, open the HTML file in a web browser on your device. The game starts automatically. You can tap on any square to make it move in a random direction. The squares will continue moving until you tap on them again to stop their movement. Have fun playing the boomerang game!

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

Here's the code:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Boomerang Game</title>
    <script>
        // Get the canvas and context
        var canvas = document.getElementById('gameCanvas');
        var ctx = canvas.getContext('2d');

// Set canvas size
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

// Game variables
        var squares = [];
        var numSquares = 100;

// Square object
        function Square(x, y, color) {
            this.x = x;
            this.y = y;
            this.color = color;
            this.speedX = 0;
            this.speedY = 0;

// Update square position
            this.update = function() {
                this.x += this.speedX;
                this.y += this.speedY;

// Ensure square stays within canvas boundaries
                if (this.x > canvas.width) {
                    this.x = canvas.width;
                    this.speedX = -this.speedX;
                }
                if (this.x < 0) {
                    this.x = 0;
                    this.speedX = -this.speedX;
                }
                if (this.y > canvas.height) {
                    this.y = canvas.height;
                    this.speedY = -this.speedY;
                }
                if (this.y < 0) {
                    this.y = 0;
                    this.speedY = -this.speedY;
                }

// Draw the square
                ctx.fillStyle = this.color;
                ctx.fillRect(this.x, this.y, 50, 50);
            };
        }

// Initialize the game
        function startGame() {
            for (var i = 0; i < numSquares; i++) {
                var x = Math.random() * canvas.width;
                var y = Math.random() * canvas.height;
                var color = '#' + ((1 << 24) * Math.random() | 0).toString(16);
                var square = new Square(x, y, color);
                squares.push(square);
            }

// Update game state
            setInterval(updateGame, 10);
        }

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

for (var i = 0; i < squares.length; i++) {
                squares[i].update();
            }
        }

// Handle touch events
        function onTouchStart(event) {
            event.preventDefault();

var touches = event.changedTouches;
            for (var i = 0; i < touches.length; i++) {
                var touch = touches[i];
                var x = touch.pageX;
                var y = touch.pageY;

for (var j = 0; j < squares.length; j++) {
                    var square = squares[j];

// Check if touch event is inside a square
                    if (x >= square.x && x <= square.x + 50 &&
                        y >= square.y && y <= square.y + 50) {
                        square.speedX = (Math.random() - 0.5) * 10;
                        square.speedY = (Math.random() - 0.5) * 10;
                    }
                }
            }
        }

function onTouchMove(event) {
            event.preventDefault();
            
            var touches = event.changedTouches;
            for (var i = 0; i < touches.length; i++) {
                var touch = touches[i];
                var x = touch.pageX;
                var y = touch.pageY;

for (var j = 0; j < squares.length; j++) {
                    var square = squares[j];

function onTouchEnd(event) {
            event.preventDefault();

for (var j = 0; j < squares.length; j++) {
                    var square = squares[j];

// Check if touch event is inside a square
                    if (x >= square.x && x <= square.x + 50 &&
                        y >= square.y && y <= square.y + 50) {
                        square.speedX = 0;
                        square.speedY = 0;
                    }
                }
            }
        }

// Add event listeners
        canvas.addEventListener('touchstart', onTouchStart);
        canvas.addEventListener('touchmove', onTouchMove);
        canvas.addEventListener('touchend', onTouchEnd);

// Start the game
        startGame();
    </script>
</head>
<body>
    <canvas id="gameCanvas"></canvas>
</body>
</html>
```