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

No:2003

7229

←

Prev Next

→

4-match puzzle
Developer User1006｜Date and time 23/6/19 18:15:37
Build time 76.929 sec｜Game capacity 6KB｜

Script

4マッチパズル

タイムアタックでスコアアップ!

Score: 0

Time: 0

Game Over
Your score is

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>4マッチパズル</title>
	<style>
		body {
			text-align: center;
			background-color: #f9f9f9;
		}
		h1 {
			font-size: 3.5em;
			margin-top: 30px;
			margin-bottom: 20px;
			color: #333;
		}
		p {
			font-size: 2em;
			margin-bottom: 10px;
			color: #666;
		}
		#board {
			display: inline-block;
			margin-top: 30px;
			margin-bottom: 30px;
		}
		.box {
			display: inline-block;
			width: 50px;
			height: 50px;
			margin: 5px;
			vertical-align: top;
			border-radius: 10px;
			background-color: #ddd;
			position: relative;
			cursor: pointer;
			transition: all 0.2s ease;
		}
		.box:hover {
			transform: scale(1.1);
			z-index: 1;
			box-shadow: 0px 0px 10px #999;
		}
		.box.selected {
			background-color: #ffaa00;
		}
		img {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 30px;
			height: 30px;
		}
		#score {
			font-size: 2em;
			color: #666;
		}
		#time {
			margin-top: 10px;
			font-size: 1.5em;
			color: #999;
		}
		#gameover {
			display: none;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background-color: rgba(0, 0, 0, 0.7);
			color: #fff;
			padding: 20px;
			border-radius: 10px;
			z-index: 2;
		}
	</style>
</head>
<body>
	<h1>4マッチパズル</h1>
	<p>タイムアタックでスコアアップ!</p>
	<div id="board"></div>
	<div id="score">Score: 0</div>
	<div id="time">Time: 0</div>
	<div id="gameover">Game Over<br>Your score is <span id="finalscore"></span></div>
	<script>
		const boardSize = 8;
		const colors = ["🍎", "🍇", "🍌", "🍊", "🍓", "🍒", "🫐", "🥥"];
		let board = [];
		let selected = null;
		let score = 0;
		let time = 60;
		let intervalId = null;

function isAdjacent(box1, box2) {
			let rowDiff = Math.abs(box1.dataset.row - box2.dataset.row);
			let colDiff = Math.abs(box1.dataset.col - box2.dataset.col);
			return (rowDiff === 1 && colDiff === 0) || (rowDiff === 0 && colDiff === 1);
		}

function swap(box1, box2) {
			let tempRow = box1.dataset.row;
			let tempCol = box1.dataset.col;
			box1.dataset.row = box2.dataset.row;
			box1.dataset.col = box2.dataset.col;
			box2.dataset.row = tempRow;
			box2.dataset.col = tempCol;
			board[box1.dataset.row][box1.dataset.col] = box1;
			board[box2.dataset.row][box2.dataset.col] = box2;
		}

function updateScore() {
			document.getElementById("score").innerHTML = "Score: " + score;
		}

function updateTime() {
			time--;
			document.getElementById("time").innerHTML = "Time: " + time;
			if (time === 0) {
				gameOver();
			}
		}

function gameOver() {
			clearInterval(intervalId);
			document.getElementById("finalscore").innerHTML = score;
			document.getElementById("gameover").style.display = "block";
		}

init();
	</script>
</body>
</html>