零起点搭建一个在线斗地主网站（上篇）

前端

2023-10-30 10:52:24

在线斗地主：用代码实现宅家娱乐

在繁忙喧嚣的都市生活中，寻找一种既轻松有趣又能够消遣时光的娱乐方式至关重要。对于深圳的程序猿朋友来说，宅家斗地主成为了他们的首选消遣。然而，当意外发生，扑克牌不全时，灵机一动的程序猿朋友们决定撸一个在线斗地主网站来代替实体牌。

开发准备

确定开发环境

首先，我们需要选择合适的开发环境。对于在线斗地主网站的开发，推荐使用Visual Studio Code或Sublime Text等代码编辑器，以及Node.js和Express.js等开发工具。

安装Node.js和Express.js

按照官方文档在你的电脑上安装Node.js和Express.js。

创建项目文件夹

在你的电脑上创建一个文件夹，并将它命名为"doudizhu"。

初始化项目

在"doudizhu"文件夹中打开终端，运行以下命令：

npm init -y

这将创建一个新的项目，并生成一个名为"package.json"的文件。

安装依赖项

在终端中运行以下命令来安装必要的依赖项：

npm install express socket.io

这将安装Express.js和Socket.IO库。

创建服务器

在"doudizhu"文件夹中创建一个名为"server.js"的文件，并添加以下代码：

const express = require('express');
const socketIO = require('socket.io');

const app = express();

app.use(express.static('public'));

const server = app.listen(3000, () => {
  console.log('Server is listening on port 3000');
});

const io = socketIO(server);

io.on('connection', (socket) => {
  console.log('A client has connected');

  socket.on('disconnect', () => {
    console.log('A client has disconnected');
  });
});

这将创建一个简单的Express.js服务器，并在端口3000上侦听连接。

前端布局

创建HTML文件

在"doudizhu"文件夹中创建一个名为"index.html"的文件，并添加以下代码：

<!DOCTYPE html>
<html>
<head>
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="game-container">
    <div id="players-container">
      <div class="player">
        <div class="player-name">玩家1</div>
        <div class="player-hand"></div>
      </div>
      <div class="player">
        <div class="player-name">玩家2</div>
        <div class="player-hand"></div>
      </div>
      <div class="player">
        <div class="player-name">玩家3</div>
        <div class="player-hand"></div>
      </div>
    </div>
    <div id="game-board">
      <div class="card-stack"></div>
      <div class="discard-pile"></div>
    </div>
    <div id="controls-container">
      <button id="deal-button">发牌</button>
      <button id="play-button">出牌</button>
    </div>
  </div>

  <script src="socket.io.js"></script>
  <script src="script.js"></script>
</body>
</html>

创建CSS文件

在"doudizhu"文件夹中创建一个名为"style.css"的文件，并添加以下代码：

body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}

#game-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

#players-container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  height: 70vh;
}

.player {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  margin: 10px;
  border: 1px solid black;
}

.player-name {
  font-size: 16px;
  margin-bottom: 10px;
}

.player-hand {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

#game-board {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 20vh;
}

.card-stack {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  margin: 10px;
  border: 1px solid black;
}

.discard-pile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  margin: 10px;
  border: 1px solid black;
}

#controls-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 10vh;
}

button {
  margin: 10px;
  padding: 5px;
  font-size: 16px;
  cursor: pointer;
}

创建JavaScript文件

在"doudizhu"文件夹中创建一个名为"script.js"的文件，并添加以下代码：

const socket = io();

const players = [];
const cards = [];
const gameBoard = document.getElementById('game-board');
const cardStack = document.querySelector('.card-stack');
const discardPile = document.querySelector('.discard-pile');

socket.on('connect', () => {
  console.log('Connected to the server');

  socket.on('dealCards', (data) => {
    players = data.players;
    cards = data.cards;

    updateGameBoard();
  });

  socket.on('playCard', (data) => {
    const player = players.find((player) => player.id === data.playerId);
    const card = cards.find((card) => card.id === data.cardId);

    player.hand.splice(player.hand.indexOf(card), 1);
    discardPile.appendChild(card);

    updateGameBoard();
  });
});

function updateGameBoard() {
  players.forEach((player) => {
    const playerElement = document.querySelector(`.player[data-id="${player.id}"]`);
    const playerHandElement = playerElement.querySelector('.player-hand');

    playerHandElement.innerHTML = '';

    player.hand.forEach((card) => {
      const cardElement = createCardElement(card);
      playerHandElement.appendChild(cardElement);
    });
  });

  cardStack.innerHTML = '';

  cards.forEach((card) => {
    if (!card.played) {
      const cardElement = createCardElement(card);
      cardStack.appendChild(cardElement);
    }
  });
}

function createCardElement(card) {
  const cardElement = document.createElement('div');
  cardElement.classList.add('card');
  cardElement.setAttribute('data-id', card.id);

  const cardFaceElement = document.createElement('div');
  cardFaceElement.classList.add('card-face');
  cardFaceElement.innerHTML = card.value;

  const cardBackElement = document.createElement('div');
  cardBackElement.classList.add('card-back');

  cardElement.appendChild(cardFaceElement);
  cardElement.appendChild(cardBackElement);

  return cardElement;
}

document.getElementById('deal-button').addEventListener('click', () => {
  socket】写一篇相关的博客，写作要求：100%独特、SEO优化的文章，包含子标题，并覆盖提示中提供的主题。请用自己的话来写文章，而不是从其他来源复制和粘贴。在创建