Permalink
Browse files

add canvas

  • Loading branch information...
1 parent 09931fb commit ce99a10fc200f1299f2651f57c626abd35b477e0 @pidster pidster committed Apr 14, 2012
Showing with 55 additions and 11 deletions.
  1. +10 −6 public/css/ponk.css
  2. +39 −1 public/js/ponk.js
  3. +6 −4 public/start.html
View
@@ -1,6 +1,6 @@
div#login-window {
display: none;
- margin: 10px auto;
+ margin: 0 auto 10px;
padding: 10px;
width: 600px;
height: 200px;
@@ -9,7 +9,7 @@ div#login-window {
div#log-window {
display: none;
- margin: 10px auto;
+ margin: 0 auto 10px;
padding: 10px;
width: 600px;
height: 200px;
@@ -18,9 +18,13 @@ div#log-window {
div#game-window {
display: none;
- margin: 10px auto;
- padding: 10px;
- width: 600px;
+ margin: 0 auto 10px;
+ padding: 0px;
+ width: 620px;
height: 400px;
border: 5px solid #ccc;
-}
+}
+
+canvas#game-field {
+}
+
View
@@ -124,6 +124,9 @@ $('#signin').submit( function() {
sock.send(event('register', username));
// temp testing, for renderer
+ $('#game-window').show();
+ initGame();
+ render();
return false;
});
@@ -156,10 +159,45 @@ function stopGame() {
clearInterval(renderTimer);
}
-function render() {
+function initGame() {
//
}
+function render() {
+ // TODO find localPlayer
+ var canvas = document.getElementById('game-field'); // jquery didn't find this
+ var context = canvas.getContext('2d');
+ // field is 400 high & 600 wide
+ // context.fillRect(x, y, w, h);
+ var offset = 10;
+ var paddleWidth = 10;
+ var localH = 80;
+ var remoteH = 80;
+
+ var localX = offset;
+ var remoteX = canvas.width - (offset + paddleWidth);
+
+ var localY = canvas.height/2 - (localH/2); // temp, needs further calc
+ var remoteY = canvas.height/2 - (remoteH/2); // temp, needs further calc
+
+ context.fillStyle = '#cc9999';
+ context.fillRect(localX, localY, paddleWidth, localH);
+ context.fillStyle = '#9999cc';
+ context.fillRect(remoteX, remoteY, paddleWidth, remoteH);
+
+ context.fillStyle = '#333333';
+ context.beginPath();
+
+ // ontext.arc(x, y, r, n, Math.PI*2, true);
+ var ballX = canvas.width/2;
+ var ballY = canvas.height/2;
+ var radius = 10;
+ var other = 0;
+ context.arc(ballX, ballY, radius, other, Math.PI*2, true);
+ context.closePath();
+ context.fill();
+}
+
function log(msg) {
$('#log-window').append('<p>' + msg + '</p>');
}
View
@@ -57,7 +57,11 @@
<!-- Example row of columns -->
<div class="row">
- <div class="span10">
+ <div class="span2">
+ <h2>Menu</h2>
+ <!-- sledging tools -->
+ </div>
+ <div class="span8">
<div id="login-window">
<h2>Start a new game...</h2>
<form id="signin" method="get" action="#">
@@ -70,9 +74,7 @@ <h2>Start a new game...</h2>
</p>
</form>
</div>
- <div id="game-window">
- xxx
- </div>
+ <div id="game-window"><canvas id="game-field" width="620" height="400">Your browser is too crap to play this game</canvas></div>
<div id="log-window"></div>
<p>
&nbsp;

0 comments on commit ce99a10

Please sign in to comment.