Warning: count(): Parameter must be an array or an object that implements Countable in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 157

Warning: in_array() expects parameter 2 to be array, bool given in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 476

Warning: count(): Parameter must be an array or an object that implements Countable in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 484
2048 It is a game to make 2048 by sliding the blocks in the 4x4 square. Use the D-Pad to slide. Initially, there is one "2" in the square. By sliding, a new "2" is generated at a random position. "2" is generated every time the slider is moved. When sliding, if the same numbers are adjacent in the same direction as the sliding direction, the numbers can be \"synthesized\". "2" and "2" add "4", "4" and "4" add "8", and so on. When combined, the two numbers used in the combination become one. It's game over when all the squares are filled.'s game | AI game creator

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

No:2530

7191

←

Prev Next

→

2048 It is a game to make 2048 by sliding the bloc..ALL
Developer anonymous｜Date and time 70/1/1 10:27:44
Build time unknown 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>