用javascript和css写2048游戏
时间: 2024-03-05 20:52:37 浏览: 128
以下是用JavaScript和CSS写的简单2048游戏的代码,可以在浏览器中运行:
HTML:
```html
<!DOCTYPE html>
<html>
<head>
<title>2048</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<div id="header">
<h1>2048</h1>
<div id="score">Score: 0</div>
</div>
<div id="gameboard"></div>
<button id="newgame">New Game</button>
<div id="endgame"></div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
```
CSS:
```css
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #faf8ef;
}
#container {
margin: 0 auto;
width: 500px;
height: 600px;
background-color: #bbada0;
border-radius: 10px;
overflow: hidden;
}
#header {
padding: 20px;
background-color: #8f7a66;
color: #f9f6f2;
text-align: center;
}
#score {
font-size: 24px;
margin-top: 10px;
}
#gameboard {
margin: 20px;
width: 460px;
height: 460px;
background-color: #cdc1b4;
border-radius: 10px;
position: relative;
}
.tile {
position: absolute;
width: 100px;
height: 100px;
border-radius: 5px;
font-size: 48px;
font-weight: bold;
text-align: center;
line-height: 100px;
}
.tile-2 {
background-color: #eee4da;
color: #776e65;
}
.tile-4 {
background-color: #ede0c8;
color: #776e65;
}
.tile-8 {
background-color: #f2b179;
color: #f9f6f2;
}
.tile-16 {
background-color: #f59563;
color: #f9f6f2;
}
.tile-32 {
background-color: #f67c5f;
color: #f9f6f2;
}
.tile-64 {
background-color: #f65e3b;
color: #f9f6f2;
}
.tile-128 {
background-color: #edcf72;
color: #f9f6f2;
}
.tile-256 {
background-color: #edcc61;
color: #f9f6f2;
}
.tile-512 {
background-color: #edc850;
color: #f9f6f2;
}
.tile-1024 {
background-color: #edc53f;
color: #f9f6f2;
}
.tile-2048 {
background-color: #edc22e;
color: #f9f6f2;
}
#newgame {
display: block;
margin: 20px auto;
padding: 10px 20px;
background-color: #8f7a66;
border: none;
border-radius: 5px;
color: #f9f6f2;
font-size: 20px;
cursor: pointer;
}
#endgame {
display: none;
position: absolute;
width: 460px;
height: 460px;
border-radius: 10px;
background-color: rgba(238, 228, 218, 0.73);
text-align: center;
line-height: 460px;
font-size: 48px;
font-weight: bold;
color: #776e65;
}
```
JavaScript:
```javascript
var score = 0;
var gameboard = [];
var gameover = false;
// 创建一个空的4x4方格
function createGrid() {
for (var i = 0; i < 4; i++) {
gameboard[i] = [];
for (var j = 0; j < 4; j++) {
gameboard[i][j] = 0;
}
}
}
// 在空的方格中随机放置一个2或4
function addNewTile() {
var row = Math.floor(Math.random() * 4);
var col = Math.floor(Math.random() * 4);
while (gameboard[row][col] !== 0) {
row = Math.floor(Math.random() * 4);
col = Math.floor(Math.random() * 4);
}
gameboard[row][col] = Math.random() < 0.5 ? 2 : 4;
}
// 更新分数
function updateScore() {
document.getElementById("score").innerHTML = "Score: " + score;
}
// 显示方格
function showGrid() {
for (var i = 0; i < 4; i++) {
for (var j = 0; j < 4; j++) {
var tile = document.createElement("div");
tile.className = "tile tile-" + gameboard[i][j];
tile.style.top = (i * 120 + 20) + "px";
tile.style.left = (j * 120 + 20) + "px";
tile.innerHTML = gameboard[i][j] !== 0 ? gameboard[i][j] : "";
document.getElementById("gameboard").appendChild(tile);
}
}
}
// 清除方格
function clearGrid() {
var tiles = document.getElementsByClassName("tile");
while (tiles.length > 0) {
tiles[0].parentNode.removeChild(tiles[0]);
}
}
// 判断方格是否可以移动
function canMove() {
for (var i = 0; i < 4; i++) {
for (var j = 0; j < 4; j++) {
if (gameboard[i][j] === 0) {
return true;
} else if (j > 0 && gameboard[i][j] === gameboard[i][j-1]) {
return true;
} else if (i > 0 && gameboard[i][j] === gameboard[i-1][j]) {
return true;
}
}
}
return false;
}
// 判断方格是否胜利
function isWin() {
for (var i = 0; i < 4; i++) {
for (var j = 0; j < 4; j++) {
if (gameboard[i][j] === 2048) {
return true;
}
}
}
return false;
}
// 滑动方格
function slideLeft() {
var moved = false;
for (var i = 0; i < 4; i++) {
for (var j = 0; j < 3; j++) {
if (gameboard[i][j] !== 0) {
for (var k = j+1; k < 4; k++) {
if (gameboard[i][k] !== 0) {
if (gameboard[i][j] === gameboard[i][k]) {
gameboard[i][j] *= 2;
score += gameboard[i][j];
gameboard[i][k] = 0;
moved = true;
}
break;
}
}
}
}
var row = [];
for (var j = 0; j < 4; j++) {
if (gameboard[i][j] !== 0) {
row.push(gameboard[i][j]);
}
}
while (row.length < 4) {
row.push(0);
}
for (var j = 0; j < 4; j++) {
if (gameboard[i][j] !== row[j]) {
moved = true;
}
gameboard[i][j] = row[j];
}
}
return moved;
}
// 主函数
function main() {
createGrid();
addNewTile();
addNewTile();
updateScore();
showGrid();
document.addEventListener("keydown", function(event) {
if (!gameover) {
switch (event.keyCode) {
case 37: // 左箭头
if (slideLeft()) {
clearGrid();
showGrid();
addNewTile();
updateScore();
if (isWin()) {
document.getElementById("endgame").innerHTML = "You win!";
document.getElementById("endgame").style.display = "block";
gameover = true;
} else if (!canMove()) {
document.getElementById("endgame").innerHTML = "Game over!";
document.getElementById("endgame").style.display = "block";
gameover = true;
}
}
break;
case 38: // 上箭头
gameboard = rotateLeft(gameboard);
gameboard = rotateLeft(gameboard);
gameboard = rotateLeft(gameboard);
if (slideLeft()) {
gameboard = rotateRight(gameboard);
clearGrid();
showGrid();
addNewTile();
updateScore();
if (isWin()) {
document.getElementById("endgame").innerHTML = "You win!";
document.getElementById("endgame").style.display = "block";
gameover = true;
} else if (!canMove()) {
document.getElementById("endgame").innerHTML = "Game over!";
document.getElementById("endgame").style.display = "block";
gameover = true;
}
} else {
gameboard = rotateRight(gameboard);
}
break;
case 39: // 右箭头
gameboard = flipGrid(gameboard);
if (slideLeft()) {
gameboard = flipGrid(gameboard);
clearGrid();
showGrid();
addNewTile();
updateScore();
if (isWin()) {
document.getElementById("endgame").innerHTML = "You win!";
document.getElementById("endgame").style.display = "block";
gameover = true;
} else if (!canMove()) {
document.getElementById("endgame").innerHTML = "Game over!";
document.getElementById("endgame").style.display = "block";
gameover = true;
}
} else {
gameboard = flipGrid(gameboard);
}
break;
case 40: // 下箭头
gameboard = rotateRight(gameboard);
if (slideLeft()) {
gameboard = rotateLeft(gameboard);
clearGrid();
showGrid();
addNewTile();
updateScore();
if (isWin()) {
document.getElementById("endgame").innerHTML = "You win!";
document.getElementById("endgame").style.display = "block";
gameover = true;
} else if (!canMove()) {
document.getElementById("endgame").innerHTML = "Game over!";
document.getElementById("endgame").style.display = "block";
gameover = true;
}
} else {
gameboard = rotateLeft(gameboard);
}
break;
default:
break;
}
}
});
document.getElementById("newgame").addEventListener("click", function() {
gameover = false;
gameboard = [];
createGrid();
addNewTile();
addNewTile();
score = 0;
updateScore();
clearGrid();
showGrid();
document.getElementById("endgame").style.display = "none";
});
}
main();
```
此代码实现了方格的滑动、合并、更新分数、判断胜利和失败等基本逻辑,您可以根据需要进行修改和扩展。
阅读全文