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

No:345

345

←

Prev Next

→

ice hockey
Developer User2983｜Date and time 23/6/12 18:06:08
Build time 68.672 sec｜Game capacity 4.631KB｜

Script

アイスホッケー

敵チームより多くゴールを決めて勝利しよう！

スマホの画面をタップして、自分のチームのユニフォームの色を変えてパックを打ち出そう！

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>アイスホッケー</title>
	<style>
		body {
			background-color: lightblue;
		}

canvas {
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<h1>アイスホッケー</h1>
	<p>敵チームより多くゴールを決めて勝利しよう！</p>
	<p>スマホの画面をタップして、自分のチームのユニフォームの色を変えてパックを打ち出そう！</p>
	<canvas id="canvas" width="300" height="500"></canvas>

// フィールドとゴールの定義
		let fieldWidth = canvas.width - 40;
		let fieldHeight = canvas.height * 0.8;

let goalWidth = 60;
		let goalHeight = 100;
		let goalX = (canvas.width - goalWidth) / 2;
		let enemyGoalY = 20;
		let playerGoalY = canvas.height - goalHeight - 20;

// パックの初期位置と速度の定義
		let puckX = canvas.width / 2;
		let puckY = canvas.height / 2;
		let puckRadius = 10;
		let puckSpeed = 2;
		let puckVx = -puckSpeed;
		let puckVy = -puckSpeed;

// プレイヤーと敵の初期位置の定義
		let playerX = canvas.width / 2;
		let playerY = canvas.height - 50;
		let enemyX = canvas.width / 2;
		let enemyY = 50;

// スマホ画面タッチ時のプレイヤーを動かす処理
		canvas.addEventListener("touchstart", function(event) {
			event.preventDefault();
			if (event.targetTouches.length > 0) {
				let touch = event.targetTouches[0];
				playerX = touch.pageX;
				playerY = touch.pageY - 50;
			}
		});

// フィールド、ゴール、ユーザー、敵を描画する処理
		function drawFieldAndPlayers() {
			// フィールドの描画
			ctx.fillStyle = "white";
			ctx.fillRect(20, (canvas.height - fieldHeight) / 2, fieldWidth, fieldHeight);

// ゴールの描画
			ctx.fillStyle = "red";
			ctx.fillRect(goalX, enemyGoalY, goalWidth, goalHeight);
			ctx.fillStyle = "blue";
			ctx.fillRect(goalX, playerGoalY, goalWidth, goalHeight);

// プレイヤーの描画
			ctx.fillStyle = "blue";
			ctx.beginPath();
			ctx.arc(playerX, playerY, 20, 0, Math.PI * 2, true);
			ctx.fill();
			ctx.fillStyle = "white";
			ctx.beginPath();
			ctx.arc(playerX, playerY, 10, 0, Math.PI * 2, true);
			ctx.fill();

// 敵の描画
			ctx.fillStyle = "red";
			ctx.beginPath();
			ctx.arc(enemyX, enemyY, 20, 0, Math.PI * 2, true);
			ctx.fill();
			ctx.fillStyle = "white";
			ctx.beginPath();
			ctx.arc(enemyX, enemyY, 10, 0, Math.PI * 2, true);
			ctx.fill();
		}

// パックを移動させる処理
		function movePuck() {
			puckX += puckVx;
			puckY += puckVy;

// パックが壁に当たった時の処理
			if (puckX - puckRadius < 20 || puckX + puckRadius > canvas.width - 20) {
				puckVx = -puckVx;
			}

// パックがゴールに当たった時の処理
			if ((puckY - puckRadius < enemyGoalY + goalHeight && puckX - puckRadius > goalX && 
				puckX + puckRadius < goalX + goalWidth) || 
				(puckY + puckRadius > playerGoalY && puckX - puckRadius > goalX && 
				puckX + puckRadius < goalX + goalWidth)) {
				puckVy = -puckVy;
			}

// プレイヤーや敵に当たった時の処理
			let distanceFromPlayer = Math.sqrt(Math.pow(playerX - puckX, 2) + Math.pow(playerY - puckY, 2));
			let distanceFromEnemy = Math.sqrt(Math.pow(enemyX - puckX, 2) + Math.pow(enemyY - puckY, 2));
			if (distanceFromPlayer < puckRadius + 20 || distanceFromEnemy < puckRadius + 20) {
				puckVx = -puckVx;
				puckVy = -puckVy;
			}
		}

// パックを描画する処理
		function drawPuck() {
			ctx.fillStyle = "black";
			ctx.beginPath();
			ctx.arc(puckX, puckY, puckRadius, 0, Math.PI * 2, true);
			ctx.fill();
		}

// 勝敗を判定する処理
		function checkWin() {
			if (puckY - puckRadius < enemyGoalY) {
				alert("You Win!!");
				reset();
			} else if (puckY + puckRadius > playerGoalY + goalHeight) {
				alert("You Lose...");
				reset();
			}
		}

// ゲームをリセットする処理
		function reset() {
			puckX = canvas.width / 2;
			puckY = canvas.height / 2;
			puckVx = -puckSpeed;
			puckVy = -puckSpeed;
			playerX = canvas.width / 2;
			playerY = canvas.height - 50;
			enemyX = canvas.width / 2;
			enemyY = 50;
			draw();
		}

// ゲームを描画する処理
		function draw() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			drawFieldAndPlayers();
			movePuck();
			drawPuck();
			checkWin();
			window.requestAnimationFrame(draw);
		}

// ゲームを開始する処理
		draw();
	</script>
</body>
</html>