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

No:3061

4333

←

Prev Next

→

SUNGAN Light k○ll Shot
Developer User3655｜Date and time 23/6/23 16:35:11
Build time 48.996 sec｜Game capacity 3.784KB｜

Script

「魔貫光殺砲」というゲームを作りました！以下が、実装した1枚のhtmlファイルです：

魔貫光殺砲

このゲームは、プレイヤーが魔法陣を使ってボールを打ち返すというものです。プレイヤーの位置はマウスで操作し、ボールが当たるたびにスコアが加算されます。スコアは、画面上部に表示されます。また、魔法陣の画像も、プレイヤーの周りに表示されるようになっています。このゲームは、スマホでもプレイ可能です。ただし、マウスの代わりに指で操作する必要があります。また、画面の大きさによっては、プレイしにくい場合があります。その場合は、適宜調整してプレイしてください。

←

Prev　Next

→ 　

Back　

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

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

「魔貫光殺砲」というゲームを作りました！
以下が、実装した1枚のhtmlファイルです：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>魔貫光殺砲</title>
	<style>
		body {
			background-color: #3c3c3c;
		}
		#canvas {
			border: 2px solid white;
			display: block;
			margin: 0 auto;
		}
		#score {
			color: white;
			text-align: center;
			font-family: sans-serif;
			font-size: 20px;
			margin-bottom: 20px;
		}
	</style>
</head>
<body>
	<h1 style="color: white; text-align: center;">魔貫光殺砲</h1>
	<canvas id="canvas" width="400" height="600"></canvas>
	<div id="score"></div>

// スコア初期化
		let score = 0;

// キャンバスの設定
		const canvas = document.querySelector('#canvas');
		const ctx = canvas.getContext('2d');

// プレイヤーを定義
		const player = {
			x: canvas.width / 2,
			y: canvas.height - 50,
			radius: 25,
			color: 'white'
		};

// ボールを定義
		const ball = {
			x: canvas.width / 2,
			y: canvas.height / 2,
			radius: 15,
			color: 'yellow',
			speed: 7,
			dx: 5 * (Math.random() * 2 - 1),
			dy: -5
		};

// マウスの位置情報を更新する関数
		function updateMouse(e) {
			const rect = canvas.getBoundingClientRect();
			player.x = e.clientX - rect.left;
		}

// ゲームを開始する関数
		function startGame() {
			// プレイヤーを描画
			ctx.beginPath();
			ctx.arc(player.x, player.y, player.radius, 0, Math.PI * 2);
			ctx.fillStyle = player.color;
			ctx.fill();
			ctx.closePath();

// ボールを描画
			ctx.beginPath();
			ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
			ctx.fillStyle = ball.color;
			ctx.fill();
			ctx.closePath();

// ボールの位置情報を更新
			ball.x += ball.dx;
			ball.y += ball.dy;

// 上下の壁に当たった場合は反射
			if (ball.y - ball.radius < 0 || ball.y + ball.radius > canvas.height) {
				ball.dy = -ball.dy;
			}

// 左右の壁に当たった場合は反射
			if (ball.x - ball.radius < 0 || ball.x + ball.radius > canvas.width) {
				ball.dx = -ball.dx;
			}

// プレイヤーとボールが当たった場合はスコアを加算
			// そしてボールを再配置して再開
			if (Math.sqrt((ball.x - player.x) ** 2 + (ball.y - player.y) ** 2) < ball.radius + player.radius) {
				score++;
				document.querySelector('#score').textContent = `Score: ${score}`;

ball.x = canvas.width / 2;
				ball.y = canvas.height / 2;
				ball.dx = 5 * (Math.random() * 2 - 1);
				ball.dy = -5;
			}

// 魔法陣を描画
			ctx.drawImage(magicCircleImg, 0, 0, 512, 512, player.x - 40, player.y - 40, 80, 80);

// ゲームを再開
			requestAnimationFrame(startGame);
		}

// イベントリスナーを設定
		canvas.addEventListener('mousemove', updateMouse);

// ゲームを開始
		startGame();

</script>
</body>
</html>

このゲームは、プレイヤーが魔法陣を使ってボールを打ち返すというものです。プレイヤーの位置はマウスで操作し、ボールが当たるたびにスコアが加算されます。スコアは、画面上部に表示されます。また、魔法陣の画像も、プレイヤーの周りに表示されるようになっています。

このゲームは、スマホでもプレイ可能です。ただし、マウスの代わりに指で操作する必要があります。また、画面の大きさによっては、プレイしにくい場合があります。その場合は、適宜調整してプレイしてください。