Chamber of Mind and Time's game

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

No:3135

1682

←

Prev Next

→

Chamber of Mind and Time
Developer User3660｜Date and time 23/6/23 23:20:57
Build time 54.375 sec｜Game capacity 4.639KB｜

Script

Score: 0

GAME OVER
再度プレイするには画面をタップ

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>精神と時の部屋</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			margin: 0;
			padding: 0;
		}
		
		canvas {
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
		}
		
		#score {
			position: fixed;
			top: 10px;
			right: 10px;
			font-size: 24px;
			color: white;
			text-shadow: 1px 1px black;
		}
		
		#gameover {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			font-size: 36px;
			color: white;
			text-shadow: 2px 2px black;
			display: none;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<div id="score">Score: 0</div>
	<div id="gameover">GAME OVER<br>再度プレイするには画面をタップ</div>
	<script>
		let canvas = document.getElementById("canvas");
		let ctx = canvas.getContext("2d");
		
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;
		
		let score = 0;
		let player = {
			x: canvas.width/2,
			y: canvas.height-50,
			size: 50,
			speed: 10,
			dx: 0,
			dy: 0
		};
		let keys = {
			ArrowLeft: false,
			ArrowRight: false,
			ArrowUp: false,
			ArrowDown: false
		};
		let bullets = [];
		let enemies = [];
		let gameover = false;
		
		
		document.addEventListener("keydown", function(e){
			keys[e.key] = true;
		});
		document.addEventListener("keyup", function(e){
			keys[e.key] = false;
		});
		canvas.addEventListener("click", function(e){
			if(gameover){
				location.reload();
			}
		});
		
		function movePlayer(){
			if(keys.ArrowLeft && player.x > player.size/2){
				player.dx = -player.speed;
			}else if(keys.ArrowRight && player.x < canvas.width - player.size/2){
				player.dx = player.speed;
			}else{
				player.dx = 0;
			}
			if(keys.ArrowUp && player.y > player.size/2){
				player.dy = -player.speed;
			}else if(keys.ArrowDown && player.y < canvas.height - player.size/2){
				player.dy = player.speed;
			}else{
				player.dy = 0;
			}
			player.x += player.dx;
			player.y += player.dy;
		}
		
		function shoot(){
			bullets.push({
				x: player.x,
				y: player.y,
				size: 10,
				speed: 10
			});
		}
		
		function createEnemy(){
			enemies.push({
				x: Math.floor(Math.random() * canvas.width),
				y: 0,
				size: 50,
				speed: Math.floor(Math.random()*5) + 3
			});
		}
		
		function moveBullets(){
			for(let i = 0; i < bullets.length; i++){
				bullets[i].y -= bullets[i].speed;
				if(bullets[i].y < 0){
					bullets.splice(i,1);
				}
			}
		}
		
		function moveEnemies(){
			for(let i = 0; i < enemies.length; i++){
				enemies[i].y += enemies[i].speed;
				if(enemies[i].y > canvas.height + enemies[i].size){
					enemies.splice(i,1);
				}
			}
		}
		
		function detectCollision(){
			for(let i = 0; i < bullets.length; i++){
				for(let j = 0; j < enemies.length; j++){
					if(bullets[i].x < enemies[j].x + enemies[j].size &&
					   bullets[i].x + bullets[i].size > enemies[j].x &&
					   bullets[i].y < enemies[j].y + enemies[j].size &&
					   bullets[i].y + bullets[i].size > enemies[j].y){
						   bullets.splice(i,1);
						   enemies.splice(j,1);
						   score += 10;
					   }
				}
			}
			for(let i = 0; i < enemies.length; i++){
				if(player.x < enemies[i].x + enemies[i].size &&
				   player.x + player.size > enemies[i].x &&
				   player.y < enemies[i].y + enemies[i].size &&
				   player.y + player.size > enemies[i].y){
					   gameover = true;
				   }
			}
		}
		
		function drawPlayer(){
			ctx.fillStyle = "white";
			ctx.fillRect(player.x - player.size/2, player.y - player.size/2, player.size, player.size);
		}
		
		function drawBullets(){
			ctx.fillStyle = "white";
			for(let i = 0; i < bullets.length; i++){
				ctx.fillRect(bullets[i].x - bullets[i].size/2, bullets[i].y - bullets[i].size/2, bullets[i].size, bullets[i].size);
			}
		}
		
		function drawEnemies(){
			ctx.fillStyle = "red";
			for(let i = 0; i < enemies.length; i++){
				ctx.fillRect(enemies[i].x, enemies[i].y, enemies[i].size, enemies[i].size);
			}
		}
		
		function drawScore(){
			document.getElementById("score").innerText = "Score: " + score;
		}
		
		function draw(){
			ctx.clearRect(0,0,canvas.width,canvas.height);
			drawPlayer();
			drawBullets();
			drawEnemies();
			drawScore();
			
			if(gameover){
				document.getElementById("gameover").style.display = "block";
				return;
			}
			
			movePlayer();
			moveBullets();
			moveEnemies();
			detectCollision();
			
			if(Math.random() < 0.05){
				createEnemy();
			}
			requestAnimationFrame(draw);
		}
		
		requestAnimationFrame(draw);
	</script>
</body>
</html>