AI game creator

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

No:3090

1746

←

Prev Next

→

lower back
Developer User3657｜Date and time 23/6/23 19:20:30
Build time 39.674 sec｜Game capacity 3.927KB｜

Script

ご祭神がおみこしに乗ってお祭りをするゲームを作ってみました！

おみこしを操作して、街中を練り歩こう！

←➡で移動、↑でジャンプします。

※画像ファイルは適当な絵文字に代用しています。

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

ご祭神がおみこしに乗ってお祭りをするゲームを作ってみました！

<!DOCTYPE html>
<html>
<head>
	<title>おみこし祭り！</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			margin: 0;
			padding: 0;
			font-size: 20px;
			text-align: center;
			background-color: #F5DEB3;
		}
		canvas {
			width: 100%;
			height: 80vh;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<p>おみこしを操作して、街中を練り歩こう！</p>
	<p>←➡で移動、↑でジャンプします。</p>
	<script>
		// 画像ファイル読み込み
		const omikoshiImg = new Image();
		omikoshiImg.src = "🎉";

const backgroundImg = new Image();
		backgroundImg.src = "🏣";

// ゲームオブジェクト
		const game = {
			canvas: document.getElementById("canvas"),
			ctx: null,
			width: null,
			height: null,
			omikoshi: null,
			background: null,
			keys: {
				left: false,
				right: false,
				up: false
			},
			init() {
				this.ctx = this.canvas.getContext("2d");
				this.width = this.canvas.width = window.innerWidth;
				this.height = this.canvas.height;

// おみこしと背景の初期化
				this.omikoshi = {
					x: this.width / 3,
					y: this.height - omikoshiImg.height - 10,
					width: omikoshiImg.width,
					height: omikoshiImg.height,
					velocityX: 0,
					velocityY: 0,
					jump: false
				};

this.background = {
					x: 0,
					y: 0,
					width: this.width,
					height: this.height,
					velocityX: -2
				};

// イベントリスナーの設定
				window.addEventListener("keydown", e => {
					switch (e.keyCode) {
						case 37: // left
							this.keys.left = true;
							break;
						case 38: // up
							this.keys.up = true;
							break;
						case 39: // right
							this.keys.right = true;
							break;
					}
				});

window.addEventListener("keyup", e => {
					switch (e.keyCode) {
						case 37: // left
							this.keys.left = false;
							break;
						case 38: // up
							this.keys.up = false;
							break;
						case 39: // right
							this.keys.right = false;
							break;
					}
				});

// ゲームループの開始
				this.loop();
			},
			update() {
				// 背景の移動
				this.background.x += this.background.velocityX;
				if (this.background.x <= -this.width) {
					this.background.x += this.width;
				}
				
				// おみこしの移動
				if (this.keys.left) {
					this.omikoshi.velocityX = -6;
				} else if (this.keys.right) {
					this.omikoshi.velocityX = 6;
				} else {
					this.omikoshi.velocityX = 0;
				}

if (this.keys.up && !this.omikoshi.jump) {
					this.omikoshi.velocityY = -16;
					this.omikoshi.jump = true;
				}

this.omikoshi.velocityY += 1;
				this.omikoshi.y += this.omikoshi.velocityY;

// 画面から出ないように制御
				if (this.omikoshi.y >= this.height - this.omikoshi.height - 10) {
					this.omikoshi.y = this.height - this.omikoshi.height - 10;
					this.omikoshi.jump = false;
				}
				if (this.omikoshi.x < 0) {
					this.omikoshi.x = 0;
				}
				if (this.omikoshi.x > this.width - this.omikoshi.width) {
					this.omikoshi.x = this.width - this.omikoshi.width;
				}
			},
			draw() {
				// 背景の描画
				this.ctx.drawImage(backgroundImg, this.background.x, this.background.y, this.background.width, this.background.height);
				this.ctx.drawImage(backgroundImg, this.background.x + this.width, this.background.y, this.background.width, this.background.height);

// おみこしの描画
				this.ctx.drawImage(omikoshiImg, this.omikoshi.x, this.omikoshi.y, this.omikoshi.width, this.omikoshi.height);
			},
			loop() {
				this.update();
				this.draw();
				window.requestAnimationFrame(() => this.loop());
			}
		};

// ゲームの初期化
		game.init();
	</script>
</body>
</html>

※画像ファイルは適当な絵文字に代用しています。