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

No:514

470

←

Prev Next

→

a game where your a stickman that runs from a stic..ALL
Developer User2996｜Date and time 23/6/15 5:10:16
Build time 36.187 sec｜Game capacity 2.844KB｜

Script

Stickman Runner

Tap the screen to jump over spikes

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
	<title>Stickman Runner</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #222222;
		}
		canvas {
			display: block;
			margin: 0 auto;
		}
		h1 {
			font-size: 50px;
			text-align: center;
			color: #ffffff;
			margin: 80px 0 40px;
		}
		p {
			font-size: 30px;
			text-align: center;
			color: #ffffff;
			margin-top: 40px;
		}
	</style>
</head>
<body>
	<h1>Stickman Runner</h1>
	<canvas id="gameCanvas"></canvas>
	<p>Tap the screen to jump over spikes</p>

var ctx = canvas.getContext("2d");

var stickman = {
			x: 50,
			y: canvas.height - 200,
			velocity: 0,
			jump: true
		};

var enemy = {
			x: canvas.width - 100,
			y: canvas.height - 200,
			velocity: 5
		};

var spikes = {
			x: canvas.width - 50,
			y: canvas.height - 50,
			velocity: 10
		};

function drawStickman() {
			ctx.fillStyle = "#ffffff";
			ctx.fillRect(stickman.x, stickman.y, 50, 100);
			ctx.fillStyle = "#ff0000";
			ctx.fillRect(stickman.x + 10, stickman.y - 30, 30, 30);
		}

function drawEnemy() {
			ctx.fillStyle = "#000000";
			ctx.fillRect(enemy.x, enemy.y, 50, 100);
			ctx.fillStyle = "#ff0000";
			ctx.fillRect(enemy.x + 10, enemy.y - 30, 30, 30);
		}

function drawSpikes() {
			ctx.fillStyle = "#ffffff";
			ctx.fillRect(spikes.x, spikes.y, 50, 50);
			ctx.fillStyle = "#000000";
			ctx.fillText("🔪", spikes.x + 15, spikes.y + 35);
		}

function updateStickman() {
			if (stickman.jump) {
				if (stickman.velocity === 0) {
					stickman.velocity = -30;
				} else {
					stickman.velocity += 2;
				}

if (stickman.y > canvas.height - 200) {
					stickman.y = canvas.height - 200;
					stickman.velocity = 0;
					stickman.jump = false;
				}
			}
		}

function updateEnemy() {
			if (enemy.x > 0) {
				enemy.x -= enemy.velocity;
			} else {
				enemy.x = canvas.width - 100;
			}

if (enemy.x < stickman.x + 50 && enemy.y === canvas.height - 200) {
				alert("Game Over");
				location.reload();
			}
		}

function updateSpikes() {
			if (spikes.x > 0) {
				spikes.x -= spikes.velocity;
			} else {
				spikes.x = canvas.width - 50;
			}

if (spikes.x < stickman.x + 50 && spikes.y === canvas.height - 50) {
				alert("You Win!");
				location.reload();
			}
		}

function draw() {
			updateStickman();
			updateEnemy();
			updateSpikes();

ctx.clearRect(0, 0, canvas.width, canvas.height);

drawStickman();
			drawEnemy();
			drawSpikes();

requestAnimationFrame(draw);
		}

draw();

canvas.addEventListener("touchstart", function(event) {
			if (!stickman.jump) {
				stickman.jump = true;
			}
		});
	</script>
</body>
</html>