AI game creator

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

No:3094

823

←

Prev Next

→

Choberig games
Developer User3660｜Date and time 23/6/23 20:50:35
Build time 21.691 sec｜Game capacity 1.952KB｜

Script

※画像ファイルはimages/choberig.pngとして用意してください。

←

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;
		}
		canvas {
			display: block;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="400" height="600"></canvas>
	<script>
		// ゲーム画面の設定
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");

// チョベリグの設定
		var choberigImg = new Image();
		choberigImg.src = "images/choberig.png";
		var choberig = {
			x: canvas.width / 2,
			y: canvas.height - 50,
			width: 50,
			height: 50,
			speed: 5,
			draw: function() {
				ctx.drawImage(choberigImg, this.x, this.y, this.width, this.height);
			},
			moveLeft: function() {
				if (this.x - this.width / 2 > 0) {
					this.x -= this.speed;
				}
			},
			moveRight: function() {
				if (this.x + this.width / 2 < canvas.width) {
					this.x += this.speed;
				}
			},
			moveUp: function() {
				if (this.y - this.height / 2 > 0) {
					this.y -= this.speed;
				}
			},
			moveDown: function() {
				if (this.y + this.height / 2 < canvas.height) {
					this.y += this.speed;
				}
			}
		};

// フレームごとの処理
		function update() {
			// 画面をクリアする
			ctx.clearRect(0, 0, canvas.width, canvas.height);

// チョベリグを描画する
			choberig.draw();
		}

// キーボード操作の設定
		document.addEventListener("keydown", function(event) {
			switch (event.keyCode) {
				case 37: // 左
					choberig.moveLeft();
					break;
				case 38: // 上
					choberig.moveUp();
					break;
				case 39: // 右
					choberig.moveRight();
					break;
				case 40: // 下
					choberig.moveDown();
					break;
			}
		});

// フレームごとにupdate関数を呼び出す
		setInterval(update, 1000 / 60);
	</script>
</body>
</html>

※画像ファイルはimages/choberig.pngとして用意してください。