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

No:49459

make a tutorial on how to play subway surfers
Developer User21041｜Date and time 24/3/5 3:21:17
Build time 16.498 sec｜Game capacity 2.142KB｜

Script

Subway Surfers Game

In this game, you control a player (red square) moving horizontally across the screen. Avoid the obstacles (blue square) by jumping over them using the up and down arrow keys. If you collide with an obstacle, the game is over. Refresh the page to play again.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

```html
<!DOCTYPE html>
<html>

<head>
	<title>Subway Surfers Game</title>
	<style>
		body {
			text-align: center;
			font-family: Arial, sans-serif;
		}

canvas {
			border: 1px solid black;
		}
	</style>
</head>

<body>
	<h1>Subway Surfers Game</h1>
	<canvas id="gameCanvas" width="800" height="400"></canvas>

let playerX = 50;
		let playerY = 200;
		let playerSize = 50;
		let playerSpeed = 5;

let obstacleX = 800; // start off-screen
		let obstacleY = 200;
		let obstacleSize = 50;
		let obstacleSpeed = 5;

function drawPlayer() {
			ctx.fillStyle = "red";
			ctx.fillRect(playerX, playerY, playerSize, playerSize);
		}

function drawObstacle() {
			ctx.fillStyle = "blue";
			ctx.fillRect(obstacleX, obstacleY, obstacleSize, obstacleSize);
		}

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

function update() {
			clearCanvas();
			drawPlayer();
			drawObstacle();

playerX += playerSpeed;
			obstacleX -= obstacleSpeed;

if (playerX + playerSize > obstacleX
				&& playerX < obstacleX + obstacleSize
				&& playerY + playerSize > obstacleY
				&& playerY < obstacleY + obstacleSize) {
				alert("Game Over! Refresh the page to play again");
			}

if (playerX > canvas.width) {
				playerX = 0;
			}

if (obstacleX < 0) {
				obstacleX = canvas.width;
				obstacleY = Math.random() * (canvas.height - obstacleSize);
			}
		}

function gameLoop() {
			update();
			requestAnimationFrame(gameLoop);
		}

gameLoop();
	</script>
</body>

</html>
```