Skip to content

Instantly share code, notes, and snippets.

@connerbrooks

connerbrooks/glass.html

Created April 6, 2014 08:18
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save connerbrooks/10003002 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save connerbrooks/10003002 to your computer and use it in GitHub Desktop.
Download ZIP
[wearscript] glass-pong
Raw
glass.html
<html style="width:100%; height:100%; overflow:hidden">
<head>
<!-- You can include external scripts here like so... -->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.0/zepto.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>-->
</head>
<body style="width:100%; height:100%; overflow:hidden; margin:0">
<canvas id="canvas" width="640" height="360" style="display:block; background-color:black;"></canvas>
<script>
function Game() {
var canvas = document.getElementById("canvas");
//canvas = document.getElementById('canvas').getContext("2d");
this.width = canvas.width;
this.height = canvas.height;
this.context = canvas.getContext("2d");
this.context.fillStyle = "white";
this.keys = new KeyListener();
this.p1 = new Paddle(5, 0);
this.p1.y = this.height/2 - this.p1.height/2;
this.display1 = new Display(this.width/4, 25);
this.p2 = new Paddle(this.width - 5 - 2, 0);
this.p2.y = this.height/2 - this.p2.height/2;
this.display2 = new Display(this.width*3/4, 25);
this.ball = new Ball();
this.ball.x = this.width/2;
this.ball.y = this.height/2;
this.ball.vy = Math.floor(Math.random()*12 - 6);
this.ball.vx = 7 - Math.abs(this.ball.vy);
}
Game.prototype.draw = function()
{
this.context.clearRect(0, 0, this.width, this.height);
this.context.fillRect(this.width/2, 0, 2, this.height);
this.ball.draw(this.context);
this.p1.draw(this.context);
this.p2.draw(this.context);
this.display1.draw(this.context);
this.display2.draw(this.context);
};
Game.prototype.update = function()
{
if (this.paused)
return;
this.ball.update();
this.display1.value = this.p1.score;
this.display2.value = this.p2.score;
// To which Y direction the paddle is moving
if (this.keys.isPressed(83)) { // DOWN
this.p1.y = Math.min(this.height - this.p1.height, this.p1.y + 4);
} else if (this.keys.isPressed(87)) { // UP
this.p1.y = Math.max(0, this.p1.y - 4);
}
var that = this
WS.gestureCallback('onScroll', function (v, v2, v3) {
WS.log('onScroll: ' + v + ', ' + v2 + ', ' + v3);
if(v2 < 0) {
that.p1.y = Math.min(that.height - that.p1.height, that.p1.y + v2);
}
else {
that.p1.y = Math.max(0, that.p1.y + v2);
}
});
/*
WS.subscribe("gesture:pebble:singleClick:UP", function () {
//WS.control('SWIPE_LEFT');
WS.log('up');
that.p1.y = Math.max(0, that.p1.y - 4);
});
WS.subscribe("gesture:pebble:singleClick:DOWN", function () {
ws.log('down')
//WS.control('SWIPE_RIGHT');
that.p1.y = Math.min(that.height - that.p1.height, that.p1.y + 4);
});
*/
if (this.keys.isPressed(40)) { // DOWN
this.p2.y = Math.min(this.height - this.p2.height, this.p2.y + 4);
} else if (this.keys.isPressed(38)) { // UP
this.p2.y = Math.max(0, this.p2.y - 4);
}
if (this.ball.vx > 0) {
if (this.p2.x <= this.ball.x + this.ball.width &&
this.p2.x > this.ball.x - this.ball.vx + this.ball.width) {
var collisionDiff = this.ball.x + this.ball.width - this.p2.x;
var k = collisionDiff/this.ball.vx;
var y = this.ball.vy*k + (this.ball.y - this.ball.vy);
if (y >= this.p2.y && y + this.ball.height <= this.p2.y + this.p2.height) {
// collides with right paddle
this.ball.x = this.p2.x - this.ball.width;
this.ball.y = Math.floor(this.ball.y - this.ball.vy + this.ball.vy*k);
this.ball.vx = -this.ball.vx;
}
}
} else {
if (this.p1.x + this.p1.width >= this.ball.x) {
var collisionDiff = this.p1.x + this.p1.width - this.ball.x;
var k = collisionDiff/-this.ball.vx;
var y = this.ball.vy*k + (this.ball.y - this.ball.vy);
if (y >= this.p1.y && y + this.ball.height <= this.p1.y + this.p1.height) {
// collides with the left paddle
this.ball.x = this.p1.x + this.p1.width;
this.ball.y = Math.floor(this.ball.y - this.ball.vy + this.ball.vy*k);
this.ball.vx = -this.ball.vx;
}
}
}
// Top and bottom collision
if ((this.ball.vy < 0 && this.ball.y < 0) ||
(this.ball.vy > 0 && this.ball.y + this.ball.height > this.height)) {
this.ball.vy = -this.ball.vy;
}
if (this.ball.x >= this.width)
this.score(this.p1);
else if (this.ball.x + this.ball.width <= 0)
this.score(this.p2);
};
Game.prototype.score = function(p)
{
// player scores
p.score++;
var player = p == this.p1 ? 0 : 1;
// set ball position
this.ball.x = this.width/2;
this.ball.y = p.y + p.height/2;
// set ball velocity
this.ball.vy = Math.floor(Math.random()*12 - 6);
this.ball.vx = 7 - Math.abs(this.ball.vy);
if (player == 1)
this.ball.vx *= -1;
};
// PADDLE
function Paddle(x,y) {
this.x = x;
this.y = y;
this.width = 2;
this.height = 28;
this.score = 0;
}
Paddle.prototype.draw = function(p)
{
p.fillRect(this.x, this.y, this.width, this.height);
};
// BALL
function Ball() {
this.x = 0;
this.y = 0;
this.vx = 0;
this.vy = 0;
this.width = 4;
this.height = 4;
}
Ball.prototype.update = function()
{
this.x += this.vx;
this.y += this.vy;
};
Ball.prototype.draw = function(p)
{
p.fillRect(this.x, this.y, this.width, this.height);
};
//DISPLAY
function Display(x, y) {
this.x = x;
this.y = y;
this.value = 0;
}
Display.prototype.draw = function(p)
{
p.fillText(this.value, this.x, this.y);
};
// KEY LISTENER
function KeyListener() {
this.pressedKeys = [];
this.keydown = function(e) {
this.pressedKeys[e.keyCode] = true;
};
this.keyup = function(e) {
this.pressedKeys[e.keyCode] = false;
};
document.addEventListener("keydown", this.keydown.bind(this));
document.addEventListener("keyup", this.keyup.bind(this));
}
KeyListener.prototype.isPressed = function(key)
{
return this.pressedKeys[key] ? true : false;
};
KeyListener.prototype.addKeyPressListener = function(keyCode, callback)
{
document.addEventListener("keypress", function(e) {
if (e.keyCode == keyCode)
callback(e);
});
};
// Initialize our game instance
var game = new Game();
function MainLoop() {
game.update();
game.draw();
// Call the main loop again at a frame rate of 30fps
setTimeout(MainLoop, 33.3333);
}
function server() {
MainLoop();
/*
WS.log('Welcome to WearScript');
WS.say('Welcome to WearScript');
WS.sound('SUCCESS')
// Changes canvas color with head rotation
WS.sensorOn('orientation', .15, function (data) {
ctx.fillStyle = 'hsl(' + data['values'][0] + ', 90%, 50%)'
ctx.fillRect(0, 0, 640, 360);
});
// Stream several sensors (can view in the Sensors tab)
var sensors = ['gps', 'accelerometer', 'magneticField', 'gyroscope',
'light', 'gravity', 'linearAcceleration', 'rotationVector'];
for (var i = 0; i < sensors.length; i++)
WS.sensorOn(sensors[i], .15);
// Stream camera frames (can view in the Images tab)
WS.cameraOn(.25);
WS.dataLog(false, true, .15);
// Hookup touch and eye gesture callbacks
WS.gestureCallback('onTwoFingerScroll', function (v, v2, v3) {
WS.log('onTwoFingerScroll: ' + v + ', ' + v2 + ', ' + v3);
});
WS.gestureCallback('onEyeGesture', function (name) {
WS.log('onEyeGesture: ' + name);
});
WS.gestureCallback('onGesture', function (name) {
WS.log('onGesture: ' + name);
});
WS.gestureCallback('onFingerCountChanged', function (i, i2) {
WS.log('onFingerCountChanged: ' + i + ', ' + i2);
});
WS.gestureCallback('onScroll', function (v, v2, v3) {
WS.log('onScroll: ' + v + ', ' + v2 + ', ' + v3);
});
WS.subscribe()
*/
// Below this are more examples, uncomment to use them
//WS.liveCardCreate(false, .2);
/*
var tree = new WS.Cards();
tree.add('Body text', 'Footer text', function () {WS.say('selected')}, function () {WS.say('tapped')}, 'Menu0', function () {WS.say('menu0')}, 'Menu1', function () {WS.say('menu1')});
tree.add('Body text', 'Footer text', (new WS.Cards()).add('Child0', '0').add('Child1', '1'));
WS.cardTree(tree);
WS.displayCardTree();
*/
/*
WS.speechRecognize('Say Something', function (data) {
WS.log('speech: ' + data);
WS.say('you said ' + data);
});
*/
//WS.cameraPhoto();
//WS.cameraVideo();
//WS.cameraOff();
//WS.shutdown();
}
function main() {
if (WS.scriptVersion(1)) return;
ctx = document.getElementById('canvas').getContext("2d");
WS.serverConnect('{{WSUrl}}', server);
}
window.onload = main;
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment