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

No:3650

2562

←

Prev Next

→

snowball fight
Developer User3655｜Date and time 23/6/26 0:10:28
Build time 19.132 sec｜Game capacity 1.604KB｜

Script

雪合戦

スマホのタッチ操作で敵に雪玉を投げて勝利しよう！

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<html>
<head>
<title>雪合戦</title>
</head>
<body>
<h1>雪合戦</h1>
<p>スマホのタッチ操作で敵に雪玉を投げて勝利しよう！</p>
<div id="game"></div>
<script>
// canvasの設定
var canvas = document.createElement('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.getElementById('game').appendChild(canvas);
var ctx = canvas.getContext('2d');

// スクリーンサイズに合わせて調整
function resize() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
}
window.addEventListener('resize', resize);
resize();

// 太陽を描画
function drawSun() {
  ctx.fillStyle = 'yellow';
  ctx.beginPath();
  ctx.arc(100, 100, 50, 0, Math.PI*2, true);
  ctx.closePath();
  ctx.fill();
}
drawSun();

// 雪玉を投げる
function throwSnowball(event) {
  event.preventDefault();
  var x = event.touches[0].clientX;
  var y = event.touches[0].clientY;
  console.log('Throw snowball at (' + x + ', ' + y + ')');
  ctx.fillStyle = 'white';
  ctx.beginPath();
  ctx.arc(x, y, 10, 0, Math.PI*2, true);
  ctx.closePath();
  ctx.fill();
}
canvas.addEventListener('touchstart', throwSnowball);

// 敵の雪玉
var enemySnowballs = [
  {x: 300, y: 300},
  {x: 400, y: 400},
  {x: 500, y: 500}
];

// 敵の雪玉を描画
function drawEnemySnowballs() {
  ctx.fillStyle = 'purple';
  for (var i = 0; i < enemySnowballs.length; i++) {
    ctx.beginPath();
    ctx.arc(enemySnowballs[i].x, enemySnowballs[i].y, 10, 0, Math.PI*2, true);
    ctx.closePath();
    ctx.fill();
  }
}
drawEnemySnowballs();
</script>
</body>
</html>