の例を示します。




  


    
  
  
    
ミステリーシューター
    
あなたは探偵です。ある日、街で起こった連続殺人事件を調べるために現場に向かいます。
    
事件現場に到着すると、犯人があなたを襲ってきました！タップして撃ち落としましょう。
    

  



game.jsファイル:

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const enemyImg = document.createElement('img');
enemyImg.src='emozi_all/enemy.png';
const gunshotAudio = new Audio('sound.mp3');

let playerX = canvas.width / 2;
let enemyX = Math.random() * (canvas.width - 50);
let enemyY = 10;
let score = 0;

canvas.addEventListener('click', () => {
  gunshotAudio.currentTime = 0;
  gunshotAudio.play();
  if (playerX >= enemyX && playerX <= enemyX + 50 && enemyY <= 100) {
    score++;
    enemyX = Math.random() * (canvas.width - 50);
    enemyY = 10;
  }
});

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.font = '24px sans-serif';
  ctx.fillStyle = '#fff';
  ctx.fillText(`SCORE:${score}`, 20, 30);
  ctx.drawImage(enemyImg, enemyX, enemyY);
  ctx.fillRect(playerX - 20, canvas.height - 50, 40, 40);
  if (enemyY >= canvas.height - 120) {
    alertHisa('ゲームオーバー');
    ;
  } else {
    enemyY += 2;
  }
  requestAnimationFrame(draw);
}

function update() {
  const touches = event.changedTouches;
  if (touches) {
    playerX = touches[0].pageX - canvas.getBoundingClientRect().left;
  }
}

draw();
canvas.addEventListener('mousemove', update, false);

※上記のゲームは簡易版となります。安全性上に問題があるため、公開することはお勧めできません。