AI game creator

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

No:2243

2187

←

Prev Next

→

Agar.io
Developer もちきなこ｜Date and time 23/6/20 17:58:41
Build time 33.514 sec｜Game capacity 2.427KB｜

Script

Create a flying game with reference to the

This program is designed to、This is a flying game in which the player can be moved by keystrokes. If the player goes off-screen, he/she will emerge from the other side. No pictograms are used.、Make the players color yellow.、It has a cute look. It can also be operated with a smartphone.

←

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>飛行ゲーム</title>
	<style>
		canvas {
			border: 1px solid #d3d3d3;
			background-color: white;
		}
	</style>
</head>
<body>
	<canvas id="game" width="400" height="400"></canvas>

// 変数
		let playerX = 200;
		let playerY = 200;
		let playerSpeedX = 0;
		let playerSpeedY = 0;
		let playerSize = 20;

// プレイヤーを描画する関数
		function drawPlayer() {
			ctx.beginPath();
			ctx.arc(playerX, playerY, playerSize, 0, Math.PI*2);
			ctx.fillStyle = "yellow";
			ctx.fill();
			ctx.closePath();
		}

// プレイヤーを動かす関数
		function movePlayer() {
			playerX += playerSpeedX;
			playerY += playerSpeedY;

// 画面外に出た場合は反対側から出現
			if (playerX > canvas.width) {
				playerX = 0;
			}
			else if (playerX < 0) {
				playerX = canvas.width;
			}

if (playerY > canvas.height) {
				playerY = 0;
			}
			else if (playerY < 0) {
				playerY = canvas.height;
			}
		}

// キーが押された時の処理
		document.addEventListener("keydown", function(event) {
			if (event.key === "ArrowRight") {
				playerSpeedX = 5;
			}
			else if (event.key === "ArrowLeft") {
				playerSpeedX = -5;
			}
			else if (event.key === "ArrowDown") {
				playerSpeedY = 5;
			}
			else if (event.key === "ArrowUp") {
				playerSpeedY = -5;
			}
		});

// キーが離された時の処理
		document.addEventListener("keyup", function(event) {
			if (event.key === "ArrowRight" || event.key === "ArrowLeft") {
				playerSpeedX = 0;
			}
			else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
				playerSpeedY = 0;
			}
		});

// メインループ
		function mainLoop() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);

movePlayer();
			drawPlayer();

window.requestAnimationFrame(mainLoop);
		}

window.requestAnimationFrame(mainLoop);
	</script>
</body>
</html>

このプログラムは、キー操作でプレイヤーを動かすことができる飛行ゲームです。画面外に出た場合は反対側から出現します。絵文字は使用していませんが、プレイヤーの色を黄色にして、見た目を可愛くしています。スマホでも操作可能になっています。