Candy maker in canvas's game

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

No:6469

305

←

Prev Next

→

Candy maker in canvas
Developer User1006｜Date and time 23/7/2 14:20:12
Build time 25.4 sec｜Game capacity 2.547KB｜

Script

了解です。以下にHTMLファイルとJavaScriptを含むサンプルコードを示します。このゲームはスマホで操作し、お絵かき感覚でお菓子を作ることができます。 HTMLファイル（index.html）：

JavaScriptファイル（script.js）：このプログラムでは、canvas要素を使ってお絵かきをすることができます。スマホでタッチ操作することで線を引き、クリックすることでランダムなお菓子の絵文字が描かれます。お菓子の絵文字は、変数`emojiList`に定義した絵文字の中からランダムに選ばれます。上記のコードを1つのフォルダに保存し、そのフォルダをブラウザで開くと、お菓子メーカーとして遊ぶことができます。拡張子が`.html`のファイル（例：index.html）をダブルクリックして開くと、ブラウザ上でプログラムが実行されます。

←

Prev　Next

→ 　

Back　

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

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

了解です。以下にHTMLファイルとJavaScriptを含むサンプルコードを示します。このゲームはスマホで操作し、お絵かき感覚でお菓子を作ることができます。

HTMLファイル（index.html）：
```
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>お菓子メーカー</title>
  <style>
    canvas {
      border: solid 1px black;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="400" height="400"></canvas>
  <script src="script.js"></script>
</body>
</html>
```

JavaScriptファイル（script.js）：
```
window.addEventListener('load', () => {
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');

// お絵かきの処理
  let isDrawing = false;
  canvas.addEventListener('touchstart', (event) => {
    isDrawing = true;
    const x = event.changedTouches[0].pageX - canvas.getBoundingClientRect().left;
    const y = event.changedTouches[0].pageY - canvas.getBoundingClientRect().top;
    ctx.moveTo(x, y);
    ctx.beginPath();
  });
  canvas.addEventListener('touchmove', (event) => {
    if (isDrawing) {
      const x = event.changedTouches[0].pageX - canvas.getBoundingClientRect().left;
      const y = event.changedTouches[0].pageY - canvas.getBoundingClientRect().top;
      ctx.lineTo(x, y);
      ctx.stroke();
    }
  });
  canvas.addEventListener('touchend', () => {
    isDrawing = false;
  });

// お菓子作りの処理
  const emojiList = ['🍪', '🍩', '🍰', '🍭', '🍫'];
  canvas.addEventListener('click', (event) => {
    const x = event.pageX - canvas.getBoundingClientRect().left;
    const y = event.pageY - canvas.getBoundingClientRect().top;
    const selectedEmoji = emojiList[Math.floor(Math.random() * emojiList.length)];
    ctx.font = '30px sans-serif';
    ctx.fillText(selectedEmoji, x, y);
  });
});
```

このプログラムでは、canvas要素を使ってお絵かきをすることができます。スマホでタッチ操作することで線を引き、クリックすることでランダムなお菓子の絵文字が描かれます。お菓子の絵文字は、変数`emojiList`に定義した絵文字の中からランダムに選ばれます。

上記のコードを1つのフォルダに保存し、そのフォルダをブラウザで開くと、お菓子メーカーとして遊ぶことができます。拡張子が`.html`のファイル（例：index.html）をダブルクリックして開くと、ブラウザ上でプログラムが実行されます。