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

No:238

257

←

Prev Next

→

A game about building a modern metropolis
Developer User2934｜Date and time 23/6/11 5:17:43
Build time 12.442 sec｜Game capacity 4.397KB｜

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 name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body{
			font-family: Arial, sans-serif;
			background-color: #8ab2f5;
		}
		#canvas {
			background-color: white;
			border: 2px solid black;
		}
		h1{
			margin-top: 10px;
			text-align: center;
			color: white;
		}
		#scoreboard{
			color: white;
			text-align: center;
			font-size: 20px;
			font-weight: bold;
			margin-top: 5px;
		}
		#button_container{
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			margin-top: 10px;
		}
		button{
			margin: 5px;
			font-size: 18px;
			background-color: #4CAF50;
			color: white;
			padding: 10px 20px;
			border: none;
			border-radius: 4px;
			cursor: pointer;
		}
		button:hover{
			background-color: #3E8E41;
		}
	</style>
</head>
<body>
	<h1>Строительство мегаполиса</h1>
	<canvas id="canvas" width="400" height="600"></canvas>
	<div id="scoreboard"></div>
	<div id="button_container">
		<button id="start_button">Начать игру</button>
		<button id="reset_button">Сбросить</button>
	</div>

// переменные игры
		let score = 0;
		let level = 1;
		let gameover = false;

// класс объекта здания
		class Building {
			constructor(x,y,width,height,color) {
				this.x = x;
				this.y = y;
				this.width = width;
				this.height = height;
				this.color = color;
			}
			draw() {
				context.fillStyle = this.color;
				context.fillRect(this.x, this.y, this.width, this.height);
			}
			move() {
				this.y += 5 * level;
			}
		}

// массив зданий
		const buildings = [];

// генерация случайного здания
		function generateBuilding() {
			const width = Math.floor(Math.random() * 100 + 50);
			const height = Math.floor(Math.random() * 300 + 50);
			const x = Math.floor(Math.random() * (canvas.width - width - 2) + 1);
			const y = -height;
			const color = "#"+((1<<24)*Math.random()|0).toString(16);
			buildings.push(new Building(x,y,width,height,color));
		}

// обновление игрового экрана
		function update() {
			// очистка экрана
			context.clearRect(0, 0, canvas.width, canvas.height);

// остановка игры после достижения максимального уровня
			if(level > 10){
				gameover = true;
			}

// проверка столкновения зданий с землей
			buildings.forEach(building => {
				if(building.y + building.height > canvas.height) {
					gameover = true;
				}
			});

// удаление зданий за пределами экрана
			while(buildings.length > 0 && buildings[0].y > canvas.height) {
				buildings.shift();
				score++;
			}

// генерация новых зданий
			if(Math.random() < 0.02 * level) {
				generateBuilding();
			}

// отрисовка и движение зданий
			buildings.forEach(building => {
				building.draw();
				building.move();
			});

// отображение очков и уровня
			document.getElementById("scoreboard").innerHTML = `Очки: ${score}    Уровень: ${level}`;

// увеличение уровня
			if(score > 9 && score % 10 === 0) {
				level++;
			}

// остановка игры при проигрыше
			if(gameover) {
				context.font = "50px Arial";
				context.fillStyle = "red";
				context.textAlign = "center";
				context.fillText("Конец игры", canvas.width/2, canvas.height/2);
			} else {
				requestAnimationFrame(update);
			}
		}

// нажатие кнопки "Начать игру"
		document.getElementById("start_button").addEventListener("click", () => {
			score = 0;
			level = 1;
			gameover = false;
			buildings.length = 0;
			requestAnimationFrame(update);
		});

// нажатие кнопки "Сбросить"
		document.getElementById("reset_button").addEventListener("click", () => {
			score = 0;
			level = 1;
			gameover = true;
			buildings.length = 0;
			context.clearRect(0, 0, canvas.width, canvas.height);
			document.getElementById("scoreboard").innerHTML = "";
		});
	</script>
</body>
</html>