Scribd
Upload
19 views4 pages

Untitled Document

Uploaded by

ibisbibi6
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
19 views4 pages

Untitled Document

Uploaded by

ibisbibi6
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2048</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #faf8ef;
}
.game-container {
display: grid;
grid-template-columns: repeat(4, 100px);
grid-template-rows: repeat(4, 100px);
gap: 10px;
padding: 10px;
background-color: #bbada0;
border-radius: 10px;
}
.cell {
width: 100px;
height: 100px;
background-color: #cdc1b4;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: bold;
color: white;
text-align: center;
}
.cell-2 { background-color: #eee4da; }
.cell-4 { background-color: #ece0c8; }
.cell-8 { background-color: #f2b179; }
.cell-16 { background-color: #f59563; }
.cell-32 { background-color: #f67c5f; }
.cell-64 { background-color: #f65e3b; }
.cell-128 { background-color: #edcf72; }
.cell-256 { background-color: #edcc61; }
.cell-512 { background-color: #edc850; }
.cell-1024 { background-color: #edc53f; }
.cell-2048 { background-color: #edc22e; }
.game-info {
margin-top: 20px;
text-align: center;
}
.game-info button {
padding: 10px 20px;
background-color: #8f7a66;
border: none;
color: white;
font-size: 18px;
border-radius: 5px;
cursor: pointer;
}
.game-info button:hover {
background-color: #6d5f50;
}
</style>
</head>
<body>
<div class="game-container" id="gameContainer"></div>
<div class="game-info">
<button onclick="startGame()">Oyunu Başlat</button>
<p id="gameStatus"></p>
</div>

<script>
let board;
let gameOver = false;

// Yeni oyun başlatma


function startGame() {
board = [
[null, null, null, null],
[null, null, null, null],
[null, null, null, null],
[null, null, null, null]
];
gameOver = false;
document.getElementById('gameStatus').textContent = '';
addNewTile();
addNewTile();
render();
}

// Yeni bir tile eklemek


function addNewTile() {
if (gameOver) return;
let emptyCells = [];
for (let row = 0; row < 4; row++) {
for (let col = 0; col < 4; col++) {
if (board[row][col] === null) {
emptyCells.push([row, col]);
}
}
}

if (emptyCells.length > 0) {
const [row, col] = emptyCells[Math.floor(Math.random() *
emptyCells.length)];
board[row][col] = Math.random() < 0.9 ? 2 : 4; // Yeni tile 2 veya
4 olur
}
}
// Tile'ları ekrana yansıtma
function render() {
const gameContainer = document.getElementById('gameContainer');
gameContainer.innerHTML = '';
for (let row = 0; row < 4; row++) {
for (let col = 0; col < 4; col++) {
const cell = document.createElement('div');
const value = board[row][col];
cell.classList.add('cell');
if (value) {
cell.textContent = value;
cell.classList.add('cell-' + value);
}
gameContainer.appendChild(cell);
}
}
}

// Tile'ları kaydırma
function slide(rowOrCol) {
let moved = false;
let tempBoard = [];
if (rowOrCol === 'row') {
for (let row = 0; row < 4; row++) {
const newRow = slideRow(board[row]);
if (newRow !== board[row].toString()) moved = true;
tempBoard.push(newRow);
}
} else {
for (let col = 0; col < 4; col++) {
const newCol = [];
for (let row = 0; row < 4; row++) {
newCol.push(board[row][col]);
}
const movedCol = slideRow(newCol);
if (movedCol !== newCol.toString()) moved = true;
for (let row = 0; row < 4; row++) {
tempBoard[row][col] = movedCol[row];
}
}
}

if (moved) {
board = tempBoard;
addNewTile();
render();
checkGameOver();
}
}

// Bir satırdaki kaydırma işlemi


function slideRow(row) {
const newRow = row.filter(val => val !== null);
for (let i = 0; i < newRow.length - 1; i++) {
if (newRow[i] === newRow[i + 1]) {
newRow[i] *= 2;
newRow[i + 1] = null;
i++;
}
}
return newRow.filter(val => val !== null).concat(Array(4 -
newRow.length).fill(null));
}

// Oyun bitip bitmediğini kontrol etme


function checkGameOver() {
if (gameOver) return;

let gameOverFlag = true;


for (let row = 0; row < 4; row++) {
for (let col = 0; col < 4; col++) {
if (board[row][col] === null) {
gameOverFlag = false;
break;
}
if (row < 3 && board[row][col] === board[row + 1][col])
gameOverFlag = false;
if (col < 3 && board[row][col] === board[row][col + 1])
gameOverFlag = false;
}
if (!gameOverFlag) break;
}

if (gameOverFlag) {
gameOver = true;
document.getElementById('gameStatus').textContent = "Oyun Bitti!";
}
}

// Kullanıcı ok tuşlarıyla kaydırma yapabilir


document.addEventListener('keydown', function(event) {
if (event.key === 'ArrowUp') {
slide('col');
} else if (event.key === 'ArrowDown') {
slide('col');
} else if (event.key === 'ArrowLeft') {
slide('row');
} else if (event.key === 'ArrowRight') {
slide('row');
}
});

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

You might also like