猫が戦うベルトスクロールアクションファイナルファイト 's game

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

No:1686

493

←

Prev Next

→

猫が戦うベルトスクロールアクションファイナルファイト
Developer User3294｜Date and time 23/6/18 21:49:11
Build time 61.285 sec｜Game capacity 4.718KB｜

Script

風のゲームを作成しました。以下がプログラムの実装です。

Life: 3
Score: 0

本作は、プレイヤーが猫を操作して敵を避けながら、スコアを上げていくベルトスクロールアクションゲームです。猫には3つのライフがあり、敵に当たると1つ減ります。敵を倒すことはできません。制限時間はありません。スコアは1秒ごとに10加算されます。操作方法は、左右の矢印キーです。絵文字を多く使用し、かわいらしい雰囲気を作り出しました。

←

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 {
			margin: 0;
			padding: 0;
		}
		canvas {
			background-color: #333;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
	<script>
		var canvas, ctx, 
		enemyImgs = [
			"https://twemoji.maxcdn.com/v/13.0.1/72x72/1f431.png",
			"https://twemoji.maxcdn.com/v/13.0.1/72x72/1f408.png",
			"https://twemoji.maxcdn.com/v/13.0.1/72x72/1f63a.png"
		], 
		catImg = "https://twemoji.maxcdn.com/v/13.0.1/72x72/1f408.png", 
		enemyList = [], 
		animationFrame, 
		catX = 50, catY = 150, 
		catMoveLeft = false, catMoveRight = false, 
		catSpeed = 8, 
		catState = 'stand', 
		catSize = 60, 
		enemySpeed = 1, 
		catLife = 3, 
		gameScore = 0, 
		gameScoreInterval, gameEnd = false;

function startGame() {
			canvas = document.getElementById("canvas");
			ctx = canvas.getContext("2d");
			canvas.width = window.innerWidth;
			canvas.height = window.innerHeight;

// キーイベント
			document.addEventListener('keydown', keyDown, false);
			document.addEventListener('keyup', keyUp, false);
			
			// 敵の生成
			createEnemy();

// スコア表示
			$('#score').html(gameScore);

// ゲームスタート
			gameScoreInterval = setInterval(function() {
				gameScore += 10;
				$('#score').html(gameScore);
			}, 1000);
			animationFrame = window.requestAnimationFrame(update);
		}

function createEnemy() {
			var enemyIndex = Math.floor(Math.random() * enemyImgs.length);
			enemyList.push({
				img: enemyImgs[enemyIndex], 
				x: canvas.width - 50, 
				y: Math.floor(Math.random() * (canvas.height - catSize))
			});
			setTimeout(createEnemy, 1000);
		}

function update() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);

// 背景
			ctx.beginPath();
			ctx.rect(0, 0, canvas.width, canvas.height);
			ctx.fillStyle = "#333";
			ctx.fill();

// 猫
			drawCat();

// 敵
			drawEnemy();

// スコア
			ctx.font = "30px Arial";
			ctx.fillStyle = "#fff";
			ctx.fillText("Score: " + gameScore, 20, 50);

// ゲームオーバー
			if (catLife <= 0) {
				gameEnd = true;
				ctx.fillText("Game Over", canvas.width / 2 - 80, canvas.height / 2);
			}

if (!gameEnd) {
				animationFrame = window.requestAnimationFrame(update);
			}
		}

function drawEnemy() {
			for (var i = 0; i < enemyList.length; i++) {
				var enemyObj = new Image();
				enemyObj.src = enemyList[i].img;
				enemyList[i].x -= enemySpeed;
				ctx.drawImage(enemyObj, enemyList[i].x, enemyList[i].y, catSize, catSize);
				
				if (enemyList[i].x < -50) {
					enemyList.splice(i, 1);
					catLife--;
					$('#life').html(catLife);
				}

if (isCollide(catX, catY, catSize, catSize, enemyList[i].x, enemyList[i].y, catSize, catSize)) {
					enemyList.splice(i, 1);
					catLife--;
					$('#life').html(catLife);
				}
			}
		}

function isCollide(ax, ay, aw, ah, bx, by, bw, bh) {
			if (ax + aw > bx && ax < bx + bw && ay + ah > by && ay < by + bh) {
				return true;
			}
		}

$(document).ready(function() {
			startGame();
		});
	</script>
	<div style="position: absolute; top: 20px; right: 20px;">
		Life: <span id="life">3</span><br>
		Score: <span id="score">0</span>
	</div>
</body>
</html>