AI game creator

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

No:403

417

←

Prev Next

→

YouTuber Games
Developer User2982｜Date and time 23/6/13 19:56:01
Build time 63.809 sec｜Game capacity 4.403KB｜

Script

操作方法：タッチで動かす、クリックで撃つ

目標：YouTuberを倒す！

←

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>YouTuberゲーム</title>
	<style>
		body {
			font-size: 16px;
			font-family: Arial, sans-serif;
			text-align: center;
			margin: 0;
			padding: 0;
		}
		#game-container {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 100vh;
		}
		#game-canvas {
			border: 2px solid black;
			margin-bottom: 32px;
			cursor: crosshair;
		}
	</style>
</head>
<body>
	<div id="game-container">
		<canvas id="game-canvas" width="320" height="480"></canvas>
		<button id="start-button">スタート！</button>
		<p>操作方法：タッチで動かす、クリックで撃つ</p>
		<p>目標：YouTuberを倒す！</p>
	</div>
	<script>
		// 対象となる要素を取得
		const canvas = document.querySelector('#game-canvas');
		const startButton = document.querySelector('#start-button');

// ゲームの基本情報
		const FPS = 60;
		const GAME_WIDTH = canvas.width;
		const GAME_HEIGHT = canvas.height;

// ゲームオブジェクトの定義
		const player = {
			x: GAME_WIDTH / 2,
			y: 380,
			width: 32,
			height: 32,
			color: 'yellow',
			speed: 6,
			bullets: [],
			shoot: function() {
				this.bullets.push({
					x: this.x + this.width / 2,
					y: this.y,
					radius: 4,
					color: 'red',
					speed: 8,
				});
			},
			move: function(direction) {
				if (direction === 'left') {
					this.x -= this.speed;
					if (this.x < 0) {
						this.x = 0;
					}
				} else if (direction === 'right') {
					this.x += this.speed;
					if (this.x > GAME_WIDTH - this.width) {
						this.x = GAME_WIDTH - this.width;
					}
				}
			}
		};

// イベントハンドラの登録
		document.addEventListener('keydown', function(e) {
			if (e.code === 'ArrowLeft') {
				player.move('left');
			} else if (e.code === 'ArrowRight') {
				player.move('right');
			}
		});

canvas.addEventListener('click', function(e) {
			player.shoot();
		});

// ゲームのメインループ
		function mainLoop() {
			const ctx = canvas.getContext('2d');

// 背景を描画
			ctx.fillStyle = '#eee';
			ctx.fillRect(0, 0, GAME_WIDTH, GAME_HEIGHT);

// プレイヤーを描画
			ctx.fillStyle = player.color;
			ctx.fillRect(player.x, player.y, player.width, player.height);

// ブラウザタブのアクティブ状態でのみ更新
			if (!document.hidden) {
				// YouTuberを描画
				youtuber.draw(ctx);

// YouTuberを動かす
				youtuber.move();

// プレイヤーの弾を描画
				for (let i = 0; i < player.bullets.length; i++) {
					ctx.fillStyle = player.bullets[i].color;
					ctx.beginPath();
					ctx.arc(player.bullets[i].x, player.bullets[i].y, player.bullets[i].radius, 0, Math.PI * 2);
					ctx.fill();
					player.bullets[i].y -= player.bullets[i].speed;
				}
			}

// 当たり判定
			for (let i = 0; i < player.bullets.length; i++) {
				if (youtuber.x < player.bullets[i].x && player.bullets[i].x < youtuber.x + youtuber.width &&
					youtuber.y < player.bullets[i].y && player.bullets[i].y < youtuber.y + youtuber.height) {
					youtuber.x = 0;
					youtuber.direction = 'right';
					player.bullets.splice(i, 1); // プレイヤーの弾削除
				}
			}

// スコアの表示
			const score = player.bullets.length;
			ctx.fillStyle = 'black';
			ctx.font = '24px Arial';
			ctx.fillText('スコア：' + score, 10, 30);
		}

// スタートボタンが押されたらゲームスタート
		startButton.addEventListener('click', function() {
			player.bullets = [];
			youtuber.load();
			setInterval(mainLoop, 1000 / FPS);
			startButton.disabled = true;
		});
	</script>
</body>
</html>