A game in which you can draw dots! Vertical 30×The screen consists of a total of 450 square squares, 15 horizontal. By tapping on each square, you can fill in the square. The color to be filled in can be selected from the Palette below. The color can be set freely by selecting tone, saturation, and lightness/darkness. Similarly, you can change the background color by tapping Background Color below. The default background color is gray, and the palette is black.'s game

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

No:6202

2721

←

Prev Next

→

A game in which you can draw dots! Vertical 30×The..ALL
Developer もちきなこ｜Date and time 23/7/1 20:53:21
Build time 33.939 sec｜Game capacity 4.172KB｜

Script

以下は、指定された要件に基づいて作成されたドット絵エディタのHTMLファイルです。スクリプトタグで囲まれたJavaScriptコードが実行され、ゲームとして遊ぶことができます。

パレット

背景色

このHTMLファイルにより、30×15のドット絵エディタが表示されます。各マスをタップしてドットを塗りつぶすことができます。パレットの色を変更して色を選択し、背景色も変更することができます。デフォルトのパレットの色は黒で、背景色は灰色です。

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>ドット絵エディタ</title>
    <style>
        body {
            background-color: gray;
        }

#canvas {
            width: 450px;
            height: 675px;
            margin: 0 auto;
            border: 1px solid black;
            cursor: pointer;
        }

.palette {
            display: inline-block;
            width: 20px;
            height: 20px;
            margin: 5px;
            border: 1px solid gray;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="canvas"></div>
    <div>
        <h3>パレット</h3>
        <div class="palette" style="background-color: black;"></div>
        <div class="palette" style="background-color: red;"></div>
        <div class="palette" style="background-color: green;"></div>
        <div class="palette" style="background-color: blue;"></div>
    </div>
    <div>
        <h3>背景色</h3>
        <div class="palette" id="background-color" style="background-color: gray;"></div>
    </div>

const numRows = 30;
        const numCols = 15;
        const cellSize = 15;

const grid = Array.from({ length: numRows }, () => Array.from({ length: numCols }, () => false));
        let currentColor = "black";
        let currentBackgroundColor = "gray";

function initializeGrid() {
            canvas.style.width = numCols * cellSize + "px";
            canvas.style.height = numRows * cellSize + "px";

for (let row = 0; row < numRows; row++) {
                for (let col = 0; col < numCols; col++) {
                    const cell = document.createElement("div");
                    cell.style.width = cellSize + "px";
                    cell.style.height = cellSize + "px";
                    cell.style.backgroundColor = currentBackgroundColor;
                    cell.style.float = "left";
                    cell.style.boxSizing = "border-box";
                    cell.style.border = "1px solid #ccc";

cell.addEventListener("click", () => {
                        grid[row][col] = !grid[row][col];
                        cell.style.backgroundColor = grid[row][col] ? currentColor : currentBackgroundColor;
                    });

canvas.appendChild(cell);
                }
            }
        }

initializeGrid();
        setPaletteColors();
        setBackgroundColor();
    </script>
</body>
</html>
```