Smash The Window's game | AI game creator

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

No:12589

86

Smash The Window
Developer User4714｜Date and time 23/8/20 6:17:24
Build time 15.455 sec｜Game capacity 4.072KB｜

Sure! Here's a simple implementation of the "Smash The Window" game using HTML, JavaScript, and pictograms:

To play the game, you need to have two image files named "emozi_all/play.png" and "emozi_all/window.png" in the same directory as the HTML file. These images should represent the hammer and window, respectively. You can replace them with appropriate pictograms for your game. When you open the HTML file in a web browser on your smartphone, you'll see a game canvas with a window and a hammer. You need to tap/click on the window to smash it and earn points. The game keeps track of your score and moves the window to a random position after each successful smash.

→ 　

0　

0　

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

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

(C)2023 HisashiApp

Sure! Here's a simple implementation of the "Smash The Window" game using HTML, JavaScript, and pictograms:

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Smash The Window</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>

<script>
        // Pictograms for game elements
        const hammerImage = new Image();
        hammerImage.src = "hammer.png";
        
        const windowImage = new Image();
        windowImage.src = "window.png";
        
        // Game variables
        let canvas;
        let context;
        let hammerX;
        let hammerY;
        let hammerSize = 80;
        let windowX = 300;
        let windowY = 200;
        let windowSize = 200;
        let score = 0;
        
        // Initialize game
        function init() {
            canvas = document.getElementById("gameCanvas");
            context = canvas.getContext("2d");
        
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        
            // Set initial position of the hammer at center of the screen
            hammerX = (canvas.width - hammerSize) / 2;
            hammerY = (canvas.height - hammerSize) / 2;
            
            // Add event listener for touch/click events
            canvas.addEventListener("click", handleTap);
            
            setInterval(update, 20); // Run game update loop every 20ms
        }
        
        // Handle tap/click event
        function handleTap(event) {
            let tapX = event.clientX;
            let tapY = event.clientY;
            
            // Check if the tap/click is within the window area
            if (tapX > windowX && tapX < windowX + windowSize &&
                tapY > windowY && tapY < windowY + windowSize) {
                // Increase the score and move the window to a random position
                score++;
                moveWindowRandom();
            }
        }
        
        // Move the window to a random position
        function moveWindowRandom() {
            const minX = 100;
            const minY = 100;
            const maxX = canvas.width - windowSize - 100;
            const maxY = canvas.height - windowSize - 100;
            
            windowX = Math.floor(Math.random() * (maxX - minX + 1)) + minX;
            windowY = Math.floor(Math.random() * (maxY - minY + 1)) + minY;
        }
        
        // Game update loop
        function update() {
            context.clearRect(0, 0, canvas.width, canvas.height);
            
            drawWindow();
            drawHammer();
            drawScore();
        }
        
        // Draw the window on the canvas
        function drawWindow() {
            context.drawImage(windowImage, windowX, windowY, windowSize, windowSize);
        }
        
        // Draw the hammer on the canvas at the current position
        function drawHammer() {
            context.drawImage(hammerImage, hammerX, hammerY, hammerSize, hammerSize);
        }
        
        // Draw the score on the canvas
        function drawScore() {
            context.font = "bold 24px Arial";
            context.fillStyle = "white";
            context.fillText("Score: " + score, 20, 40);
        }
        
        // Start the game
        init();
    </script>
</body>
</html>
```

To play the game, you need to have two image files named "hammer.png" and "window.png" in the same directory as the HTML file. These images should represent the hammer and window, respectively. You can replace them with appropriate pictograms for your game.

When you open the HTML file in a web browser on your smartphone, you'll see a game canvas with a window and a hammer. You need to tap/click on the window to smash it and earn points. The game keeps track of your score and moves the window to a random position after each successful smash.