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

No:25332

←

Prev Next

→

自分だけのドット絵が描けるゲーム
Developer User12383｜Date and time 23/11/20 17:15:32
Build time 110.761 sec｜Game capacity 2.23KB｜

Script

了解しました。以下に、自分だけのドット絵が描けるゲームのHTMLファイルの例を示します。

Dot Art Game

Click or tap on the cells to draw your dot art. Use the buttons below to change the color.

このHTMLファイルは、20x20のセルを表示し、それぞれのセルをクリックまたはタップすることで自由に絵を描くことができます。ボタンを使用して描く色を切り替えることも可能です。どのセルにも色が設定されていない場合は、白色のセルが表示されます。

←

Prev　Next

→ 　

Back　

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

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

了解しました。以下に、自分だけのドット絵が描けるゲームのHTMLファイルの例を示します。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Dot Art Game</title>
    <style>
        .cell {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 1px solid gray;
            background-color: white;
        }
    </style>
</head>
<body>
    <h1>Dot Art Game</h1>
    <p>Click or tap on the cells to draw your dot art. Use the buttons below to change the color.</p>
    <div id="canvas">
        <script>
            var colors = ['red', 'orange', 'yellow', 'green', 'blue', 'purple', 'black'];
            var selectedColor = 'black';

function changeColor(color) {
                selectedColor = color;
            }

function draw(event) {
                if (event.target.classList.contains('cell')) {
                    event.target.style.backgroundColor = selectedColor;
                }
            }

for (var i = 0; i < 400; i++) {
                var cell = document.createElement('div');
                cell.classList.add('cell');
                cell.addEventListener('click', draw);
                cell.addEventListener('touchstart', draw);
                document.getElementById('canvas').appendChild(cell);
            }
        </script>
    </div>
    <div>
        <button onclick="changeColor('red')">🔴</button>
        <button onclick="changeColor('orange')">🟠</button>
        <button onclick="changeColor('yellow')">🟡</button>
        <button onclick="changeColor('green')">🟢</button>
        <button onclick="changeColor('blue')">🔵</button>
        <button onclick="changeColor('purple')">🟣</button>
        <button onclick="changeColor('black')">⚫</button>
    </div>
</body>
</html>
```