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

No:23422

Make a satisfying art game
Developer User10854｜Date and time 23/10/30 13:14:01
Build time 39.91 sec｜Game capacity 2.27KB｜

Script

Sure! Here's an example of a simple art game implemented as a single HTML file using JavaScript. This game allows the user to create art by dragging and dropping pictograms onto a canvas.

Art Game

Drag and drop pictograms onto the canvas to create art!

In the above example, you can replace `"emozi_bear.png"`, `"emozi_chicken.png"`, etc., with the actual paths of the pictogram images you want to use. The game allows the user to drag and drop these pictograms onto the canvas to create art. You can further customize the game with different styles, more complex logic, or additional features to make it more satisfying.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

Sure! Here's an example of a simple art game implemented as a single HTML file using JavaScript. This game allows the user to create art by dragging and dropping pictograms onto a canvas.

```html
<!DOCTYPE html>
<html>
<head>
    <title>Art Game</title>
    <style>
        #canvas {
            width: 500px;
            height: 500px;
            border: 1px solid black;
        }
        .pictogram {
            width: 50px;
            height: 50px;
            margin: 5px;
            display: inline-block;
            cursor: grab;
        }
    </style>
</head>
<body>
    <h1>Art Game</h1>
    <h3>Drag and drop pictograms onto the canvas to create art!</h3>

function handleDragStart(event) {
                draggingElement = event.target;
            }

function handleDragOver(event) {
                event.preventDefault();
            }

function handleDrop(event) {
                event.preventDefault();
                canvas.appendChild(draggingElement.cloneNode(true));
            }

const pictograms = document.querySelectorAll('.pictogram');
            pictograms.forEach(pictogram => {
                pictogram.addEventListener('dragstart', handleDragStart);
            });

canvas.addEventListener('dragover', handleDragOver);
            canvas.addEventListener('drop', handleDrop);
        });
    </script>
</body>
</html>
```

In the above example, you can replace `"pictogram1.png"`, `"pictogram2.png"`, etc., with the actual paths of the pictogram images you want to use. The game allows the user to drag and drop these pictograms onto the canvas to create art. You can further customize the game with different styles, more complex logic, or additional features to make it more satisfying.