killing a passerby in order to test a new sword's game

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

No:3822

1945

←

Prev Next

→

killing a passerby in order to test a new sword
Developer User3694｜Date and time 23/6/26 18:04:32
Build time 27.656 sec｜Game capacity 2.682KB｜

Script

というゲームを制作しました。以下が実装内容です。

このゲームでは、プレイヤーが左右に移動して、出現する敵キャラクターを避けるゲームです。敵キャラクターに当たるとゲームオーバーになります。左右キーを押すことで移動できます。キャンバスを使用して描画されています。

←

Prev　Next

→ 　

Back　

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

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

というゲームを制作しました。以下が実装内容です。

<!DOCTYPE html>
<html>
<head>
	<title>辻斬りゲーム</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no">
	<style>
		body{
			margin: 0;
			padding: 0;
			background-color: #eee;
			text-align: center;
			font-size: 20px;
		}
		canvas{
			display: block;
			margin: auto;
			background-color: #fff;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<script>
		//キャンバスの設定
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");
		canvas.width = 300;
		canvas.height = 500;

//プレイヤー情報
		var player = {
			x: canvas.width / 2,
			y: canvas.height - 70,
			width: 40,
			height: 60,
			speed: 5
		};

//敵情報
		var enemy = {
			x: Math.floor(Math.random() * (canvas.width - 50) + 1),
			y: -50,
			width: 50,
			height: 50,
			speed: 2
		};

//絵の描画
		function draw(){
			//背景の描画
			ctx.fillStyle = "#eee";
			ctx.fillRect(0, 0, canvas.width, canvas.height);

//プレイヤーの描画
			ctx.fillStyle = "#f00";
			ctx.fillRect(player.x, player.y, player.width, player.height);

//敵の描画
			ctx.fillStyle = "#0f0";
			ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
		}

//ゲームループ
		function gameLoop(){
			//プレイヤーの移動
			if(keyArrowLeft){
				player.x -= player.speed;
			}
			else if(keyArrowRight){
				player.x += player.speed;
			}

//敵の移動
			enemy.y += enemy.speed;

//敵とプレイヤーの当たり判定
			if(enemy.y + enemy.height > player.y && enemy.y < player.y + player.height && enemy.x + enemy.width > player.x && enemy.x < player.x + player.width){
				alert("ゲームオーバー");
				location.reload();
			}

draw();
			requestAnimationFrame(gameLoop);
		}

//キーボード操作
		var keyArrowLeft = false;
		var keyArrowRight = false;
		document.addEventListener("keydown", function(event){
			if(event.keyCode == 37){
				keyArrowLeft = true;
			}
			else if(event.keyCode == 39){
				keyArrowRight = true;
			}
		});
		document.addEventListener("keyup", function(event){
			if(event.keyCode == 37){
				keyArrowLeft = false;
			}
			else if(event.keyCode == 39){
				keyArrowRight = false;
			}
		});

gameLoop();

</script>
</body>
</html>