HTMLファイルには以下のようなコードを記述します。







	


	






JavaScriptファイルの名前は"game.js"として、以下のようなコードを記述します。

// キャンバスの設定
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
document.getElementById('game').appendChild(canvas);
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// プレイヤーの設定
let player = {
	x: canvas.width / 2,
	y: canvas.height / 2,
	radius: 10,
	color: 'yellow'
};

// 隕石の設定
let meteors = [];
for (let i = 0; i < 10; i++) {
	let meteor = {
		x: Math.random() * canvas.width,
		y: Math.random() * canvas.height,
		radius: Math.random() * 50 + 10,
		speedX: Math.random() * 10 - 5,
		speedY: Math.random() * 10 - 5,
		color: 'grey'
	};
	meteors.push(meteor);
}

// ゲームループ
function loop() {
	// 背景の設定
	ctx.fillStyle = 'black';
	ctx.fillRect(0, 0, canvas.width, canvas.height);

	// プレイヤーの描画
	ctx.fillStyle = player.color;
	ctx.beginPath();
	ctx.arc(player.x, player.y, player.radius, 0, Math.PI * 2, false);
	ctx.fill();

	// 隕石の描画
	for (let meteor of meteors) {
		ctx.fillStyle = meteor.color;
		ctx.beginPath();
		ctx.arc(meteor.x, meteor.y, meteor.radius, 0, Math.PI * 2, false);
		ctx.fill();

		// 衝突判定
		let distX = meteor.x - player.x;
		let distY = meteor.y - player.y;
		let distance = Math.sqrt(distX * distX + distY * distY);
		if (distance < meteor.radius + player.radius) {
			alertHisa('GameOver');
			;
		}

		// 移動処理
		meteor.x += meteor.speedX;
		meteor.y += meteor.speedY;
		if (meteor.x < -meteor.radius) {
			meteor.x = canvas.width + meteor.radius;
		} else if (meteor.x > canvas.width + meteor.radius) {
			meteor.x = -meteor.radius;
		}
		if (meteor.y < -meteor.radius) {
			meteor.y = canvas.height + meteor.radius;
		} else if (meteor.y > canvas.height + meteor.radius) {
			meteor.y = -meteor.radius;
		}
	}

	// プレイヤーの移動処理
	window.addEventListener('mousemove', function(event) {
		player.x += event.gamma / 10;
		player.y += event.beta / 10;
		if (player.x < player.radius) {
			player.x = player.radius;
		} else if (player.x > canvas.width - player.radius) {
			player.x = canvas.width - player.radius;
		}
		if (player.y < player.radius) {
			player.y = player.radius;
		} else if (player.y > canvas.height - player.radius) {
			player.y = canvas.height - player.radius;
		}
	});
}

setInterval(loop, 30);

このゲームは、プレイヤーがスマホを傾けて隕石を避けながらできるゲームです。プレイヤーは黄色い丸で、隕石は灰色の丸で表示されます。隕石に触れた場合はゲームオーバーです。また、絵文字を多用しているので、スマホで操作しやすく、親しみやすいデザインになっています。