بازی آنلاین
آپلود عکس
21-09-2023، 22:20
(21-09-2023، 21:44)☪爪尺.山丨几几乇尺☪ نوشته است: دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
(21-09-2023، 21:37)امیر‌حسین نوشته است: دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
ترکیب؟ برای چه کاری دقیقا؟
میخواستم گیمو بالا بیارم از ۳ زبان 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 =
جای این قطعه:
<link rel="stylesheet" type="text/css" href="style.css">
تگ باز و بسته <style> بزن و کد های css رو توش قرار بده
و بجای این قطعه:
<script src="script.js"></script> تگ باز و بسته <script> بزن و کد های جاوا رو قرار بده
بعدش کدهای html رو هرجایی میخوای نمایش داده بشه قرار بده
فقط به جایگاه کد ها دقت کن که فقط جایگذاری کنی
![[-]](http://www.flashkhor.com/forum/images/collapse.gif "[-]")
