realtime-battle/index.html at develop · punkstar/realtime-battle · GitHub

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
109
110
111
112
113
114
115
116
117
118
119
120
121
<html>
    <head>
        <title>BATTLE!</title>

        <style type="text/css">
        #battle {
            border: 1px solid #eee;
            margin: auto;
            margin-top: 25px;
            display: block;

            background: #86C67C;

            -webkit-box-shadow: 0px 10px 10px #ddd;
            -moz-box-shadow: 0px 10px 10px #ddd;
            box-shadow: 0px 10px 10px #ddd;
        }
        </style>

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript" src="underscore.js"></script>
        <script src="/socket.io/socket.io.js"></script>
        <script type="text/javascript">
        $(function () {
            var socket = io.connect('http://localhost');
            var canvas = document.getElementById('battle');
            var context = canvas.getContext('2d');

            var colour = {
                red: 'red',
                blue: 'blue',
                green: 'green',
                white: 'white'
            }

            var addMessage = function (message) {
                $('#messages').prepend($('<li />').html(message));
                $('#messages li:nth-child(n+15)').remove();
            }

            socket.on('message', function (data) {
                addMessage(data);
            })

            var clear = function () {
                context.clearRect(0, 0, canvas.width, canvas.height);
            }

            var draw = function (players) {
                _.each(players, function (player) {
                    var size = 5;

                    if (player.dead) {
                        var team = colour.white;
                        var x = this.x;
                        var y = this.y;
                    } else {
                        var team = player.team;
                        var x = player.pos.x - size/2;
                        var y = player.pos.y - size/2;
                    }

                    context.fillStyle = colour[team];
                    context.strokeStyle = colour[team];

                    context.beginPath();
                    context.arc(x, y, size, 0, Math.PI * 2, true);
                    context.closePath();
                    context.fill();

                    context.textAlign = 'center';
                    context.textBaseline = 'top';
                    context.fillText("#" + player.id, x, y + size);
                });
            }

            socket.on('update', function (data) {
                clear();
                draw(data);
            });

            /**
             * Keyboard Interaction
             */
             var current_orientation = '';
             $('body').keydown(function (data) {
                 var up = [87, 38];
                 var down = [83, 40];
                 var right = [39, 68];
                 var left = [37, 65];

                 var key = data.which;

                 var orientation;

                 if (_.include(up, key)) {
                     orientation = 'N';
                 } else if (_.include(down, key)) {
                     orientation = 'S';
                 } else if (_.include(left, key)) {
                     orientation = 'W';
                 } else if (_.include(right, key)) {
                     orientation = 'E';
                 }

                 if (orientation) {
                     socket.emit('direction-update', orientation);
                 }
             });

             $('body').keyup(function (data) {
                 socket.emit('direction-update', '');
             });
        });
        </script>
    </head>
    <body>
        <canvas id="battle" width="800" height="600"></canvas>
        <ul id="messages"></ul>
    </body>
</html>