A game where you can afford to shoryu after seeing a small foot.'s game

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

No:1294

271

←

Prev Next

→

A game where you can afford to shoryu after seeing..ALL
Developer User3025｜Date and time 23/6/18 10:02:27
Build time 56.352 sec｜Game capacity 5.299KB｜

Script

「小足見てから昇龍余裕なゲーム」というタイトルでゲームを作ってみました。以下がプログラムです。スマホで操作可能です。

このゲームは、プレイヤーを操作して敵の当たり判定を避け、できるだけ多くの敵を倒してスコアを稼ぐゲームです。プレイヤーをタップすることで左右に移動し、敵と衝突するとプレイヤーのライフが減ります。ライフがゼロになるとゲームオーバーです。スコアが100点ごとに敵の数が5体ずつ増加します。

←

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">
	<title>小足見てから昇龍余裕なゲーム</title>
	<style>
		html,body{
			height: 100%;
			margin: 0;
			padding: 0;
		}
		canvas{
			display: block;
		}
	</style>
</head>
<body>
	<canvas id="game" width="400" height="800"></canvas>

// 初期化
			init: function(){
				// スコア表示
				this.scoreDisplay = document.createElement("div");
				this.scoreDisplay.style.position = "absolute";
				this.scoreDisplay.style.top = "10px";
				this.scoreDisplay.style.left = "10px";
				this.scoreDisplay.style.fontSize = "24px";
				this.scoreDisplay.style.color = "white";
				this.scoreDisplay.innerHTML = "Score: " + this.score;
				document.body.appendChild(this.scoreDisplay);

// ライフ表示
				this.lifeDisplay = document.createElement("div");
				this.lifeDisplay.style.position = "absolute";
				this.lifeDisplay.style.top = "10px";
				this.lifeDisplay.style.right = "10px";
				this.lifeDisplay.style.fontSize = "24px";
				this.lifeDisplay.style.color = "white";
				this.lifeDisplay.innerHTML = "Lives: " + this.lives;
				document.body.appendChild(this.lifeDisplay);

// キャンバス設定
				this.canvas = document.getElementById("game");
				this.ctx = this.canvas.getContext("2d");
				this.canvas.addEventListener("click", this.onClick.bind(this));

// プレイヤー作成
				this.player = {
					x: this.canvas.width / 2,
					y: this.canvas.height - 50,
					width: 30,
					height: 30,
					color: "yellow",
					speed: 5
				};

// 敵作成
				this.enemies = [];
				for(var i = 0; i < 10; i++){
					var enemy = {
						x: Math.random() * this.canvas.width,
						y: Math.random() * this.canvas.height / 2,
						radius: 20,
						color: "red",
						speed: Math.random() * 3 + 1
					};
					this.enemies.push(enemy);
				}

// ゲームループスタート
				requestAnimationFrame(this.loop.bind(this));
			},

// ゲームループ
			loop: function(){
				// キャンバスをクリア
				this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);

// 移動
				if(this.moveLeft){
					this.player.x -= this.player.speed;
				}
				if(this.moveRight){
					this.player.x += this.player.speed;
				}

// プレイヤーを描画
				this.ctx.fillStyle = this.player.color;
				this.ctx.fillRect(this.player.x - this.player.width / 2, this.player.y - this.player.height / 2, this.player.width, this.player.height);

// 敵を移動し描画
				for(var i = 0; i < this.enemies.length; i++){
					var enemy = this.enemies[i];
					enemy.y += enemy.speed;
					if(enemy.y > this.canvas.height + enemy.radius){
						enemy.x = Math.random() * this.canvas.width;
						enemy.y = -enemy.radius;
					}
					this.ctx.fillStyle = enemy.color;
					this.ctx.beginPath();
					this.ctx.arc(enemy.x, enemy.y, enemy.radius, 0, Math.PI * 2);
					this.ctx.fill();

// 当たり判定
					var distX = Math.abs(enemy.x - this.player.x);
					var distY = Math.abs(enemy.y - this.player.y);
					var dist = Math.sqrt(distX * distX + distY * distY);
					if(dist < this.player.width / 2 + enemy.radius){
						this.lives--;
						this.lifeDisplay.innerHTML = "Lives: " + this.lives;
						if(this.lives == 0){
							this.gameOver = true;
						}
					}
				}

if(!this.gameOver){
					// スコア加算
					this.score += this.enemies.length * 10;
					this.scoreDisplay.innerHTML = "Score: " + this.score;

// 敵を増やす
					if(this.score % 100 == 0){
						for(var i = 0; i < 5; i++){
							var enemy = {
								x: Math.random() * this.canvas.width,
								y: Math.random() * this.canvas.height / 2,
								radius: 20,
								color: "red",
								speed: Math.random() * 3 + 1
							};
							this.enemies.push(enemy);
						}
					}

requestAnimationFrame(this.loop.bind(this));
				}else{
					// ゲームオーバー表示
					this.ctx.fillStyle = "black";
					this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
					this.ctx.fillStyle = "white";
					this.ctx.textAlign = "center";
					this.ctx.font = "40px Arial";
					this.ctx.fillText("GAME OVER", this.canvas.width / 2, this.canvas.height / 2);
				}
			},

// クリック時の処理
			onClick: function(event){
				if(event.clientY > this.player.y){
					this.moveRight = true;
				}else{
					this.moveLeft = true;
				}
			},

// クリックが離された時の処理
			onMouseUp: function(event){
				this.moveLeft = false;
				this.moveRight = false;
			}
		};

// 初期化
		game.init();

</script>

</body>
</html>
```