小贝子编程

如何使用套接字使用Javascript在服务器和客户端之间发送信息



我遵循了一个在线教程来学习如何创建多人在线游戏。我使用视频中的概念来尝试构建一个棋盘游戏。

现在人们可以去网站，一个人可以掷骰子，结果会广播给同样在网站上的每个人。不同的人可以轮流掷骰子，结果总是向其他人广播。

但问题是，当一名玩家掷骰子时，所有信息都会正确共享，游戏碎片会在棋盘上移动。但当下一个玩家滚动时，所有的碎片都会重置到开头，就好像第一个玩家所做的一切都被遗忘了一样。但是，如果第一个玩家再次滚动，那个人的滚动(和游戏碎片(就会回来，第二个人所做的一切都会被遗忘。

如果你在两个浏览器中打开游戏，你将能够复制它。必须掷6才能让棋子开始移动。http://fs-ludo.herokuapp.com/

为什么会发生这种情况，我可以补充什么，以便每个玩家都能播放和记住这个机制？

谢谢你的帮助。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="gamestyle.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ludo</title>
</head>
<body>

<div>
<!--Title-->
<h1>Ludo Game</h1>

<form id="chat-form">
<!--Button-->
<button onclick="random()">ROLL</button>

<!--Dice-->
<p id='dice'></p>
</form>
<!--Token position-->
<p id="token_pos"></p>

<p id="turn"></p>

<!--Recent rolls-->
<p id="rolls"></p>
</div>

<!--Canvas. The second canvas is used to move the game pieces.-->
<div>
<canvas id="board" width="600" height="600" style="position: absolute; z-index: 0;"></canvas>

<canvas id="token" width="600" height="600" style="position: absolute; z-index: 1;"></canvas>
</div>

<script>
// Game Logic (which contains class LudoGame)
// Board (created using canvas)
var game = new LudoGame();
// Dice logic
var rolls = []
var rounds = []

function random() {
var list = ['u2680', 'u2681', 'u2682', 'u2683', 'u2684', 'u2685'];
var value = list[Math.floor(Math.random() * 6)];
document.getElementById('dice').value = value;


if (value == 'u2680'){
rolls.push(1);}
else if (value == 'u2681'){
rolls.push(2);}
else if (value == 'u2682'){
rolls.push(3);}
else if (value == 'u2683'){
rolls.push(4);}
else if (value == 'u2684'){
rolls.push(5);}
else if (value == 'u2685'){
rolls.push(6);}
var number_of_player = game.set_players = 3;


if (number_of_player === 2) {
if (rounds.length == 0){
rounds.push(['A', rolls[rolls.length - 1]]);}
else if (rounds[rounds.length - 1][1] == 6 && rounds[rounds.length - 1][0] === 'A'){
rounds.push(['A', rolls[rolls.length - 1]]);}
else if (rounds[rounds.length - 1][1] == 6 && rounds[rounds.length - 1][0] === 'B'){
rounds.push(['B', rolls[rolls.length - 1]]);}
else if (rounds[rounds.length - 1][0] == 'B') {
rounds.push(['A', rolls[rolls.length - 1]]);}
else if (rounds[rounds.length - 1][0] == 'A') {
rounds.push(['B', rolls[rolls.length - 1]]);}
}

else if (number_of_player === 3) {
if (rounds.length == 0){
rounds.push(['A', rolls[rolls.length - 1]]);}
else if (rounds[rounds.length - 1][1] == 6 && rounds[rounds.length - 1][0] === 'A'){
rounds.push(['A', rolls[rolls.length - 1]]);}
else if (rounds[rounds.length - 1][1] == 6 && rounds[rounds.length - 1][0] === 'B'){
rounds.push(['B', rolls[rolls.length - 1]]);}
else if (rounds[rounds.length - 1][1] == 6 && rounds[rounds.length - 1][0] === 'C'){
rounds.push(['C', rolls[rolls.length - 1]]);}
else if (rounds[rounds.length - 1][0] == 'A') {
rounds.push(['B', rolls[rolls.length - 1]]);}
else if (rounds[rounds.length - 1][0] == 'B') {
rounds.push(['C', rolls[rolls.length - 1]]);}
else if (rounds[rounds.length - 1][0] == 'C') {
rounds.push(['A', rolls[rolls.length - 1]]);}
}


var game_on; 
game_on = game.play_game(rounds[rounds.length - 1]);

//    Recent rolls  
if (rounds.length === 1){
document.getElementById('rolls').value = ["Latest Roll: " + rounds[rounds.length-1]];}
else if (rounds.length === 2){
document.getElementById('rolls').value = ["Latest Roll: " + rounds[rounds.length-1], " &nbsp " + rounds[rounds.length-2]];}
else if (rounds.length === 3){
document.getElementById('rolls').value = ["Latest Roll: " + rounds[rounds.length-1], " &nbsp " + rounds[rounds.length-2], " &nbsp " + rounds[rounds.length-3]];}
else if (rounds.length === 4){
document.getElementById('rolls').value = ["Latest Roll: " + rounds[rounds.length-1], " &nbsp " + rounds[rounds.length-2], " &nbsp " + rounds[rounds.length-3], " &nbsp " + rounds[rounds.length-4]];}
else {
document.getElementById('rolls').value = ["Latest Roll: " + rounds[rounds.length-1], " &nbsp " + rounds[rounds.length-2], " &nbsp " + rounds[rounds.length-3], " &nbsp " + rounds[rounds.length-4], " &nbsp " + rounds[rounds.length-5]];}


document.getElementById('turn').value = rounds[rounds.length-1];

</script>

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

client.js

const dice_result = (num2) => {
document.querySelector('#dice').innerHTML = num2;
};
const token_position = (pos) => {
document.querySelector('#token_pos').innerHTML = pos;
};
const turn = (tur) => {
if (tur === "Turn: Player A"){
document.querySelector('#turn').style.color = "orange";
document.querySelector('#turn').innerHTML = tur;}
else if (tur === "Turn: Player B"){
document.querySelector('#turn').style.color = "blue";
document.querySelector('#turn').innerHTML = tur;}
else if (tur === "Turn: Player C"){
document.querySelector('#turn').style.color = "#E37383";
document.querySelector('#turn').innerHTML = tur;}
};
const roll_result = (num3) => {
document.querySelector('#rolls').innerHTML = num3;
};
const board = (ct1, ct2, ct3, ct4, ct5, ct6, ct7, ct8, ct9, ct10) => {
const canvas2 = document.querySelector('#token');
const ctx2 = canvas2.getContext('2d');
ctx2.clearRect(0, 0, 600, 600);
ctx2.font = "20px serif";
ctx2.fillStyle = "orange";
ctx2.fillText(ct1[0], ct1[1], ct1[2]);
ctx2.fillText(ct2[0], ct2[1], ct2[2]);
if (ct5[0] === "Orange Wins!!"){
ctx2.fillText(ct5[0], ct5[1], ct5[2]);
ctx2.fillText(ct6[0], ct6[1], ct6[2]);
ctx2.fillText(ct7[0], ct7[1], ct7[2]);
ctx2.fillText(ct8[0], ct8[1], ct8[2]);}
ctx2.fillStyle = "blue";
ctx2.fillText(ct3[0], ct3[1], ct3[2]);
ctx2.fillText(ct4[0], ct4[1], ct4[2]);
if (ct5[0] === "Blue Wins!!"){
ctx2.fillText(ct5[0], ct5[1], ct5[2]);
ctx2.fillText(ct6[0], ct6[1], ct6[2]);
ctx2.fillText(ct7[0], ct7[1], ct7[2]);
ctx2.fillText(ct8[0], ct8[1], ct8[2]);}
ctx2.fillStyle = "#E37383";
ctx2.fillText(ct9[0], ct9[1], ct9[2]);
ctx2.fillText(ct10[0], ct10[1], ct10[2]);
if (ct5[0] === "Pink Wins!!"){
ctx2.fillText(ct5[0], ct5[1], ct5[2]);
ctx2.fillText(ct6[0], ct6[1], ct6[2]);
ctx2.fillText(ct7[0], ct7[1], ct7[2]);
ctx2.fillText(ct8[0], ct8[1], ct8[2]);}
};

const onClick = (sock) => (e) => {
e.preventDefault();
var number2 = document.querySelector('#dice').value;
var number = document.querySelector('#token_pos').value;
var number4 = document.querySelector('#turn').value;
var number3 = document.querySelector('#rolls').value;
sock.emit('dice_output', number2);
sock.emit('roll', number3);

if (number4[0] === 'A' && number4[1] === 6){
sock.emit('player_turn',  "Turn: Player A");}
else if (number4[0] === 'B' && number4[1] === 6){
sock.emit('player_turn',  "Turn: Player B");}  
else if (number4[0] === 'C' && number4[1] === 6){
sock.emit('player_turn',  "Turn: Player C");}  
else if (number4[0] === 'A' && number4[1] != 6){
sock.emit('player_turn', "Turn: Player B");}
else if (number4[0] === 'B' && number4[1] != 6){
sock.emit('player_turn',  "Turn: Player C");}
else if (number4[0] === 'C' && number4[1] != 6){
sock.emit('player_turn',  "Turn: Player A");}

// Here I have the logic for displaying the token in canvas2. The var are emitted  //below. Then used in the function board above. I omitted this portion because it is //long, but I can provide it if necessary. 
sock.emit('sq', ap, aq, bp, bq, win1, win2, win3, win4, cp, cq);

};

(() => {

const sock = io();

sock.on('sq', board);
sock.on('dice_output', dice_result);
sock.on('roll', roll_result);
sock.on('player_turn', turn)

document
.querySelector('#chat-form')
.addEventListener('submit', onClick(sock));

})();

server.js

const http = require('http');
const express = require('express');
const app = express();
const socketio = require('socket.io');
const port = process.env.PORT || 8080

const clientPath = '$(...dirname)/../client';

app.use(express.static(clientPath));
const server = http.createServer(app);
const io = socketio(server);
io.on('connection', (sock) =>{
sock.on('dice_output', (num2) => io.emit('dice_output', num2));
sock.on('position', (pos) => io.emit('position', pos));
sock.on('player_turn', (tur) => io.emit('player_turn', tur));
sock.on('roll', (num3) => io.emit('roll', num3));

sock.on('sq', (ct1, ct2, ct3, ct4, ct5, ct6, ct7, ct8, ct9, ct10) => io.emit('sq', ct1, ct2, ct3, ct4, ct5, ct6, ct7, ct8, ct9, ct10));

});
server.on('error', (err) =>{
console.error('Server error:', err);
});
server.listen(port, () => console.log("Working"))

计算机正在按照你的指示进行操作。

每次客户端执行一个转弯(我没有看到onClick在哪里被调用，但我认为它确实被调用了(，它都会用"sq"将板变量发送到服务器。每次服务器接收到"sq"时，都会向所有客户端发送"squ"。每次客户端收到"sq"时，它都会根据收到的变量更新屏幕上的所有内容。这就是你告诉客户端和服务器要做的

当玩家1掷骰子时，来自玩家1客户端的所有信息都会广播给每个人，并出现在每个人的屏幕上。当玩家2掷骰子时，来自玩家2客户端的所有信息都会广播给每个人，并出现在每个人的屏幕上。这是一组完全独立的信息。

如果这不是你想要的，你必须告诉电脑做你想做的事——我再具体不过了，因为我不知道你想要什么。

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium