ドット絵が描けるゲーム！縦30×横15の計450個の正方形のマスからなる画面を表示します。それぞれのマスをタップすることで、そのマスを塗り潰すことができます。下の『パレット』から、塗り潰す色を選択することができます。色は、色調,彩度,明暗を選択することができ、自由に色を設定することが出来ます。同様に、下の『背景色』をタップすると、背景の色を変更することができます。デフォルトの背景色は白、パレットは黒です。's game

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

No:5370

2020

←

Prev Next

→

ドット絵が描けるゲーム！縦30×横15の計450個の正方形のマスからなる画面を表示します。それぞ..ALL
Developer もちきなこ｜Date and time 23/6/30 0:22:24
Build time 26.539 sec｜Game capacity 2.744KB｜

Script

了解しました。以下が要件を満たすドット絵が描けるゲームの実装例です。

パレット

背景色

このゲームでは、縦30×横15の計450個の正方形のマスからなる画面を表示します。マスをタップすることで、そのマスを選択した色で塗り潰すことができます。パレットや背景色をタップすることで、それぞれの色を選択することもできます。パレットの色を選択する際は、各色のボックスをタップしてください。例えば、黒を選択したい場合は黒いボックスをタップしてください。同様に、背景色を選択する際も各色のボックスをタップしてください。この実装例ではJavaScriptを使用しています。JavaScriptの部分はscriptタグで囲まれており、即座に実行される形でプログラムが記述されています。

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

了解しました。以下が要件を満たすドット絵が描けるゲームの実装例です。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ドット絵が描けるゲーム</title>
    <style>
        .pixel {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 1px solid #000;
        }
        .palette {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 1px solid #000;
            margin: 2px;
        }
    </style>
</head>
<body>
    <div id="canvas"></div>
    <div>
        <h3>パレット</h3>
        <div class="palette" onclick="setColor('#000')"></div>
        <div class="palette" onclick="setColor('#f00')"></div>
        <div class="palette" onclick="setColor('#0f0')"></div>
        <div class="palette" onclick="setColor('#00f')"></div>
    </div>
    <div>
        <h3>背景色</h3>
        <div class="palette" onclick="setBackground('#fff')"></div>
        <div class="palette" onclick="setBackground('#eee')"></div>
        <div class="palette" onclick="setBackground('#ddd')"></div>
        <div class="palette" onclick="setBackground('#ccc')"></div>
    </div>

for (let i = 0; i < 450; i++) {
            const pixel = document.createElement('div');
            pixel.classList.add('pixel');
            pixel.addEventListener('click', function(){
                this.style.backgroundColor = currentColor;
            });
            canvas.appendChild(pixel);
            pixels.push(pixel);
        }

let currentColor = '#000';
        function setColor(color) {
            currentColor = color;
        }

function setBackground(color) {
            canvas.style.backgroundColor = color;
        }
    </script>
</body>
</html>
```

このゲームでは、縦30×横15の計450個の正方形のマスからなる画面を表示します。マスをタップすることで、そのマスを選択した色で塗り潰すことができます。パレットや背景色をタップすることで、それぞれの色を選択することもできます。

パレットの色を選択する際は、各色のボックスをタップしてください。例えば、黒を選択したい場合は黒いボックスをタップしてください。同様に、背景色を選択する際も各色のボックスをタップしてください。

この実装例ではJavaScriptを使用しています。JavaScriptの部分はscriptタグで囲まれており、即座に実行される形でプログラムが記述されています。