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

No:20810

69

Tari Maker : Blocks: Ground. Hard Block. :Enemy's:..ALL
Developer User9100｜Date and time 23/10/11 5:45:02
Build time 24.759 sec｜Game capacity 4.852KB｜

Sure! Here's an example of a simple game called "Tari Maker" implemented as a single HTML file. The game allows you to place blocks and enemies using buttons and a joystick-like cursor. Pictograms for the blocks and enemies are used for visuals. Note that this is a basic example and can be expanded upon.

Tari Maker

In this example, the game area is represented by the `<div>` with the id "game". The blocks are represented by `<div>` elements with the class "block" and specific class names for each type (e.g., "ground", "hard-block", "enemy"). The joystick-like cursor is represented by another `<div>` with the id "cursor" and is moved using the mouse's coordinates. The user can select the type of block to place by clicking on the corresponding buttons (Ground, Hard Block, Goomba). When the game area is clicked, a block of the selected type will be placed at the clicked position. Note that you would need to provide the actual images (`emozi_all/ground.png`, `emozi_all/block.png`, `emozi_dog.png`, `emozi_himawari.png`) to be used for the visual representation of the blocks, enemies, and cursor. Make sure to include the images in the same directory as the HTML file or update the file paths accordingly. Feel free to modify and expand upon this code to fit your specific requirements and game logic.

→ 　

0　

0　

[PR]現在のフィギュア売れ筋ランキング

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

(C)2023 HisashiApp

Sure! Here's an example of a simple game called "Tari Maker" implemented as a single HTML file. The game allows you to place blocks and enemies using buttons and a joystick-like cursor. Pictograms for the blocks and enemies are used for visuals. Note that this is a basic example and can be expanded upon.

```html
<!DOCTYPE html>
<html>
<head>
    <title>Tari Maker</title>
    <style>
        body {
            text-align: center;
        }
        
        #game {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            margin: 0 auto;
            position: relative;
        }
        .block {
            width: 50px;
            height: 50px;
            position: absolute;
        }
        .ground {
            background: url('ground.png') center center no-repeat;
        }
        .hard-block {
            background: url('hard_block.png') center center no-repeat;
        }
        .enemy {
            background: url('goomba.png') center center no-repeat;
        }
        
        #controls {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>Tari Maker</h1>
    
    <div id="game"></div>
    
    <div id="controls">
        <button id="groundButton">Ground</button>
        <button id="hardBlockButton">Hard Block</button>
        <button id="enemyButton">Goomba</button>
    </div>
    
    <script>
        let currentBlock = "ground";
        
        document.getElementById("game").addEventListener("mousemove", moveCursor);
        document.getElementById("groundButton").addEventListener("click", setBlock);
        document.getElementById("hardBlockButton").addEventListener("click", setBlock);
        document.getElementById("enemyButton").addEventListener("click", setBlock);
        
        function moveCursor(event) {
            const cursor = document.getElementById("cursor");
            
            if (!cursor) {
                createCursor();
            }
            
            const gameRect = document.getElementById("game").getBoundingClientRect();
            
            const x = event.clientX - gameRect.left;
            const y = event.clientY - gameRect.top;
            
            cursor.style.left = `${x - 25}px`;
            cursor.style.top = `${y - 25}px`;
        }
        
        function createCursor() {
            const cursor = document.createElement("div");
            cursor.id = "cursor";
            cursor.style.width = "50px";
            cursor.style.height = "50px";
            cursor.style.position = "absolute";
            cursor.style.background = "url('cursor.png') center center no-repeat";
            cursor.style.pointerEvents = "none";
            
            document.getElementById("game").appendChild(cursor);
        }
        
        function setBlock(event) {
            const target = event.target;
            
            if (target.id === "groundButton") {
                currentBlock = "ground";
            } else if (target.id === "hardBlockButton") {
                currentBlock = "hard-block";
            } else if (target.id === "enemyButton") {
                currentBlock = "enemy";
            }
        }
        
        document.getElementById("game").addEventListener("click", placeBlock);
        
        function placeBlock(event) {
            const gameRect = document.getElementById("game").getBoundingClientRect();
            
            const x = event.clientX - gameRect.left - 25;
            const y = event.clientY - gameRect.top - 25;
            
            const block = document.createElement("div");
            block.className = `block ${currentBlock}`;
            block.style.left = `${x}px`;
            block.style.top = `${y}px`;
            
            document.getElementById("game").appendChild(block);
        }
    </script>
</body>
</html>
```

In this example, the game area is represented by the `<div>` with the id "game". The blocks are represented by `<div>` elements with the class "block" and specific class names for each type (e.g., "ground", "hard-block", "enemy"). The joystick-like cursor is represented by another `<div>` with the id "cursor" and is moved using the mouse's coordinates.

The user can select the type of block to place by clicking on the corresponding buttons (Ground, Hard Block, Goomba). When the game area is clicked, a block of the selected type will be placed at the clicked position.

Note that you would need to provide the actual images (`ground.png`, `hard_block.png`, `goomba.png`, `cursor.png`) to be used for the visual representation of the blocks, enemies, and cursor. Make sure to include the images in the same directory as the HTML file or update the file paths accordingly.

Feel free to modify and expand upon this code to fit your specific requirements and game logic.