Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Comparing changes

Choose two branches to see what's changed or to start a new pull request. If you need to, you can also compare across forks.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also compare across forks.
base fork: squaremo/ponk
base: 8035489d9a
...
head fork: squaremo/ponk
compare: ebabeff584
Checking mergeability… Don't worry, you can still create the pull request.
  • 4 commits
  • 2 files changed
  • 0 commit comments
  • 1 contributor
Showing with 47 additions and 34 deletions.
  1. +5 −3 public/index.html
  2. +42 −31 public/js/ponk.js
View
8 public/index.html
@@ -44,6 +44,8 @@
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="index.html">Home</a></li>
+ <li><a href="#about">About</a></li>
+ <li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
@@ -76,9 +78,9 @@
</form>
</div>
<div id="game-window">
- <h2 class="center">
- <span id="localUserName">$localUser</span> vs <span id="remoteUserName">$remoteUser</span>
- </h2>
+ <h2 class="center" id="versus">
+ Waiting for challenger ...
+ </h2>
<div id="flash"></div> <!-- NB you can write text into the canvas -->
<div id="game-frame">
<canvas id="game-field" width="620" height="400">Your browser is too crap to play this game</canvas>
View
73 public/js/ponk.js
@@ -6,8 +6,8 @@ var KEYBOARD_P = 112;
var KEYBOARD_L = 108;
function State() {
- this.p1 = new Position();
- this.p2 = new Position();
+ this.opponent = new Position();
+ this.player = new Position();
this.ball = new Ball();
this.canvas = null;
}
@@ -57,6 +57,7 @@ Position.prototype.move = function(delta) {
// when approaching the edge
// log("position " + this.y + " delta: " + delta);
+ this.dirty = true;
var y_min = 0 - 160;
var y_max = 160;
var y_new = this.y + delta;
@@ -71,15 +72,24 @@ function handleRegister(payload) {
}
function handleStart(payload) {
- console.log('start');
-
- // temp testing, for renderer
- $('#game-window').show();
- // TODO show opponent
- initGame();
- startGame();
-
- flash("Game on!");
+ console.log('start');
+
+ game.opponent.name = payload.name;
+ $('#versus').empty();
+ $('#versus')
+ .append(
+ $('<span/>').addClass('remotePlayer').text(game.opponent.name))
+ .append(' vs ')
+ .append(
+ $('<span/>').addClass('localPlayer').text(game.player.name));
+
+ // temp testing, for renderer
+ $('#game-window').show();
+ // TODO show opponent
+ initGame();
+ startGame();
+
+ flash("Game on!");
}
// NB you can write text into the canvas
@@ -115,7 +125,7 @@ function handlePos(payload) {
log("received NaN: " + payload);
}
else {
- game.p2.move(payload);
+ game.opponent.move(payload);
}
}
@@ -153,8 +163,6 @@ function die(event) {
// 2 secs to cover 640x480 at 10f/s. So, to an approximation,
// |velocity| should translate to 640 / 20 = 32.
-var FPS = 10;
-var msperframe = 1000 / 10;
var game = new State();
@@ -214,11 +222,11 @@ $('#signin').submit( function() {
$('#log-window').show();
log("Sending username...");
- sock.send(event('register', username));
+ sock.send(event('register', username));
// temp testing, for renderer
$('#game-window').show();
- initGame();
+ initGame(username);
startGame();
return false;
@@ -234,17 +242,17 @@ function startGame() {
$(document).keypress( function(event) {
log("key: " + event.which);
switch (event.which) {
- case KEYBOARD_Q:
- game.p1.move(0 - 30);
- break;
- case KEYBOARD_A:
- game.p1.move(30);
- break;
+ // case KEYBOARD_Q:
+ // game.opponent.move(0 - 30);
+ // break;
+ // case KEYBOARD_A:
+ // game.opponent.move(30);
+ // break;
case KEYBOARD_P:
- game.p2.move(0 - 30);
+ game.player.move(0 - 30);
break;
case KEYBOARD_L:
- game.p2.move(30);
+ game.player.move(30);
break;
}
});
@@ -269,15 +277,18 @@ function stopGame() {
// TODO stop key listener
}
-function initGame() {
+function initGame(playerName) {
game = new State();
- log("Initialising game...");
- game.canvas = document.getElementById('game-field'); // jquery didn't find this
+ game.player.name = playerName;
+ log("Initialising game...");
+ game.canvas = document.getElementById('game-field'); // jquery didn't find this
}
// field is 400 high & 600 wide
function render() {
game.tick();
+ if (game.player.dirty) sock.send(event('pos', game.player.y));
+ game.player.dirty = false;
// TODO find localPlayer
// 3var canvas = document.getElementById('game-field'); // jquery didn't find this
var context = game.canvas.getContext('2d');
@@ -289,11 +300,11 @@ function render() {
var offset1 = 10;
var offset2 = game.canvas.width - (offset1 * 2);
- var y1 = ((game.canvas.height - game.p1.h) / 2) + game.p1.y;
- var y2 = ((game.canvas.height - game.p2.h) / 2) + game.p2.y;
+ var y1 = ((game.canvas.height - game.opponent.h) / 2) + game.opponent.y;
+ var y2 = ((game.canvas.height - game.player.h) / 2) + game.player.y;
- renderPaddle(context, '#cc9999', offset1, y1, game.p1.h);
- renderPaddle(context, '#9999cc', offset2, y2, game.p2.h);
+ renderPaddle(context, '#cc9999', offset1, y1, game.opponent.h);
+ renderPaddle(context, '#9999cc', offset2, y2, game.player.h);
renderBall(context);
}

No commit comments for this range

Something went wrong with that request. Please try again.