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

No:2530

4778

←

Prev Next

→

2048 It is a game to make 2048 by sliding the bloc..ALL
Developer もちきなこ｜Date and time 23/6/21 21:16:37
Build time 72.081 sec｜Game capacity 5.264KB｜

Script

2048 Game

Score: 0

↑
← ↓ →

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>2048 Game!</title>
<style>
	body {
		font-size: 2em;
		text-align: center;
	}
	.game-container {
		display: inline-block;
		margin: 1em auto;
		text-align:center;
		border: 2px solid black;
		padding: 1em;
	}
	.row {
		margin: 0.5em;
	}
	.block {
		display: inline-block;
		font-size: 1.5em;
		width: 3em;
		height: 3em;
		background-color: #eee;
		margin: 0.2em;
		border-radius: 0.5em;
		text-align: center;
		line-height: 3em;
	}
	.up, .down, .left, .right {
		display: inline-block;
		font-size: 3em;
		margin: 0.5em;
	}
</style>
</head>
<body>
	<div class="game-container">
		<h1>2048 Game</h1>
		<h2>Score: <span id="score">0</span></h2>
		<div id="game-board"></div>
		<div id="game-button">
			<button id="new-game">New Game</button>
		</div>
		<div class="arrow-container">
			<span class="up">↑</span><br>
			<span class="left">←</span>
			<span class="down">↓</span>
			<span class="right">→</span>
		</div>
	</div>
<script>
//initialize the game
let score = 0;
let board = [];
let rows = 4;
let cols = 4;

//create the board
function createBoard() {
	for (let i = 0; i < rows; i++) {
		let row = [];
		for (let j = 0; j < cols; j++) {
			row.push(0);
		}
		board.push(row);
	}
}

//draw the board
function drawBoard() {
	let boardEl = document.getElementById('game-board');
	boardEl.innerHTML = '';
	for (let i = 0; i < rows; i++) {
		let rowEl = document.createElement('div');
		rowEl.classList.add('row');
		for (let j = 0; j < cols; j++) {
			let blockEl = document.createElement('div');
			blockEl.classList.add('block');
			blockEl.innerText = board[i][j] === 0 ? '' : board[i][j];
			blockEl.setAttribute('data-row', i);
			blockEl.setAttribute('data-col', j);
			rowEl.appendChild(blockEl);
		}
		boardEl.appendChild(rowEl);
	}
}

//add a new block randomly
function addNewBlock() {
	let row = Math.floor(Math.random() * rows);
	let col = Math.floor(Math.random() * cols);
	if (board[row][col] !== 0) {
		addNewBlock();
	} else {
		board[row][col] = 2;
		drawBoard();
	}
}

//move blocks
function moveBlocks(direction) {
	let isMoved = false;
	for (let i = 0; i < rows; i++) {
		for (let j = 0; j < cols; j++) {
			if (board[i][j] !== 0) {
				switch (direction) {
					case 'up':
						if(i > 0 && board[i-1][j] === 0) {
							//move up
							board[i-1][j] = board[i][j];
							board[i][j] = 0;
							isMoved = true;
						} else if(i > 0 && board[i-1][j] === board[i][j]) {
							//merge
							board[i-1][j] *= 2;
							board[i][j] = 0;
							isMoved = true;
							score += board[i-1][j];
						}
						break;
					case 'down':
						if(i < rows-1 && board[i+1][j] === 0) {
							//move down
							board[i+1][j] = board[i][j];
							board[i][j] = 0;
							isMoved = true;
						} else if(i < rows-1 && board[i+1][j] === board[i][j]) {
							//merge
							board[i+1][j] *= 2;
							board[i][j] = 0;
							isMoved = true;
							score += board[i+1][j];
						}
						break;
					case 'left':
						if(j > 0 && board[i][j-1] === 0) {
							//move left
							board[i][j-1] = board[i][j];
							board[i][j] = 0;
							isMoved = true;
						} else if(j > 0 && board[i][j-1] === board[i][j]) {
							//merge
							board[i][j-1] *= 2;
							board[i][j] = 0;
							isMoved = true;
							score += board[i][j-1];
						}
						break;
					case 'right':
						if(j < cols-1 && board[i][j+1] === 0) {
							//move right
							board[i][j+1] = board[i][j];
							board[i][j] = 0;
							isMoved = true;
						} else if (j < cols-1 && board[i][j+1] === board[i][j]) {
							//merge
							board[i][j+1] *= 2;
							board[i][j] = 0;
							isMoved = true;
							score += board[i][j+1];
						}
						break;
					default:
						console.log('invalid direction');
				}
			}
		}
	}
	if (isMoved) {
		drawBoard();
		addNewBlock();
		drawBoard();
		updateScore();
	}
	checkGameOver();
}

//update the score
function updateScore() {
	document.getElementById('score').innerText = score;
}

//check if the game is over
function checkGameOver() {
	let gameOver = true;
	for (let i = 0; i < rows; i++) {
		for (let j = 0; j < cols; j++) {
			if (board[i][j] === 0) {
				gameOver = false;
			}
			if (i > 0 && board[i][j] === board[i-1][j]) {
				gameOver = false;
			}
			if (i < rows-1 && board[i][j] === board[i+1][j]) {
				gameOver = false;
			}
			if (j > 0 && board[i][j] === board[i][j-1]) {
				gameOver = false;
			}
			if (j < cols-1 && board[i][j] === board[i][j+1]) {
				gameOver = false;
			}
		}
	}
	if (gameOver) {
		alert(`Game Over! Your Score: ${score}`);
	}
}

//start a new game
function newGame() {
	score = 0;
	board = [];
	createBoard();
	drawBoard();
	addNewBlock();
	addNewBlock();
	drawBoard();
	updateScore();
}

//add event listeners
document.getElementById('new-game').addEventListener('click', newGame)
document.addEventListener('keyup', (e) => {
	switch(e.code) {
		case 'ArrowUp':
			moveBlocks('up');
			break;
		case 'ArrowDown':
			moveBlocks('down');
			break;
		case 'ArrowLeft':
			moveBlocks('left');
			break;
		case 'ArrowRight':
			moveBlocks('right');
			break;
		default:
			console.log('invalid key!');
	}
});

//start a new game when the page is loaded
window.onload = newGame;

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