Пишу свою игру

@enzo32 · Регистрация: 19.02.2016

Студворк — интернет-сервис помощи студентам

Здравствуйте! Помогите, плз.
Делаю(тренируюсь, просто для себя) игру. На данный момент застрял на таком этапе. Есть игровое поле, выводятся две картинки. Первая моя, вторая моего соперника. Все данные формируются на сервере(написан на Nodejs), и принимаю по Websocket.
Вопрос: как написать что бы на моей странице моя картинка была слева, а противника справа. У противника тоже его картинка справа, а моя слева.
P.S. Писать красиво не умею, так что сильно не ругайте. Задавайте вопросы, попробую ответить.
server.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
var WebSocketServer = require('ws').Server,
        wss = new WebSocketServer({port: 3771});
var players = {};
var i = 0;
wss.on('connection', function connection(ws) {
    i++;
    k++;
    var id = Math.random();
    players[id] = {
        pl:i,
        playerid: id,
        img: `img/AT_10${k}.png`,
        life: 100
        
    };
    console.log("players",players);
        ws.on('message', function incoming(message) {
            
            console.log("message",message);
            if (message <= '1') {
                var id = JSON.parse(message);
                var pl = players[id];
                pl.life -= 5;
                console.log("pl",pl);
                ws.send(JSON.stringify(players));   
            }else {
                setInterval(function() {
                ws.send(JSON.stringify(players));
                }, 100000 / 60);
            }
        });
});

js.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
$(document).ready(function(){
    //window.addEventListener("load", wsApp.init, false);
   
       //console.log("init");
       wsApp.init(); 
    //var img = 'img/AT_104.png';
    $('#udarplayer1').click(function(){
        //console.log('wsApp',wsApp);
        var id = $('#playerId2')[0].textContent;
        console.log("id", id);
        wsApp.send(id);
    });
    $('#udarplayer2').click(function(){
        var id = $('#playerId1')[0].textContent;
        console.log("id", id);
        wsApp.send(id);
    });
    
});
 
var wsApp = (function(){
 
    var wsApp = {};
 
    var wsUri = "ws://localhost:3771/";
    var outputEl;
    
    var websocket;
 
    wsApp.init = function() {
        outputEl = $('#output');
        testWebSocket();
    };
    wsApp.send = function(num){
        console.log('num', num);
        doSend(num);
    };
    function testWebSocket(){
        websocket = new WebSocket(wsUri);
        websocket.onopen = onOpen;
        websocket.onclose = onClose;
        websocket.onmessage = onMessage;
        websocket.onerror = onError;
    }
    
    function onOpen(evt){
        //console.log("evt", evt);
        //var ff = [{'player':'player1','img':'img/AT_104.png', 'life':40},{'player':'player2','img':'img/AT_117.png','life':50}];
        //writeToScreen("CONNECTED");
        doSend(3);
    }
 
    function onClose(evt){
        //writeToScreen("DISCONNECTED");
    }
 
    function onMessage(evt){
        var data = JSON.parse(evt.data);
      
            for(var id in data){
                var player = data[id];
                if(data.num == '1'){
                    builder(player);
                }
               if(data.num == '2'){
                    builder2(player);
                }
           
                build(player);
            }
       
 
    }
 
    function onError(evt){
        //writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);
    }
 
    function doSend(message){
        //writeToScreen("SENT: " + message);
        websocket.send(JSON.stringify(message));
    }
 
    function build(data){
        $(`#imf`)[0].src = `${data.img}`;
        $(`#playerId${data.pl}`)[0].textContent = `${data.playerid}`;
        $(`#pl${data.pl}`)[0].textContent = `${data.life}`;
    }
    function builder(data){
        var button = ('<button/>',{
            id:`udarplayer1`
        }).appendTo('#players2');
        var img = ('<img/>',{
            src:data.img
        }).appendTo('#players2');
    }
    function builder2(data){
                var button = ('<button/>',{
            id:`udarplayer1`
        }).appendTo('#players1');
        var img = ('<img/>',{
            src:data.img
        }).appendTo('#players1');
    }
 
    return wsApp;
 
})();

html

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" >
    <title>Websockets with node.js</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script type="text/javascript" src="chat.js"></script>
</head>
<body>
    <div id="pole">
        <div id="players1">
            
        </div>        
        <div id="players2">
            
        </div>
    </div>
    <button id="udarplayer1">udar1</button>
    <div id="pole1">
        <label id="playerId1"></label>
        <img id="pla1" src="">
        <label id="pl1"></label>
    </div>
    <div id="pole2">
        <label id="playerId2"></label>
        <img id="pla2" src="">
        <label id="pl2"></label>
    </div>
    <div id="player1"><!--
        
    </div>-->
    
<!--    <div id="player2">
        
    </div>-->
    <button id="udarplayer2">udar2</button>
    
</body>
</html>

@MrOnlineCoder · 24.11.2018, 21:50

Сообщение от enzo32

Вопрос: как написать что бы на моей странице моя картинка была слева, а противника справа. У противника тоже его картинка справа, а моя слева.

Сервер должен каждому игроку отправить некий флаг, чтобы клиент знал, какую картинку ему показывать как врага.

В чем именно трудность? Картинки не показываются, данные не отправляются, ...?

@enzo32 · 25.11.2018, 00:39 **[ТС]**

Добавлено через 1 час 27 минут

Сообщение от MrOnlineCoder

Сервер должен каждому игроку отправить некий флаг, чтобы клиент знал, какую картинку ему показывать как врага.

В чем именно трудность? Картинки не показываются, данные не отправляются, ...?

В том то и вопрос, я не зная как это сделать

Новые блоги и статьи Все статьи Все блоги /
Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .	Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и напряжениями. Надо найти токи в ветвях. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и решает её. Последовательность действий:. . .
Новый CodeBlocs. Версия 25.03 palva 04.01.2026 Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .	Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .