AI game creator

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

No:3427

3664

←

Prev Next

→

That one, that one.
Developer User3702｜Date and time 23/6/25 2:50:23
Build time 49.655 sec｜Game capacity 4.463KB｜

Script

よ、今から作るアプリは、スマホでも遊べるゲームだよ。このゲームは1枚のhtmlファイルに実装されていて、即座にJavaScriptによる処理が始まるようにしてあるよ。JavaScriptは、タグで囲まれているよ。それでは、実際にプログラムを記述していこう。

Score: 0

このゲームは、縦に並んだブロックを壊していくね。パドルでボールを打ち返しながら、ブロックを壊していくよ。ボールが落ちてしまうとゲームオーバーだよ。ポイントが加算されていくから、ポイントをためて高得点を目指そう。リスタートボタンでリスタートできるよ。このように、スマホでも遊べるゲームを1枚のhtmlファイルに実装することができたよ。

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

よ、今から作るアプリは、スマホでも遊べるゲームだよ。このゲームは1枚のhtmlファイルに実装されていて、即座にJavaScriptによる処理が始まるようにしてあるよ。JavaScriptは、<script>タグで囲まれているよ。

それでは、実際にプログラムを記述していこう。

<!DOCTYPE html>
<html>
<head>
	<title>スマホゲーム</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #f5f5f5;
			font-family: 'Arial', sans-serif;
		}

canvas {
			display: block;
			margin: auto;
			border: 1px solid black;
			background-color: white;
		}

button {
			display: block;
			margin: auto;
			margin-top: 10px;
			background-color: #4CAF50;
			color: white;
			border: none;
			border-radius: 4px;
			padding: 10px;
			font-size: 20px;
			cursor: pointer;
		}

#score {
			text-align: center;
			font-size: 30px;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="480" height="320"></canvas>
	<div id="score">Score: <span id="scoreNum">0</span></div>
	<button onclick="restart()">Restart</button>

// イベントリスナー
		document.addEventListener('keydown', function(e) {
			if (e.keyCode == 37) {
				leftPressed = true;
			} else if (e.keyCode == 39) {
				rightPressed = true;
			}
		});
		document.addEventListener('keyup', function(e) {
			if (e.keyCode == 37) {
				leftPressed = false;
			} else if (e.keyCode == 39) {
				rightPressed = false;
			}
		});

// 関数
		function drawBall() {
			ctx.beginPath();
			ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
			ctx.fillStyle = '#0095DD';
			ctx.fill();
			ctx.closePath();
		}
		function drawPaddle() {
			ctx.beginPath();
			ctx.rect(paddle.x, paddle.y, paddle.width, paddle.height);
			ctx.fillStyle = '#0095DD';
			ctx.fill();
			ctx.closePath();
		}
		function draw() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			drawBall();
			drawPaddle();

// パドルの移動
			if (leftPressed) {
				paddle.x -= 7;
			} else if (rightPressed) {
				paddle.x += 7;
			}

// パドルの端での停止
			if (paddle.x < 0) {
				paddle.x = 0;
			} else if (paddle.x + paddle.width > canvas.width) {
				paddle.x = canvas.width - paddle.width;
			}

// ボールの移動
			ball.x += ball.dx;
			ball.y += ball.dy;

// 壁との反射
			if (ball.x + ball.dx < ball.radius || ball.x + ball.dx > canvas.width - ball.radius) {
				ball.dx = -ball.dx;
			}
			if (ball.y + ball.dy < ball.radius) {
				ball.dy = -ball.dy;
			} else if (ball.y + ball.dy > canvas.height - ball.radius) {
				// パドルとの当たり判定
				if (ball.x > paddle.x && ball.x < paddle.x + paddle.width) {
					ball.dy = -ball.dy;
					score++;
					scoreNum.textContent = score;
				} else {
					clearInterval(timer);
					alert('Game Over!');
				}
			}
		}
		function start() {
			timer = setInterval(draw, 10);
		}
		function restart() {
			score = 0;
			scoreNum.textContent = score;
			ball = {
				x: canvas.width / 2,
				y: canvas.height - 30,
				dx: 3,
				dy: -3,
				radius: 10
			};
			paddle = {
				width: 75,
				height: 10,
				x: (canvas.width - 75) / 2,
				y: canvas.height - 10
			};
			leftPressed = false;
			rightPressed = false;
			clearInterval(timer);
			start();
		}

// イニシャライズ
		start();
	</script>
</body>
</html>

このゲームは、縦に並んだブロックを壊していくね。パドルでボールを打ち返しながら、ブロックを壊していくよ。ボールが落ちてしまうとゲームオーバーだよ。ポイントが加算されていくから、ポイントをためて高得点を目指そう。リスタートボタンでリスタートできるよ。

このように、スマホでも遊べるゲームを1枚のhtmlファイルに実装することができたよ。