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

No:1163

287

←

Prev Next

→

Subway train driving game
Developer TimoshQ｜Date and time 23/6/18 6:42:31
Build time 18.888 sec｜Game capacity 1.555KB｜

Script

Subway Train Driving Game

Use arrow keys to control the train!

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Subway Train Driving Game</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #111;
			text-align: center;
		}

canvas {
			display: block;
			margin: 0 auto;
			background-color: #eee;
		}

h1 {
			color: #fff;
			font-size: 3rem;
			margin-top: 2rem;
		}

p {
			color: #fff;
			font-size: 2rem;
			margin-top: 2rem;
		}
	</style>
</head>
<body>
	<h1>Subway Train Driving Game</h1>
	<canvas id="canvas" width="600" height="400"></canvas>
	<p>Use arrow keys to control the train!</p>

// Set up the train variables
		let x = 0;
		let y = canvas.height / 2;
		let speed = 0;

// Draw the train
		function drawTrain() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			ctx.fillStyle = '#333';
			ctx.fillRect(x, y, 100, 50);
		}

// Move the train
		function moveTrain() {
			x += speed;
			if (x > canvas.width) {
				x = -100;
			}
			if (x < -100) {
				x = canvas.width;
			}
			drawTrain();
		}

// Handle arrow key events
		document.addEventListener('keydown', event => {
			if (event.code === 'ArrowRight') {
				speed = 5;
			}
			if (event.code === 'ArrowLeft') {
				speed = -5;
			}
		});
		document.addEventListener('keyup', event => {
			if (event.code === 'ArrowRight' || event.code === 'ArrowLeft') {
				speed = 0;
			}
		});

// Start the game loop
		setInterval(moveTrain, 10);
	</script>
</body>
</html>