[英]How to use socket to send information between server and client using Javascript?
我按照在線教程學習了如何創建多人在線游戲。 我使用視頻中的概念嘗試構建棋盤游戲。
現在人們可以撥打 go 到網站，一個人可以擲骰子，結果會廣播給也在網站上的每個人。 不同的人可以輪流擲骰子，結果總是廣播給其他人。
但問題是當一個玩家擲骰子時，所有信息都被正確共享，並且游戲棋子在棋盤上移動。 但是當下一個玩家擲骰子時，所有的棋子都會重置到開始的位置，就好像前一個玩家所做的一切都被遺忘了。 但如果第一位玩家再次擲骰，則該人的擲骰（和棋子）又回來了，而第二個人所做的一切都被遺忘了。
如果您在兩個瀏覽器中打開游戲，您將能夠復制它。 必須擲出 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], "   " + rounds[rounds.length-2]];}
else if (rounds.length === 3){
document.getElementById('rolls').value = ["Latest Roll: " + rounds[rounds.length-1], "   " + rounds[rounds.length-2], "   " + rounds[rounds.length-3]];}
else if (rounds.length === 4){
document.getElementById('rolls').value = ["Latest Roll: " + rounds[rounds.length-1], "   " + rounds[rounds.length-2], "   " + rounds[rounds.length-3], "   " + rounds[rounds.length-4]];}
else {
document.getElementById('rolls').value = ["Latest Roll: " + rounds[rounds.length-1], "   " + rounds[rounds.length-2], "   " + rounds[rounds.length-3], "   " + rounds[rounds.length-4], "   " + 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>
客戶端.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));
})();
服務器.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”時，它都會向所有客戶端發送“sq”。 每次客戶端收到“sq”時，它都會根據收到的變量更新屏幕上的所有內容。 這就是您告訴客戶端和服務器要做的事情。
當玩家 1 擲骰子時，玩家 1 客戶端的所有信息都會廣播給所有人，並出現在每個人的屏幕上。 當玩家 2 擲骰子時，玩家 2 客戶端的所有信息都會廣播給所有人，並出現在每個人的屏幕上。 這是一組完全獨立的信息。
如果這不是你想要的，你必須告訴計算機做你想做的事——我不能說得更具體，因為我不知道你想要什么。
如何在Java服務器和JavaScript客戶端之間使用套接字通信？
[英]How can i use socket communication between java server and javascript client?
如何使用 Java / Javascript 通過 Web Socket 將圖像從服務器發送到客戶端？
[英]How to send an image from server to client with Web Socket using Java / Javascript?
客戶端上的Java服務器與Javascript之間的套接字通信
[英]Socket Communication between Java server on client and Javascript
如何在meteor中的服務器端套接字和html/javascript中的客戶端套接字之間建立連接
[英]How to establish connection between server side socket in meteor and client side socket in html/javascript
我在react-native中使用socket.io在客戶端和服務器之間發送消息不是很好
[英]send a message between client and server is not fine i using socket.io in react-native
Parse SDK for javascript 如何發送 ping 到解析服務器以驗證 Web 客戶端和服務器之間的連接
[英]Parse SDK for javascript how to send ping to parse server to verify connection between web client and server
如何使用javascript作為客戶端和python作為web服務器在websocets之間進行通信
[英]How to communicate between websocets using javascript as client and python as web server
如何使用 AJAX 和 Flask 在 python 服務器和 javascript 客戶端之間進行通信？
[英]How to communicate between python server and javascript client using AJAX and Flask?
如何使用 tcp 套接字將圖像從 [python 客戶端] 發送到 [node.js 服務器]？
[英]How to send image from [python client] to [node.js server] using tcp socket?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.