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

No:3054

2953

←

Prev Next

→

Flash Games
Developer User3657｜Date and time 23/6/23 15:58:28
Build time 44.986 sec｜Game capacity 4.197KB｜

Script

と同様のエンターテイメント要素を持つアプリを作成しました。以下が実際のプログラムです：

Flashゲーム風アプリ

スコア: 0

このアプリは、Flashゲーム風のブロック崩しゲームです。画面上部にはスコアが表示され、画面下部にはパドルがあります。ボールをバウンドさせて、ブロックを壊してスコアを稼ぐゲームです。ゲームはスタートボタンをクリックすると始まり、左右のキーでパドルを操作することができます。一度ボールを落とすと、ゲームオーバーになります。このアプリは、スマホ上でも遊ぶことができます。画面サイズに応じて、自動的にキャンバスのサイズが変わります。また、タッチイベントにも対応しています。楽しくプレイしてください！

←

Prev　Next

→ 　

Back　

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

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

と同様のエンターテイメント要素を持つアプリを作成しました。

以下が実際のプログラムです：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Flashゲーム風アプリ</title>
	<style>
		body {
			background-color: black;
			text-align: center;
			color: white;
		}
		canvas {
			width: 100%;
			height: 80vh;
			display: block;
			margin: 0 auto;
			border: 5px solid white;
		}
		h1 {
			font-size: 3rem;
			margin-top: 2rem;
		}
		button {
			font-size: 2rem;
			margin: 2rem;
			padding: 1rem 2rem;
			border: none;
			background-color: white;
			color: black;
			cursor: pointer;
		}
		p {
			font-size: 2rem;
			margin: 0;
			padding: 0.5rem;
		}
	</style>
</head>
<body>
	<h1>Flashゲーム風アプリ</h1>
	<canvas id="canvas"></canvas>
	<p>スコア: <span id="score">0</span></p>
	<button id="start">スタート</button>

let ctx = canvas.getContext("2d");
		ctx.fillStyle = "white";
		ctx.font = "2rem Arial";

let scoreText = document.getElementById("score");
		let score = 0;

let ball = {
			x: canvas.width / 2,
			y: canvas.height / 3,
			radius: 50,
			dx: 5,
			dy: 3,
			draw: function() {
				ctx.beginPath();
				ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
				ctx.fill();
			}
		}

function update() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			ball.draw();
			paddle.draw();

// 壁との衝突
			if (ball.x + ball.dx > canvas.width - ball.radius || ball.x + ball.dx < ball.radius) {
				ball.dx = -ball.dx;
			}
			if (ball.y + ball.dy < ball.radius) {
				ball.dy = -ball.dy;
			}

// パドルとの衝突
			if (ball.y + ball.dy > paddle.y - ball.radius) {
				if (ball.x > paddle.x && ball.x < paddle.x + paddle.width) {
					ball.dy = -ball.dy;
					score++;
					scoreText.innerText = score;
				} else {
					alert("Game Over");
					location.reload();
				}
			}

ball.x += ball.dx;
			ball.y += ball.dy;

paddle.x += paddle.dx;

// パドルの移動制限
			if (paddle.x < 0) {
				paddle.x = 0;
			}
			if (paddle.x + paddle.width > canvas.width) {
				paddle.x = canvas.width - paddle.width;
			}
		}

// キーイベントの処理
		document.addEventListener("keydown", function(event) {
			if (event.key === "Left" || event.key === "ArrowLeft") {
				paddle.moveLeft();
			} else if (event.key === "Right" || event.key === "ArrowRight") {
				paddle.moveRight();
			}
		});
		document.addEventListener("keyup", function(event) {
			if (event.key === "Left" || event.key === "ArrowLeft" || event.key === "Right" || event.key === "ArrowRight") {
				paddle.stop();
			}
		});

// スタートボタンの処理
		let startBtn = document.getElementById("start");
		startBtn.addEventListener("click", function() {
			startBtn.style.display = "none";
			let gameLoop = setInterval(function() {
				update();
			}, 30);
		});
	</script>
</body>
</html>

このアプリは、Flashゲーム風のブロック崩しゲームです。画面上部にはスコアが表示され、画面下部にはパドルがあります。ボールをバウンドさせて、ブロックを壊してスコアを稼ぐゲームです。

ゲームはスタートボタンをクリックすると始まり、左右のキーでパドルを操作することができます。一度ボールを落とすと、ゲームオーバーになります。

このアプリは、スマホ上でも遊ぶことができます。画面サイズに応じて、自動的にキャンバスのサイズが変わります。また、タッチイベントにも対応しています。

楽しくプレイしてください！