Permalink
Browse files

Now using html5's canvas o_o

  • Loading branch information...
1 parent 470f568 commit df0e23ef853dfdf00766132ef92d0bf6403a0f34 @cjstewart88 committed Sep 11, 2011
Showing with 46 additions and 41 deletions.
  1. +41 −32 public/javascripts/client.js
  2. +1 −7 public/stylesheets/style.css
  3. +4 −2 views/index.html
View
73 public/javascripts/client.js
@@ -1,55 +1,64 @@
(function() {
- var socket = io.connect(null);
+ var socket = io.connect(null);
- var clients = {};
+ var clients = {};
+ var realm = document.getElementById("realm");
+ var realmDimensions = [0,0];
- var myClientId;
- var myX = 0;
- var myY = 0;
+ var myClientId = 0;
+ var myX = 0;
+ var myY = 0;
socket.on('connect', function () {
- socket.on('currentClients', function (data) {
- myClientId = data.clientId;
- clients = data.clients;
- $.each(clients, function(client) {
- $('body').append('<div id="'+client+'" style="top: '+clients[client][1]+'; left: '+clients[client][0]+'"></div>');
- });
+ socket.on('init', function (data) {
+ clients = data.clients;
+ realmDimensions = [data.realmDimensions[0], data.realmDimensions[1]];
+ myClientId = data.clientId;
+
+ drawRealm();
});
- socket.on('newClient', function (data) {
- $('body').append('<div id="'+data.clientId+'" style="top: '+0+'; left: '+0+'"></div>');
- });
-
- socket.on('updateClientPosition',function (data) {
- if (!data.deleteClient) {
- clients[data.clientId] = [data.clientId, data.clientX, data.clientY];
- $('body').find('#'+data.clientId).css({ 'top': data.clientY, 'left': data.clientX });
- }
- else {
- clients[data.clientId] = null;
- $('body').find('#'+data.clientId).remove();
- }
- });
+ socket.on('drawRealm', function (data) {
+ clients = data.clients;
+ realmDimensions = [data.realmDimensions[0], data.realmDimensions[1]];
+
+ drawRealm();
+ });
});
+ function drawRealm () {
+ // clear the canvas for redrawing
+ realm.width = realm.height = 0;
+
+ // adjust the canvas aka realm to its actual live dimensions
+ realm.width = realmDimensions[0];
+ realm.height = realmDimensions[1];
+
+ // plot the currently connected clients
+ $.each(clients, function (client) {
+ var realm_context = realm.getContext('2d');
+ realm_context.fillRect(clients[client][0], clients[client][1], 16, 16);
+ });
+ }
+
$(document).ready(function () {
$(document).keydown(function (e) {
- console.log("uhhh");
- var oldX = myX;
- var oldY = myY;
+ var numOfSteps = 10;
+ var oldX = myX;
+ var oldY = myY;
switch (e.keyCode) {
case 37: // left
- if (myX-1 >= 0) { myX--; }
+ if (myX-numOfSteps >= 0) { myX -= numOfSteps; }
break;
case 39: // right
- myX++;
+ myX += numOfSteps;
break;
case 38: // up
- if (myY-1 >= 0) { myY--; }
+ if (myY-numOfSteps >= 0) { myY -= numOfSteps; }
break;
case 40: // down
- myY++;
+ myY += numOfSteps;
break;
}
View
8 public/stylesheets/style.css
@@ -1,7 +1 @@
-div {
- display: inline-block;
- width: 10px;
- height: 10px;
- border: solid 3px black;
- position: absolute;
-}
+body { margin: 0px; padding: 0px; }
View
6 views/index.html
@@ -1,11 +1,13 @@
+<!DOCTYPE html>
<html>
<head>
<title>game</title>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js' type='text/javascript'></script>
<script src='/socket.io/socket.io.js' type='text/javascript'></script>
- <script src='/javascripts/client.js' type='text/javascript'></script>
- <link href='/stylesheets/style.css' media='screen' rel='stylesheet' type='text/css'/>
+ <link href='/stylesheets/style.css' media='screen' rel='stylesheet' type='text/css'/>
</head>
<body>
+ <canvas id="realm"></canvas>
+ <script src='/javascripts/client.js' type='text/javascript'></script>
</body>
</html>

0 comments on commit df0e23e

Please sign in to comment.