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

No:1229

266

←

Prev Next

→

Tennis, more graphical, more game-like
Developer User3285｜Date and time 23/6/18 8:52:44
Build time 56.522 sec｜Game capacity 4.538KB｜

Script

、簡単なテニスゲームを作成しました。以下がプログラムになります。

Emoji Tennis

😎 Player1

😈 Player2

Player1: ← →

Player2: A D

このゲームでは、プレイヤー1と2が左右に移動して、ボールを打ち返すというゲームです。HTML要素としては、ボールと2つのプレイヤーを表示するためのdiv要素があります。また、JavaScriptでボールやプレイヤーの座標を取得して、ボールを動かしたりプレイヤーを移動させたりします。ゲームの目的は、ボールをゴールに入れることです。ゴールしたら、ボールがリセットされ、再びプレイヤーがボールを打つことになります。スマホでも操作可能なよう、左プレイヤーは「← →」キー、右プレイヤーは「A D」キーで操作できるようにしています。

←

Prev　Next

→ 　

Back　

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

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

、簡単なテニスゲームを作成しました。以下がプログラムになります。

```html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Emoji Tennis</title>
	<style>
		body {
			background-color: #E1E5EA;
			font-size: 20px;
			text-align: center;
		}
		#game {
			position: relative;
			width: 300px;
			height: 500px;
			margin: auto;
			border: 2px solid black;
			background-color: white;
			padding-top: 10px;
		}
		#ball {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 40px;
			height: 40px;
			background-color: black;
			border-radius: 50%;
			animation-name: ball-move;
			animation-duration: 1s;
			animation-iteration-count: infinite;
			animation-timing-function: linear;
		}
		#player1 {
			position: absolute;
			left: 10px;
			bottom: 10px;
			width: 70px;
			height: 20px;
			background-color: black;
			border-radius: 10px;
			color: white;
			font-size: 14px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		#player2 {
			position: absolute;
			right: 10px;
			bottom: 10px;
			width: 70px;
			height: 20px;
			background-color: black;
			border-radius: 10px;
			color: white;
			font-size: 14px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		@keyframes ball-move {
			0% {
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
			25% {
				top: 0%;
				transform: translate(-50%, 0%);
			}
			50% {
				left: 0%;
				transform: translate(0%, 0%);
			}
			75% {
				top: 100%;
				transform: translate(-50%, -100%);
			}
			100% {
				left: 100%;
				transform: translate(-100%, -50%);
			}
		}
	</style>
</head>
<body>
	<h1>Emoji Tennis</h1>
	<div id="game">
		<div id="player1">😎 Player1</div>
		<div id="player2">😈 Player2</div>
		<div id="ball"></div>
	</div>
	<p>Player1: ← →</p>
	<p>Player2: A D</p>

// ボールの移動
		setInterval(() => {
			ballX += ballVX;
			ballY += ballVY;
			if (ballX >= 260 || ballX <= 10) {
				ballVX = -ballVX;
			}
			if (ballY <= 10) {
				ballVY = -ballVY;
			}
			if (ballY >= 420 && ballX > player1X && ballX < player1X + 70) {
				ballVY = -ballVY;
			}
			if (ballY >= 420 && ballX > player2X && ballX < player2X + 70) {
				ballVY = -ballVY;
			}
			if (ballY >= 480) { // ゴール
				ballX = 50;
				ballY = 50;
				ballVX = 5;
				ballVY = 5;
			}
			ball.style.top = ballY + "px";
			ball.style.left = ballX + "px";
		}, 50);

// プレイヤー1の移動
		document.addEventListener("keydown", (e) => {
			if (e.keyCode === 37 && player1X > 0) {
				player1X -= 10;
				player1.style.left = player1X + "px";
			} else if (e.keyCode === 39 && player1X < 230) {
				player1X += 10;
				player1.style.left = player1X + "px";
			}
		});

// プレイヤー2の移動
		document.addEventListener("keydown", (e) => {
			if (e.keyCode === 68&& player2X > 0) {
				player2X -= 10;
				player2.style.right = player2X + "px";
			} else if (e.keyCode === 65 && player2X < 230) {
				player2X += 10;
				player2.style.right = player2X + "px";
			}
		});
	</script>
</body>
</html>
```