بازی آنلاین
آپلود عکس
21-09-2023، 21:44
(آخرین ویرایش در این ارسال: 21-09-2023، 21:50، توسط ☪爪尺.山丨几几乇尺☪.)
(21-09-2023، 21:37)امیر‌حسین نوشته است: دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
(21-09-2023، 21:25)☪爪尺.山丨几几乇尺☪ نوشته است: دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
سلطان چجوری کدای Css و Javascript و Html رو ترکیب کنم.
میخواستم بازی 2048 رو تو یکی از صفحه بیارم نتونستم.
کداشو دارم .....
ترکیب؟ برای چه کاری دقیقا؟
میخواستم گیمو بالا بیارم از ۳ زبان css و javascript و html نوشته شده
کدارو این زیر میزارم
Html
کد:
<!DOCTYPE html>
<html>
<head>
<title>2048 Game</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>2048 Game</h1>
<div id="game-container">
<div id="score">Score: 0</div>
<div id="board-container"></div>
<div id="game-over-overlay">
<div id="game-over-message">Game Over!</div>
<button id="restart-button">Restart</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>Css
کد:
body {
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
margin-top: 40px;
}
#game-container {
display: inline-block;
margin-top: 40px;
}
#score {
font-size: 24px;
margin-bottom: 10px;
}
#board-container {
background-color: #bbada0;
border-radius: 5px;
padding: 10px;
margin-bottom: 20px;
width: 320px;
height: 320px;
position: relative;
}
.tile {
background-color: #cdc1b4;
border-radius: 5px;
font-size: 24px;
font-weight: bold;
width: 70px;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
}
#game-over-overlay {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1;
}
#game-over-message {
font-size: 36px;
font-weight: bold;
color: white;
margin-bottom: 20px;
}
#restart-button {
font-size: 24px;
padding: 10px 20px;
}Javascript
کد:
document.addEventListener('DOMContentLoaded', function () {
const boardSize = 4;
const board = [];
let score = 0;
let gameOver = false;
const gameContainer = document.getElementById('game-container');
const scoreElement = document.getElementById('score');
const boardContainer = document.getElementById('board-container');
const gameOverOverlay = document.getElementById('game-over-overlay');
const gameOverMessage = document.getElementById('game-over-message');
const restartButton = document.getElementById('restart-button');
// Initialize the board with zeros
function initializeBoard() {
for (let i = 0; i < boardSize; i++) {
board[i] = [];
for (let j = 0; j < boardSize; j++) {
board[i][j] = 0;
}
}
}
// Add a new tile (2 or 4) to a random empty cell
function addNewTile() {
const emptyCells = [];
// Find empty cells
for (let i = 0; i < boardSize; i++) {
for (let j = 0; j < boardSize; j++) {
if (board[i][j] === 0) {
emptyCells.push({ row: i, col: j });
}
}
}
// Choose a random empty cell
if (emptyCells.length > 0) {
const randomCell = emptyCells[Math.floor(Math.random() * emptyCells.length)];
const newValue = Math.random() < 0.9 ? 2 : 4;
board[randomCell.row][randomCell.col] = newValue;
}
}
// Update the board UI
function updateBoardUI() {
boardContainer.innerHTML = '';
for (let i = 0; i < boardSize; i++) {
for (let j = 0; j < boardSize; j++) {
const tileValue = board[i][j];
const tile = document.createElement('div');
tile.className = 'tile';
tile.innerHTML = tileValue === 0 ? '' : tileValue;
tile.style.top = (i * 80) + 'px';
tile.style.left = (j * 80) + 'px';
tile.style.backgroundColor = getTileColor(tileValue);
boardContainer.appendChild(tile);
}
}
scoreElement.textContent = 'Score: ' + score;
}
// Get the background color for a tile based onits value
function getTileColor(value) {
switch (value) {
case 2:
return '#eee4da';
case 4:
return '#ede0c8';
case 8:
return '#f2b179';
case 16:
return '#f59563';
case 32:
return '#f67c5f';
case 64:
return '#f65e3b';
case 128:
return '#edcf72';
case 256:
return '#edcc61';
case 512:
return '#edc850';
case 1024:
return '#edc53f';
case 2048:
return '#edc22e';
default:
return '#cdc1b4';
}
}
// Check if the game is over (no empty cells and no possible moves)
function checkGameOver() {
for (let i = 0; i < boardSize; i++) {
for (let j = 0; j < boardSize; j++) {
if (board[i][j] === 0) {
return false; // There is an empty cell
}
if (i > 0 && board[i][j] === board[i - 1][j]) {
return false; // There is a merge possible vertically
}
if (j > 0 && board[i][j] === board[i][j - 1]) {
return false; // There is a merge possible horizontally
}
}
}
return true; // Game over
}
// Move the tiles to the left
function moveLeft() {
let hasChanged = false;
for (let i = 0; i < boardSize; i++) {
let previousMerged = false;
for (let j = 1; j < boardSize; j++) {
if (board[i][j] !== 0) {
let k = j;
while (k > 0 && board[i][k - 1] === 0) {
board[i][k - 1] = board[i][k];
board[i][k] = 0;
k--;
hasChanged = true;
}
if (k > 0 && board[i][k - 1] === board[i][k] && !previousMerged) {
board[i][k - 1] *= 2;
board[i][k] = 0;
score += board[i][k - 1];
previousMerged = true;
hasChanged = true;
} else {
previousMerged = false;
}
}
}
}
return hasChanged;
}
// Move the tiles to the right
function moveRight() {
// Rotate the board 180 degrees, move left, and rotate back
rotateBoard(2);
const hasChanged = moveLeft();
rotateBoard(2);
return hasChanged;
}
// Move the tiles up
function moveUp() {
// Rotate the board counterclockwise, move left, and rotate clockwise
rotateBoard(3);
const hasChanged = moveLeft();
rotateBoard(1);
return hasChanged;
}
// Move the tiles down
function moveDown() {
// Rotate the board clockwise, move left, and rotate counterclockwise
rotateBoard(1);
const hasChanged = moveLeft();
rotateBoard(3);
return hasChanged;
}
// Rotate the board clockwise or counterclockwise
function rotateBoard(times) {
for (let t = 0; t < times; t++) {
const newBoard = [];
for (let i = 0; i < boardSize; i++) {
newBoard[i] = [];
for (let j = 0; j < boardSize; j++) {
newBoard[i][j] = board[boardSize - j - 1][i];
}
}
board.splice(0, boardSize, ...newBoard);
}
}
// Handle keydown events for arrow keys
function handleKeyDown(event) {
if (gameOver) {
return;
}
let hasChanged = false;
switch (event.key) {
case 'ArrowLeft':
hasChanged = moveLeft();
break;
case 'ArrowRight':
hasChanged = moveRight();
break;
case 'ArrowUp':
hasChanged = moveUp();
break;
case 'ArrowDown':
hasChanged = moveDown();
break;
default:
return;
}
if (hasChanged) {
addNewTile();
updateBoardUI();
if (checkGameOver()) {
gameOver =
![[-]](http://www.flashkhor.com/forum/images/collapse.gif "[-]")
