AI game creator

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

No:1851

5063

←

Prev Next

→

Automatic RPG
Developer User3421｜Date and time 23/6/19 8:18:04
Build time 26.211 sec｜Game capacity 2.268KB｜

Script

この自動RPGは単純なもので、プレイヤーが自動的に右に移動するだけです。プレイヤーをクリックしてドラッグすることで移動方向を変えることができます。しかし、これはスマホでプレイするのは少し難しいかもしれません。したがって、プレイヤーを自動的に移動することにしました。スタートボタンをクリックすると、背景が白いキャンバスが表示され、プレイヤーが右に移動し始めます。このゲームの目的はありません。あなたがするべきことは、プレイヤーを眺め、素敵な自動RPGの経験を楽しむことです！

←

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>自動RPG</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			font-size: 16px;
			font-family: Arial, sans-serif;
			background-color: #eee;
		}
		canvas {
			display: block;
			margin: 0 auto;
			background-color: #fff;
		}
		button {
			display: block;
			margin: 0 auto;
			padding: 10px;
			background-color: #f00;
			color: #fff;
			border: none;
			border-radius: 5px;
			font-size: 20px;
			font-weight: bold;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<button id="start">冒険を始める！</button>

function drawText(text, x, y) {
			ctx.font = "24px Arial, sans-serif";
			ctx.fillStyle = "#000";
			ctx.fillText(text, x, y);
		}

var player = {x: 50, y: 50, speed: 5};

function movePlayer() {
			player.x += player.speed;
			if (player.x > canvas.width) {
				player.x = 0;
			}
		}

function loop() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			drawText("自動RPG", 20, 40);
			drawText("操作方法：自動移動", 20, 80);
			drawText("プレイヤー", player.x, player.y);
			movePlayer();
			requestAnimationFrame(loop);
		}

startButton.addEventListener("click", function() {
			startButton.style.display = "none";
			canvas.style.display = "block";
			loop();
		});
	</script>
</body>
</html>