affine transformation's game

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

No:3142

5075

←

Prev Next

→

affine transformation
Developer User3660｜Date and time 23/6/23 23:31:10
Build time 28.671 sec｜Game capacity 2.443KB｜

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 charset="UTF-8">
</head>
<body>
	<style>
		canvas {
			border: 1px solid black;
			margin: 0 auto;
			display: block;
		}
	</style>

let character = {
			x: 200, 
			y: 200,
			width: 50,
			height: 50,
			angle: 0,
			scale: 1,
			speed: 3
		};

function drawCharacter() {
			ctx.translate(character.x, character.y);
			ctx.rotate(character.angle * Math.PI / 180);
			ctx.scale(character.scale, character.scale);
			ctx.fillStyle = "yellow";
			ctx.fillRect(-character.width/2, -character.height/2, character.width, character.height);
			ctx.setTransform(1, 0, 0, 1, 0, 0);
		}

let radians = character.angle * Math.PI / 180;
			character.x += character.speed * Math.cos(radians);
			character.y += character.speed * Math.sin(radians);

if (character.x > canvas.width + character.width) {
				character.x = -character.width;
			}
			if (character.x < -character.width) {
				character.x = canvas.width + character.width;
			}
			if (character.y > canvas.height + character.height) {
				character.y = -character.height;
			}
			if (character.y < -character.height) {
				character.y = canvas.height + character.height;
			}
		}

let keys = {};
		window.addEventListener("keydown", function(e) {
			keys[e.keyCode] = true;
		});
		window.addEventListener("keyup", function(e) {
			delete keys[e.keyCode];
		});

function mainLoop() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);

update();
			drawCharacter();

requestAnimationFrame(mainLoop);
		}

mainLoop();

</script>

<p>← → : キャラクターを回転</p>
	<p>↑ ↓ : キャラクターを拡大縮小</p>
</body>
</html>

このゲームでは、黄色い四角形のキャラクターが画面内を動き回り、矢印キーで回転や拡大縮小を行えます。スマホでも簡単に操作できますね！