Soccer game with all from professional footballers and realistic graphics's game

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

No:19432

←

Prev Next

→

Soccer game with all from professional footballers..ALL
Developer User8622｜Date and time 23/10/4 1:12:05
Build time 12.302 sec｜Game capacity 2.303KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>Soccer Game</title>
	<style>
		canvas {
			border: 1px solid black;
			display: block;
			margin: 0 auto;
		}
	</style>
</head>
<body>
	<canvas id="gameCanvas" width="800" height="600"></canvas>

// Load images for players and the field
		const fieldImg = new Image();
		fieldImg.src = "field.png";

const player1Img = new Image();
		player1Img.src = "player1.png";

const player2Img = new Image();
		player2Img.src = "player2.png";

// Store the positions of the players
		let player1X = 100;
		let player1Y = 400;

let player2X = 600;
		let player2Y = 400;

// Move the players based on touch events
		canvas.addEventListener("touchstart", handleTouchStart, false);
		canvas.addEventListener("touchmove", handleTouchMove, false);

let xDown = null;
		let yDown = null;

function handleTouchStart(event) {
			const touch = event.touches[0];
			xDown = touch.clientX;
			yDown = touch.clientY;
		};

function handleTouchMove(event) {
			if (!xDown || !yDown) {
				return;
			}

const xUp = event.touches[0].clientX;
			const yUp = event.touches[0].clientY;

const xDiff = xDown - xUp;
			const yDiff = yDown - yUp;

if (Math.abs(xDiff) > Math.abs(yDiff)) {
				if (xDiff > 0) {
					// Swipe left
					player1X -= 10;
				} else {
					// Swipe right
					player1X += 10;
				}
			} else {
				if (yDiff > 0) {
					// Swipe up
					player1Y -= 10;
				} else {
					// Swipe down
					player1Y += 10;
				}
			}

xDown = null;
			yDown = null;
		};

// Draw function to continuously update the canvas
		function draw() {
			// Clear the canvas
			ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw the field
			ctx.drawImage(fieldImg, 0, 0, canvas.width, canvas.height);

// Draw player 1
			ctx.drawImage(player1Img, player1X, player1Y, 50, 50);

// Draw player 2
			ctx.drawImage(player2Img, player2X, player2Y, 50, 50);

// Call the draw function again
			requestAnimationFrame(draw);
		};

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