game01 - index.html

<!doctype html>
<html>

<head>
    <title>Hour Game</title>
    <script src="jquery.js"></script>
</head>

<body>
    <canvas id="myCanvas" width="900" height="400" style="border:1px solid #000000;"></canvas>
    <script src="/socket.io/socket.io.js"></script>
    <script>
        var socket = io();
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        ctx.font = "15px Arial";
        //ctx.fillStyle = "#FF0000";
        //ctx.fillRect(0, 0, 150, 75);

        var havename = false;
        var uname = prompt("username:");
        while(!havename){
            if(uname !== ""){
                socket.emit("adduser", uname);
                havename = true;
                break;
            }
            uname = prompt("username:");
        }

        $(document).on("keydown", function(e){
            //kiri
            if(e.which == 37){
                socket.emit("start_move", "left");
            }
            //atas
            if(e.which == 38){
                socket.emit("start_move", "up");
            }
            //kanan
            if(e.which == 39){
                socket.emit("start_move", "right");
            }
            //bawah
            if(e.which == 40){
                socket.emit("start_move", "down");
            }
        });

        $(document).on("keyup", function(e){
            //kiri
            if(e.which == 37){
                socket.emit("stop_move", "left");
            }
            //atas
            if(e.which == 38){
                socket.emit("stop_move", "up");
            }
            //kanan
            if(e.which == 39){
                socket.emit("stop_move", "right");
            }
            //bawah
            if(e.which == 40){
                socket.emit("stop_move", "down");
            }
        });

        socket.on("update_users", function(data){
            ctx.clearRect(0, 0, 900, 400);
            for(var i = 0; i < data.length; i++){
                if(data[i] !== null){
                    ctx.fillStyle = "#FF0000";
                    ctx.fillRect(data[i].x, data[i].y, 50, 50);
                    ctx.fillText(data[i].name, data[i].x, data[i].y);
                }
            }
        });

    </script>
</body>

</html>