asymmetric competitive game's game

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

No:3527

2304

←

Prev Next

→

asymmetric competitive game
Developer User3694｜Date and time 23/6/25 12:14:58
Build time 31.516 sec｜Game capacity 2.611KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>非対称型対戦ゲーム</title>
	<style>
		body {
			margin: 0;
			padding: 0;
		}
		canvas {
			display: block;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>

canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;

const circleRadius = 30;
		const players = [
			{
				x: canvas.width / 2 - circleRadius * 2,
				y: canvas.height / 2,
				color: 'red',
				direction: null
			},
			{
				x: canvas.width / 2 + circleRadius * 2,
				y: canvas.height / 2,
				color: 'blue',
				direction: null
			}
		];

// Draw players
		function drawPlayers() {
			players.forEach(player => {
				ctx.beginPath();
				ctx.arc(player.x, player.y, circleRadius, 0, Math.PI * 2);
				ctx.fillStyle = player.color;
				ctx.fill();
			});
		}

// Update player position
		function updatePlayers() {
			players.forEach(player => {
				switch(player.direction) {
					case 'up':
						player.y -= 5;
						break;
					case 'down':
						player.y += 5;
						break;
					case 'left':
						player.x -= 5;
						break;
					case 'right':
						player.x += 5;
						break;
				}
			});
		}

// Check collision with walls
		function checkCollision() {
			players.forEach(player => {
				if (player.x - circleRadius < 0) {
					player.x = circleRadius;
				} else if (player.x + circleRadius > canvas.width) {
					player.x = canvas.width - circleRadius;
				}
				if (player.y - circleRadius < 0) {
					player.y = circleRadius;
				} else if (player.y + circleRadius > canvas.height) {
					player.y = canvas.height - circleRadius;
				}
			});
		}

// Game loop
		function gameLoop() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			drawPlayers();
			updatePlayers();
			checkCollision();
			requestAnimationFrame(gameLoop);
		}

// Event listeners for player movement
		document.addEventListener('keydown', event => {
			switch(event.key) {
				case 'ArrowUp':
					players[0].direction = 'up';
					break;
				case 'ArrowDown':
					players[0].direction = 'down';
					break;
				case 'ArrowLeft':
					players[0].direction = 'left';
					break;
				case 'ArrowRight':
					players[0].direction = 'right';
					break;
			}
		});
		document.addEventListener('keyup', event => {
			switch(event.key) {
				case 'ArrowUp':
				case 'ArrowDown':
				case 'ArrowLeft':
				case 'ArrowRight':
					players[0].direction = null;
					break;
			}
		});

// Start the game loop
		gameLoop();
	</script>
</body>
</html>