Birth rate 5000 trillion %'s game

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

No:4437

1961

←

Prev Next

→

Birth rate 5000 trillion %
Developer User1006｜Date and time 23/6/28 0:52:11
Build time 43.723 sec｜Game capacity 3.556KB｜

Script

了解しました。以下が私が作成したゲームのコードです。これは、スマートフォンで遊ぶことを前提として設計されています。このゲームでは、プレイヤーはタップやスワイプなどのジェスチャーを使用して、ボールを運び、障害物を避ける必要があります。

←

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>ボールのゲーム</title>
	<style>
		canvas {
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="400" height="600"></canvas>
	<script>
	// 変数の初期化
	var canvas = document.getElementById('canvas');
	var ctx = canvas.getContext('2d');
	var ballX = canvas.width / 2;
	var ballY = canvas.height / 2;
	var ballSize = 20;
	var ballSpeed = 2;
	var ballXDir = 1;
	var ballYDir = -1;
	var obstacles = [];
	var obstacleSpeed = 2;
	var score = 0;
	
	// 障害物を生成する関数
	function createObstacle() {
		var obstacleWidth = Math.floor(Math.random() * 100) + 50;
		var obstacleHeight = Math.floor(Math.random() * 100) + 50;
		var obstacleX = Math.floor(Math.random() * (canvas.width - obstacleWidth));
		var obstacleY = -obstacleHeight;
		obstacles.push({x: obstacleX, y: obstacleY, width: obstacleWidth, height: obstacleHeight});
	}
	
	// ゲームループ
	function gameLoop() {
		// ボールを移動させる
		ballX += ballSpeed * ballXDir;
		ballY += ballSpeed * ballYDir;
		
		// ボールが壁に当たったら反転する
		if (ballX + ballSize > canvas.width || ballX - ballSize < 0) {
			ballXDir = -ballXDir;
		}
		if (ballY - ballSize < 0) {
			ballYDir = -ballYDir;
		}
		
		// ボールが障害物に当たったらゲームオーバー
		for (var i = 0; i < obstacles.length; i++) {
			if (ballX + ballSize > obstacles[i].x && ballX - ballSize < obstacles[i].x + obstacles[i].width && ballY + ballSize > obstacles[i].y && ballY - ballSize < obstacles[i].y + obstacles[i].height) {
				alert('ゲームオーバー！スコアは' + score + '点でした。');
				location.reload();
			}
		}
		
		// 障害物を移動させる
		for (var i = 0; i < obstacles.length; i++) {
			obstacles[i].y += obstacleSpeed;
			
			// 画面外に出たら削除する
			if (obstacles[i].y > canvas.height) {
				obstacles.splice(i, 1);
				score++;
			}
		}
		
		// 一定時間ごとに障害物を生成する
		if (Math.random() < 0.05) {
			createObstacle();
		}
		
		// 画面をクリアする
		ctx.clearRect(0, 0, canvas.width, canvas.height);
		
		// ボールを描画する
		ctx.fillStyle = 'red';
		ctx.beginPath();
		ctx.arc(ballX, ballY, ballSize, 0, Math.PI * 2, true);
		ctx.fill();
		
		// 障害物を描画する
		ctx.fillStyle = 'blue';
		for (var i = 0; i < obstacles.length; i++) {
			ctx.fillRect(obstacles[i].x, obstacles[i].y, obstacles[i].width, obstacles[i].height);
		}
		
		// スコアを表示する
		ctx.fillStyle = 'black';
		ctx.font = '24px serif';
		ctx.fillText('スコア: ' + score, 10, 30);
		
		// 次のフレームを要求する
		requestAnimationFrame(gameLoop);
	}
	
	// ジェスチャーの処理
	canvas.addEventListener('touchstart', function(event) {
		var touchX = event.touches[0].clientX;
		if (touchX < canvas.width / 2) {
			ballXDir = -1;
		} else {
			ballXDir = 1;
		}
	});
	
	canvas.addEventListener('touchmove', function(event) {
		var touchX = event.touches[0].clientX;
		var touchY = event.touches[0].clientY;
		ballX = touchX;
		ballY = touchY;
	});
	
	// ゲームを開始する
	gameLoop();
	</script>
</body>
</html>