AI game creator

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

No:3439

4276

←

Prev Next

→

dogfight
Developer User3707｜Date and time 23/6/25 5:02:52
Build time 38.775 sec｜Game capacity 4.117KB｜

Script

// ドッグファイトのHTML/CSS/JSコード

←

Prev　Next

→ 　

Back　

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

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

// ドッグファイトのHTML/CSS/JSコード

<!DOCTYPE html>
<html lang="ja">
<head>
	<title>ドッグファイト</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
		body {
			margin: 0;
			padding: 0;
		}
		canvas {
			display: block;
			margin: 0 auto;
			background: #00aaee;
		}
	</style>
	<script>
		window.onload = function() {
			// キャンバスのサイズを取得
			var canvas = document.getElementById('gameCanvas');
			var canvasWidth = canvas.width = window.innerWidth;
			var canvasHeight = canvas.height = window.innerHeight;
			// ゲームオブジェクトを定義
			var game = {
				players: [
					{
						x: 200,
						y: 200,
						size: 20,
						speed: 5,
						color: '#ff0000'
					},
					{
						x: canvasWidth - 200,
						y: canvasHeight - 200,
						size: 20,
						speed: 5,
						color: '#0000ff'
					}
				],
				bullets: [],
				drawPlayer: function(player) {
					var ctx = canvas.getContext('2d');
					ctx.fillStyle = player.color;
					ctx.beginPath();
					ctx.arc(player.x, player.y, player.size, 0, Math.PI*2, false);
					ctx.fill();
				},
				movePlayer: function(player, dx, dy) {
					player.x += dx;
					player.y += dy;
					if(player.x < player.size) {
						player.x = player.size;
					} else if(player.x > canvasWidth - player.size) {
						player.x = canvasWidth - player.size;
					}
					if(player.y < player.size) {
						player.y = player.size;
					} else if(player.y > canvasHeight - player.size) {
						player.y = canvasHeight - player.size;
					}
				},
				createBullet: function(player) {
					var bullet = {
						x: player.x,
						y: player.y,
						dx: player.speed * Math.cos(player.angle),
						dy: player.speed * Math.sin(player.angle),
						size: 5,
						color: player.color
					};
					game.bullets.push(bullet);
				},
				drawBullet: function(bullet) {
					var ctx = canvas.getContext('2d');
					ctx.fillStyle = bullet.color;
					ctx.beginPath();
					ctx.arc(bullet.x, bullet.y, bullet.size, 0, Math.PI*2, false);
					ctx.fill();
				},
				moveBullet: function(bullet) {
					bullet.x += bullet.dx;
					bullet.y += bullet.dy;
					if(bullet.x < -bullet.size || bullet.x > canvasWidth + bullet.size ||
						bullet.y < -bullet.size || bullet.y > canvasHeight + bullet.size) {
						return true;
					}
					return false;
				},
				collisionDetection: function() {
					for(var i = 0; i < game.bullets.length; i++) {
						var bullet = game.bullets[i];
						for(var j = 0; j < game.players.length; j++) {
							var player = game.players[j];
							if(bullet.color !== player.color && Math.sqrt(Math.pow(bullet.x - player.x, 2) +
								Math.pow(bullet.y - player.y, 2)) < player.size) {
								game.players.splice(j, 1);
								game.bullets.splice(i, 1);
							}
						}
					}
				},
				update: function() {
					var ctx = canvas.getContext('2d');
					ctx.clearRect(0, 0, canvasWidth, canvasHeight);
					for(var i = 0; i < game.players.length; i++) {
						var player = game.players[i];
						game.drawPlayer(player);
					}
					for(var i = 0; i < game.bullets.length; i++) {
						var bullet = game.bullets[i];
						game.drawBullet(bullet);
						if(game.moveBullet(bullet)) {
							game.bullets.splice(i, 1);
						}
					}
					game.collisionDetection();
				}
			};
			// プレイヤーの移動イベントを定義
			document.addEventListener('keydown', function(event) {
				var code = event.keyCode;
				var player = game.players[0];
				switch(code) {
					case 37: // 左
						game.movePlayer(player, -player.speed, 0);
						break;
					case 38: // 上
						game.movePlayer(player, 0, -player.speed);
						break;
					case 39: // 右
						game.movePlayer(player, player.speed, 0);
						break;
					case 40: // 下
						game.movePlayer(player, 0, player.speed);
						break;
					case 32: // スペースキー
						game.createBullet(player);
						break;
				}
			});
			// ゲームループを開始
			setInterval(function() {
				game.update();
			}, 1000 / 60);
		};
	</script>
</head>
<body>
	<canvas id="gameCanvas"></canvas>
</body>
</html>