Stopped changing score and text on tap when prompt fails.'s game

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

No:3756

115

←

Prev Next

→

Stopped changing score and text on tap when prompt..ALL
Developer User1006｜Date and time 23/6/26 13:02:28
Build time 42.639 sec｜Game capacity 3.331KB｜

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>
		canvas {
			border: 1px solid black;
			background-color: #eee;
		}
	</style>
	<script>
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");

//プレイヤーの初期座標
		var playerX = 100;
		var playerY = 300;
		//プレイヤーの速度
		var playerSpeed = 5;
		//弾の速度
		var bulletSpeed = 10;
		//敵の数
		var enemyCount = 5;
		//敵の初期座標と速度
		var enemyX = [];
		var enemyY = [];
		var enemySpeed = [];
		for(var i=0; i<enemyCount; i++) {
			enemyX[i] = Math.floor(Math.random() * 500) + 50;
			enemyY[i] = Math.floor(Math.random() * 200) + 50;
			enemySpeed[i] = Math.floor(Math.random() * 3) + 1;
		}
		//スコア
		var score = 0;
		//プレイヤーの弾の配列
		var bullets = [];
		//画像読み込み
		var playerImg = new Image();
		playerImg.src = "https://i.imgur.com/YpJHdQT.png";
		var enemyImg = new Image();
		enemyImg.src = "https://i.imgur.com/nSGWJqT.png";

//キー入力処理
		window.addEventListener("keydown", function(event) {
			switch(event.key) {
				case "ArrowLeft":
					playerX -= playerSpeed;
					break;
				case "ArrowRight":
					playerX += playerSpeed;
					break;
				case "ArrowUp":
					playerY -= playerSpeed;
					break;
				case "ArrowDown":
					playerY += playerSpeed;
					break;
				case " ":
					//プレイヤーの弾を追加
					bullets.push({
						x: playerX + 25,
						y: playerY,
						speed: bulletSpeed
					});
					break;
				default:
					break;
			}
		});

//ゲームループ
		function gameLoop() {
			//背景を再描画
			ctx.fillStyle = "#eee";
			ctx.fillRect(0, 0, canvas.width, canvas.height);

//プレイヤーを描画
			ctx.drawImage(playerImg, playerX, playerY);

//全ての弾を移動して描画
			for(var i=0; i<bullets.length; i++) {
				bullets[i].y -= bullets[i].speed;
				ctx.fillStyle = "red";
				ctx.beginPath();
				ctx.arc(bullets[i].x, bullets[i].y, 5, 0, 2 * Math.PI);
				ctx.fill();
			}

//全ての敵を移動して描画
			for(var i=0; i<enemyCount; i++) {
				enemyX[i] += enemySpeed[i];
				if(enemyX[i] > canvas.width - 50 || enemyX[i] < 0) {
					enemySpeed[i] *= -1;
				}
				ctx.drawImage(enemyImg, enemyX[i], enemyY[i]);
			}

//当たり判定
			for(var i=0; i<bullets.length; i++) {
				for(var j=0; j<enemyCount; j++) {
					if(bullets[i].y < enemyY[j] + 50 && bullets[i].x > enemyX[j] && bullets[i].x < enemyX[j] + 50) {
						//弾と敵が当たった場合、スコアを増やして弾を削除
						score++;
						bullets.splice(i, 1);
						//敵を再配置
						enemyX[j] = Math.floor(Math.random() * 500) + 50;
						enemyY[j] = Math.floor(Math.random() * 200) + 50;
						enemySpeed[j] = Math.floor(Math.random() * 3) + 1;
						break;
					}
				}
			}

//スコアを表示
			ctx.font = "20px Arial";
			ctx.fillStyle = "black";
			ctx.fillText("Score: " + score, 10, 30);

//次のフレームを待つ
			requestAnimationFrame(gameLoop);
		}

gameLoop();
	</script>
</head>
<body>
	<canvas width="600" height="400" id="canvas"></canvas>
</body>
</html>