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

No:8513

2018

←

Prev Next

→

pixel art
Developer User4200｜Date and time 23/7/16 15:15:33
Build time 38.724 sec｜Game capacity 3.662KB｜

Script

了解です。以下にピクセルアートを使ったゲームの例を示します。

ピクセルアートゲーム

上記のコードは、基本的なピクセルアートゲームのサンプルです。スタートボタンを押すと「😃」という絵文字が表示され、次へボタンを押すとゲームクリアまでプレイヤーが移動します。ピクセルアートは絵文字で表現され、HTMLとJavaScriptで動作します。

←

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 {
      width: 20px;
      height: 20px;
      display: inline-block;
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <h1>ピクセルアートゲーム</h1>
  <div>
    <button id="startButton">スタート</button>
    <button id="resetButton">リセット</button>
    <button id="nextButton">次へ</button>
  </div>
  <div id="canvas"></div>

// ピクセルアートを描画する関数
    function drawPixelArt() {
      const canvas = document.getElementById("canvas");
      canvas.innerHTML = ""; // クリアする

for (let row = 0; row < pixelArt.length; row++) {
        for (let column = 0; column < pixelArt[row].length; column++) {
          const pixel = document.createElement("div");
          pixel.className = "pixel";
          pixel.textContent = pixelArt[row][column];
          canvas.appendChild(pixel);
        }
        const lineBreak = document.createElement("br");
        canvas.appendChild(lineBreak);
      }
    }

// プレイヤーの位置を更新する関数
    function updatePlayerPosition(row, column) {
      pixelArt[currentRow][currentColumn] = '🌳';
      currentRow = row;
      currentColumn = column;
      pixelArt[currentRow][currentColumn] = '😃';
    }

// スタートボタンをクリックした時の処理
    document.getElementById("startButton").addEventListener("click", function() {
      updatePlayerPosition(0, 0);
      drawPixelArt();
    });

// リセットボタンをクリックした時の処理
    document.getElementById("resetButton").addEventListener("click", function() {
      updatePlayerPosition(0, 0);
      drawPixelArt();
    });

// 次へボタンをクリックした時の処理
    document.getElementById("nextButton").addEventListener("click", function() {
      if (currentColumn === pixelArt[currentRow].length - 1) {
        alert("ゲームクリア！");
      } else {
        updatePlayerPosition(currentRow, currentColumn + 1);
        drawPixelArt();
      }
    });
  </script>
</body>
</html>
```