3d Football 2v2 headball game's game

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

No:24677

107

←

Prev Next

→

3d Football 2v2 headball game
Developer User11763｜Date and time 23/11/11 6:51:26
Build time 92.882 sec｜Game capacity 3.007KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>Headball Game</title>
	<style>
		canvas {
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<canvas id="gameCanvas" width="800" height="600"></canvas>
	<script>
		// Obtener la referencia al canvas
		var canvas = document.getElementById("gameCanvas");
		var ctx = canvas.getContext("2d");

// Definir las dimensiones y ubicaciones de los jugadores y la pelota
		var playerWidth = 50;
		var playerHeight = 100;

var player1X = 50;
		var player1Y = canvas.height / 2 - playerHeight / 2;

var player2X = canvas.width - 50 - playerWidth;
		var player2Y = canvas.height / 2 - playerHeight / 2;

var ballSize = 20;
		var ballX = canvas.width / 2 - ballSize / 2;
		var ballY = canvas.height / 2 - ballSize / 2;
		var ballSpeedX = 3;
		var ballSpeedY = 3;

// Definir las teclas para controlar a los jugadores
		var keys = [];

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

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

// Actualizar el juego en cada frame
		function update() {
			// Mover a los jugadores
			if (65 in keys && player1X > 0) {
				player1X -= 5;
			}
			if (68 in keys && player1X + playerWidth < canvas.width / 2) {
				player1X += 5;
			}
			if (37 in keys && player2X > canvas.width / 2) {
				player2X -= 5;
			}
			if (39 in keys && player2X + playerWidth < canvas.width) {
				player2X += 5;
			}

// Mover la pelota y verificar colisiones con los jugadores y los bordes del canvas
			ballX += ballSpeedX;
			ballY += ballSpeedY;

if (ballX < 0 || ballX + ballSize > canvas.width) {
				ballSpeedX = -ballSpeedX; // Rebotar en las paredes horizontales
			}

if (ballY < 0 || ballY + ballSize > canvas.height) {
				ballSpeedY = -ballSpeedY; // Rebotar en las paredes verticales
			}

if (
				ballX + ballSize > player1X && // Verificar colisión con jugador 1
				ballX < player1X + playerWidth &&
				ballY + ballSize > player1Y &&
				ballY < player1Y + playerHeight
			) {
				ballSpeedY = -ballSpeedY; // Rebotar en el jugador 1
			}

if (
				ballX + ballSize > player2X && // Verificar colisión con jugador 2
				ballX < player2X + playerWidth &&
				ballY + ballSize > player2Y &&
				ballY < player2Y + playerHeight
			) {
				ballSpeedY = -ballSpeedY; // Rebotar en el jugador 2
			}

// Dibujar el campo, los jugadores y la pelota
			ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = "green"; // Color del campo
			ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = "white"; // Color de los jugadores
			ctx.fillRect(player1X, player1Y, playerWidth, playerHeight);
			ctx.fillRect(player2X, player2Y, playerWidth, playerHeight);

ctx.fillStyle = "black"; // Color de la pelota
			ctx.fillRect(ballX, ballY, ballSize, ballSize);

// Llamar a la función de actualización en cada frame
			requestAnimationFrame(update);
		}

// Iniciar el juego
		update();
	</script>
</body>
</html>