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

No:4269

1317

←

Prev Next

→

beach volleyball
Developer User3727｜Date and time 23/6/27 17:44:38
Build time 39.703 sec｜Game capacity 2.861KB｜

Script

ビーチバレーのゲームを作りました。実装は1枚のhtmlファイルで行い、JavaScriptはscriptタグで囲みました。以下がコードです。

ビーチバレーゲーム

0 - 0

このゲームは、スマホの傾きに応じてプレイヤー1を動かせます。ボールを相手の場所に落として得点を取り合うゲームです。スコアはh2タグで表示され、ボールとプレイヤーの動きはJavaScriptで制御しています。また、絵文字を使わずに実装しましたが、スマホ操作に対応しています。

←

Prev　Next

→ 　

Back　

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

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

ビーチバレーのゲームを作りました。

実装は1枚のhtmlファイルで行い、JavaScriptはscriptタグで囲みました。以下がコードです。

```
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>ビーチバレーゲーム</title>
</head>
<body>
	<h1>ビーチバレーゲーム</h1>
	<h2 id="score">0 - 0</h2>
	<div id="court" style="width: 300px; height: 300px; background-color: sandybrown; position: relative;">
		<div id="player1" style="width: 50px; height: 50px; background-color: blueviolet; border-radius: 50%; position: absolute; left: 20px; bottom: 20px;"></div>
		<div id="player2" style="width: 50px; height: 50px; background-color: coral; border-radius: 50%; position: absolute; right: 20px; bottom: 20px;"></div>
		<div id="ball" style="width: 20px; height: 20px; background-color: white; border-radius: 50%; position: absolute; left: 140px; bottom: 140px;"></div>
	</div>

window.addEventListener("deviceorientation", function(event) {
			let tiltLR = event.gamma;
			player1.style.bottom = 20 + (tiltLR * 2) + "px";
		}, true);

requestAnimationFrame(update);

function resetBall() {
			ballX = 140;
			ballY = 140;
			ballVx = 2;
			ballVy = 2;
			ball.style.left = ballX + "px";
			ball.style.bottom = ballY + "px";
		}
	</script>
</body>
</html>
```