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

No:30100

←

Prev Next

→

Boxing
Developer User14718｜Date and time 23/12/20 21:33:16
Build time 21.619 sec｜Game capacity 3.613KB｜

Script

Boxing Game

In this game, the player will see a boxing ring with two pictograms representing two boxers. When the game starts, one of the boxers will be selected randomly as the starting player and it will start rotating. The game is designed to be played on a smartphone, hence the circle boxing ring fits better on a smartphone screen. However, you can also view it on a desktop by resizing the browser window.

←

Prev　Next

→ 　

Back　

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

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

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

body {
            background-color: #f1f1f1;
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

#game {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            max-width: 400px;
        }

h1 {
            margin-bottom: 20px;
        }

button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin-bottom: 10px;
            cursor: pointer;
            border-radius: 5px;
        }

#boxing-ring {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 300px;
            height: 300px;
            background-color: #ffbf00;
            border: 10px solid #555;
            border-radius: 50%;
            position: relative;
            overflow: hidden;
        }

#player-1 {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 40px;
        }

#player-2 {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 40px;
        }

#player-1 img,
        #player-2 img {
            width: 100px;
            height: 100px;
            object-fit: contain;
        }
    </style>
</head>
<body>
    <div id="game">
        <h1>Boxing Game</h1>
        <button onclick="startGame()">Start Game</button>
        <div id="boxing-ring">
            <div id="player-1">
                <img src="pictogram-1.png" alt="Player 1">
            </div>
            <div id="player-2">
                <img src="pictogram-2.png" alt="Player 2">
            </div>
        </div>
    </div>

// Set initial positions of players
            player1.style.left = '20px';
            player2.style.right = '20px';

// Randomly choose the starting player
            const startingPlayer = Math.random() < 0.5 ? 1 : 2;
            const startingPlayerElement = startingPlayer === 1 ? player1 : player2;
            startingPlayerElement.style.animation = 'rotate 2s linear 0s infinite';

// Hide the start button
            document.querySelector('button').style.display = 'none';
        }
    </script>
</body>
</html>
```