Lets recreate hydrogen water!'s game

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

No:3265

811

←

Prev Next

→

Lets recreate hydrogen water!
Developer User3589｜Date and time 23/6/24 10:14:01
Build time 32.847 sec｜Game capacity 2.942KB｜

Script

←

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 {
			margin: 0;
			overflow: hidden;
			background-color: #E0FFFF;
			font-size: 20px;
		}
		canvas {
			display: block;
		}
		#score {
			position: absolute;
			top: 10px;
			left: 10px;
			color: white;
			font-weight: bold;
			font-size: 30px;
			text-shadow: 2px 2px black;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<div id="score">0</div>
	<script>
		// 画面サイズ
		var screenWidth = window.innerWidth;
		var screenHeight = window.innerHeight;

// ジャンプ力
		var jumpPower = -15;

// 重力
		var gravity = 0.8;

// プレイヤーの位置と速度
		var playerX = 100;
		var playerY = 0;
		var playerVY = 0;

// 障害物の位置と速度
		var obstacleX = screenWidth;
		var obstacleY = screenHeight - 100;
		var obstacleVX = -5;

// スコア
		var score = 0;

// canvas要素を取得
		var canvas = document.getElementById("canvas");

// canvas要素のサイズを設定
		canvas.width = screenWidth;
		canvas.height = screenHeight;

// canvasに描画するためのコンテキストを取得
		var context = canvas.getContext("2d");

// 描画の設定
		context.fillStyle = "green";
		context.fillRect(playerX, playerY, 50, 50);

context.fillStyle = "black";
		context.fillRect(obstacleX, obstacleY, 50, 50);

// ゲームループ
		setInterval(function() {

// canvasをクリア
			context.clearRect(0, 0, screenWidth, screenHeight);

// プレイヤーの位置と速度を更新
			playerY += playerVY;
			playerVY += gravity;

// プレイヤーが画面下端に到達したらゲームオーバー
			if (playerY > screenHeight - 50) {
				alert("ゲームオーバー！");
				location.reload();
			}

// 障害物の位置と速度を更新
			obstacleX += obstacleVX;

// 障害物が画面外に出たら新しい位置に配置する
			if (obstacleX < -50) {
				obstacleX = screenWidth;
				score++;
				document.getElementById("score").innerHTML = score;
			}

// プレイヤーと障害物が当たったらゲームオーバー
			if (playerX + 50 > obstacleX && playerX < obstacleX + 50 && playerY + 50 > obstacleY) {
				alert("ゲームオーバー！");
				location.reload();
			}

// プレイヤーを描画する
			context.fillStyle = "green";
			context.fillRect(playerX, playerY, 50, 50);

// 障害物を描画する
			context.fillStyle = "black";
			context.fillRect(obstacleX, obstacleY, 50, 50);

}, 1000 / 60);

// キー入力イベント
		document.addEventListener("keydown", function(event) {
			if (event.keyCode == 32) { // スペースキーが押されたら
				playerVY = jumpPower;
			}
		});

// タップイベント
		document.addEventListener("touchstart", function(event) {
			playerVY = jumpPower;
		});

</script>
</body>
</html>