Jumping on a skateboard's game

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

No:185

295

←

Prev Next

→

Jumping on a skateboard
Developer User2908｜Date and time 23/6/5 2:38:20
Build time 67.69 sec｜Game capacity 2.783KB｜

Script

The game Skateboard Jump was created. The following JavaScript code is included in the HTML file.

Rules of the game: - Press the ↑ or ↓ key.、Skateboard jumps (10 points when the up key is pressed)、(5 points if you press the down key) - The skateboard departs from the left edge of the screen and、Must advance to the right edge of the screen. - as one progresses、Speeding up. - Time and Score are displayed at the bottom of the screen - When its game over.、Game Over! appears in the center of the screen. To be able to play on your phone as much as possible.、The screen size is set to 320x480. Also、The images are specially designed for mobile phones.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

ゲームである「スケボージャンプ」を作成しました。

HTMLファイル内に以下のJavaScriptコードを含めています。

```
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>スケボージャンプ</title>
	<style>
		canvas {
			border: 1px solid #333;
			display: block;
			margin: 0 auto;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="320" height="480"></canvas>
	<script>
		// ゲームの変数を宣言
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");
		var time = 0;
		var score = 0;
		var x = 50;
		var y = 320;
		var dx = 0;
		var dy = 0;
		var isJumping = false;
		var isGameOver = false;
		
		// スケボー画像を読み込み、初期描画を行う
		var skateImg = new Image();
		skateImg.src = "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/twitter/299/skateboard_1f6f9.png";
		skateImg.onload = function() {
			drawGame();
		}
		
		// キー入力を監視
		document.addEventListener("keydown", function (evt) {
			if (evt.key == "ArrowUp" && !isJumping) {
				isJumping = true;
				dy = -10;
				score += 10;
			}
			if (evt.key == "ArrowDown" && !isJumping) {
				isJumping = true;
				dy = 10;
				score += 5;
			}
		});
		
		// ゲームのメイン処理を行う
		function drawGame() {
			// 背景を描画
			ctx.fillStyle = "#87cefa";
			ctx.fillRect(0, 0, canvas.width, canvas.height);
			// 時間とスコアを描画
			ctx.fillStyle = "#000";
			ctx.font = "24px sans-serif";
			ctx.fillText("Time: " + time, 10, 30);
			ctx.fillText("Score: " + score, 10, 60);
			// スケボーを描画
			ctx.drawImage(skateImg, x, y, 64, 64);
			// ジャンプの処理
			if (isJumping) {
				y += dy;
				dy += 0.5;
				if (y >= 320) {
					isJumping = false;
					dy = 0;
				}
			}
			// ゲームオーバーの処理
			if (x > canvas.width) {
				isGameOver = true;
				ctx.fillText("Game Over!", 100, 200);
			}
			// 次の描画をスケジュール
			if (!isGameOver) {
				setTimeout(function() {
					time++;
					x += 4;
					drawGame();
				}, 30);
			}
		}
	</script>
</body>
</html>
```

ゲームのルール：
- 「↑」キーまたは「↓」キーを押すと、スケボーがジャンプする（上キーを押すと10点、下キーを押すと5点）
- スケボーは画面左端から出発し、画面右端まで進まなければならない
- 進むにつれて、速度が上がっていく
- 画面の下に「Time」と「Score」が表示される
- ゲームオーバーになると、画面中央に「Game Over!」と表示される

なるべくスマホで遊べるように、画面サイズを320x480に設定しています。また、スマホ向けに専用の画像を使用しています。