Crab jumping platformer's game

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

No:2211

105

←

Prev Next

→

Crab jumping platformer
Developer User3517｜Date and time 23/6/20 15:31:40
Build time 30.465 sec｜Game capacity 2.323KB｜

Script

🦀

このプログラムは「カニジャンプ」という名前の簡単なプラットフォームゲームです。プレイヤーはカニを操作して、ボタン操作でカニをジャンプさせながらプラットフォーム上を進んでいきます。スペースキーを押すことでカニをジャンプさせることができます。変数gravityとvelocityによって重力と縦方向の速度を管理し、縦方向の位置を変数positionで管理しています。カニの位置はcssプロパティを使って更新され、window.requestAnimationFrameメソッドで連続的に位置を更新しています。このプログラムは1つのHTMLファイルに、JavaScriptを含んで実装されています。絵文字の「カニ」が主役となっており、スマートフォンでの操作も前提となっています。

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>カニジャンプ</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			background-color: #87CEFA;
			margin: 0;
			padding: 0;
		}
		#crab {
			position: relative;
			top: 80%;
			left: 10%;
			font-size: 50px;
		}
		#platform {
			position: absolute;
			width: 120px;
			height: 10px;
			background-color: #8B4513;
			bottom: 20%;
			left: 40%;
		}
	</style>
</head>
<body onkeydown="jump(event)">
	<div id="crab">🦀</div>
	<div id="platform"></div>
	<script>
		var crab = document.getElementById("crab");
		var platform = document.getElementById("platform");
		var gravity = 0.8; // 重力
		var velocity = 0; // 縦方向の速度
		var position = 80; // 縦方向の位置
		var jumping = false; // ジャンプ中かどうか

function jump(event) {
			if (event.code === 'Space' && !jumping) { // スペースキーを押した場合
				jumping = true;
				velocity = -20; // 上方向に速度を加える
			}
		}

update();
	</script>
</body>
</html>