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

No:115

574

←

Prev Next

→

Melting Ice game
Developer User2299｜Date and time 23/5/20 22:25:49
Build time 68.146 sec｜Game capacity 2.467KB｜

Script

氷を溶かすゲーム

操作方法:

タップ/クリックで氷を溶かす

スコア: 0

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>Ice Melting Game</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
		body {
			background-color: #0077be;
			color: #fff;
			text-align: center;
			font-size: 24px;
			margin: 0;
			padding: 0;
		}
		canvas {
			display: block;
			margin: auto;
			background-color: #fff;
		}
	</style>
</head>
<body>
	<h1>氷を溶かすゲーム</h1>
	<h2>操作方法:</h2>
	<p>タップ/クリックで氷を溶かす</p>
	<p id="score">スコア: 0</p>
	<canvas id="gameCanvas"></canvas>
	<script>
		// ゲームオブジェクトの定義
		const game = {
			canvas: document.getElementById('gameCanvas'),
			score: 0,
			iceWidth: 50,
			iceHeight: 50,
			iceX: 0,
			iceY: 0,
			iceSpeed: 5,
			maxScore: 10,
			gameOver: false,
			init: function() {
				this.canvas.width = window.innerWidth;
				this.canvas.height = window.innerHeight - 150;
				this.canvas.addEventListener('click', this.onClick.bind(this));
				this.ctx = this.canvas.getContext('2d');
				this.drawIce();
				this.drawScore();
			},
			drawIce: function() {
				this.iceX = Math.floor(Math.random() * (this.canvas.width - this.iceWidth));
				this.iceY = Math.floor(Math.random() * (this.canvas.height - this.iceHeight - 150)) + 100;
				this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
				this.ctx.fillStyle = '#00bbff';
				this.ctx.fillRect(this.iceX, this.iceY, this.iceWidth, this.iceHeight);
			},
			drawScore: function() {
				document.getElementById('score').textContent = 'スコア: ' + this.score;
			},
			onClick: function(event) {
				if (!this.gameOver) {
					const rect = this.canvas.getBoundingClientRect();
					const x = event.clientX - rect.left;
					const y = event.clientY - rect.top;
					if (x >= this.iceX && x <= this.iceX + this.iceWidth && y >= this.iceY && y <= this.iceY + this.iceHeight) {
						this.score++;
						this.drawScore();
						if (this.score == this.maxScore) {
							this.gameOver = true;
							alert('おめでとう！ゲームクリア！');
						} else {
							this.drawIce();
						}
					}
				}
			},
			moveIce: function() {
				if (!this.gameOver) {
					this.iceY -= this.iceSpeed;
					if (this.iceY < -this.iceHeight) {
						this.drawIce();
					}
				}
			},
			start: function() {
				this.init();
				setInterval(this.moveIce.bind(this), 50);
			}
		};
		// ゲームの開始
		game.start();
	</script>
</body>
</html>