Side-scrolling action game created by AI's game

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

No:959

279

←

Prev Next

→

Side-scrolling action game created by AI
Developer User3198｜Date and time 23/6/17 23:11:47
Build time 85.544 sec｜Game capacity 5.365KB｜

Script

はい、了解しました。以下が実装例です。

Score: 0

Game Over

このゲームは、プレイヤーがジャンプをしながら進み、出現する障害物を回避しながらスコアを競う横スクロールアクションゲームです。プレイヤーはスペースキーまたは画面タッチでジャンプできます。障害物にぶつかるとゲームオーバーになります。ゲームオーバー後にバックボタンを押すとリスタートできます。カラーリングには絵文字を多めに使用しました。なお、スマホ用に調整してあるため、PCでは表示が異なる可能性があります。

←

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">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>AIが作る横スクロールアクションゲーム</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #f7f7f7;
		}
		
		canvas {
			display: block;
			margin: 0 auto;
			background-color: #fff;
		}
		
		#score {
			position: absolute;
			top: 10px;
			right: 10px;
			font-size: 24px;
			color: #333;
			text-align: right;
		}
		
		#gameover {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-size: 36px;
			color: #fff;
			text-align: center;
			display: none;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="320" height="480"></canvas>
	<div id="score">Score: 0</div>
	<div id="gameover">Game Over</div>
	<script>
		// ゲームの設定
		var config = {
			playerJumpPower: 10,
			playerGravity: 0.5,
			playerSpeed: 4,
			obstacleSpeed: 3,
			minObstacleGap: 200,
			maxObstacleGap: 300,
			obstacleSpawnInterval: 80,
			obstacleSpawnChance: 0.1,
			backgroundColor: '#f7f7f7',
			playerColor: '#f00',
			obstacleColor: '#0f0'
		};
		
		// ゲームオブジェクト
		var canvas = document.getElementById('canvas');
		var ctx = canvas.getContext('2d');
		var score = 0;
		var gameover = false;
		var obstacles = [];
		var player = {
			x: 50,
			y: canvas.height - 50,
			vy: 0,
			width: 20,
			height: 30,
			jump: function() {
				if (player.y == canvas.height - player.height) {
					player.vy = -config.playerJumpPower;
				}
			},
			update: function() {
				player.vy += config.playerGravity;
				player.y += player.vy;
				if (player.y > canvas.height - player.height) {
					player.y = canvas.height - player.height;
					player.vy = 0;
				}
			},
			draw: function() {
				ctx.fillStyle = config.playerColor;
				ctx.fillRect(player.x, player.y, player.width, player.height);
			},
			reset: function() {
				player.x = 50;
				player.y = canvas.height - 50;
				player.vy = 0;
			}
		};
		
		// 障害物の生成
		function spawnObstacle() {
			if (Math.random() < config.obstacleSpawnChance) {
				var gap = Math.floor(Math.random() * (config.maxObstacleGap - config.minObstacleGap + 1)) + config.minObstacleGap;
				var obstacle1 = {
					x: canvas.width,
					y: canvas.height - gap - Math.floor(Math.random() * 200) - 50,
					width: 20,
					height: 50,
					update: function() {
						this.x -= config.obstacleSpeed;
						if (this.x + this.width < 0) {
							obstacles.shift();
						}
					},
					draw: function() {
						ctx.fillStyle = config.obstacleColor;
						ctx.fillRect(this.x, this.y, this.width, this.height);
					}
				};
				var obstacle2 = {
					x: obstacle1.x,
					y: obstacle1.y - gap,
					width: obstacle1.width,
					height: canvas.height - obstacle1.y + gap,
					update: obstacle1.update,
					draw: obstacle1.draw
				};
				obstacles.push(obstacle1, obstacle2);
			}
			setTimeout(spawnObstacle, config.obstacleSpawnInterval);
		}
		
		// ゲームループ
		function gameLoop() {
			if (gameover) {
				return;
			}
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			ctx.fillStyle = config.backgroundColor;
			ctx.fillRect(0, 0, canvas.width, canvas.height);
			player.update();
			player.draw();
			for (var i = 0; i < obstacles.length; i++) {
				obstacles[i].update();
				obstacles[i].draw();
				if (obstacles[i].x <= player.x + player.width && obstacles[i].x + obstacles[i].width >= player.x && obstacles[i].y <= player.y + player.height && obstacles[i].y + obstacles[i].height >= player.y) {
					gameover = true;
					document.getElementById('gameover').style.display = 'block';
					break;
				}
				if (obstacles[i].x + obstacles[i].width < player.x && !obstacles[i].scored) {
					score++;
					document.getElementById('score').innerHTML = 'Score: ' + score;
					obstacles[i].scored = true;
				}
			}
			requestAnimationFrame(gameLoop);
		}
		
		// イベントリスナー
		document.addEventListener('keydown', function(e) {
			if (e.keyCode == 32) {
				player.jump();
			}
		});
		document.addEventListener('touchstart', function() {
			player.jump();
		});
		document.addEventListener('deviceready', function() {
			document.addEventListener('backbutton', function() {
				if (gameover) {
					player.reset();
					obstacles = [];
					score = 0;
					gameover = false;
					document.getElementById('gameover').style.display = 'none';
					document.getElementById('score').innerHTML = 'Score: 0';
					requestAnimationFrame(gameLoop);
				} else {
					navigator.app.exitApp();
				}
			});
		}, false);
		
		// ゲーム開始
		spawnObstacle();
		requestAnimationFrame(gameLoop);
	</script>
</body>
</html>