Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

panning and zoom works. 1 background layer is displaying

  • Loading branch information...
commit 1f5afd46431542c9de147459b52cd44a406526bb 1 parent af21be2
@zachwe zachwe authored
View
9 app.js
@@ -33,5 +33,14 @@ app.get('/', function(req, res){
res.render('index');
});
+/*app.get('/images/BLUE_GRASS_FG_1.png', function(req, res){
+ path = '/images/BLUE_GRASS_FG_1.png';
+ fs.readFile(path, function(err, data){
+ res.writeHead(200);
+ res.write(data);
+ res.end();
+ });
+});*/
+
app.listen(3000);
console.log("Express server listening on port %d", app.address().port);
View
34 client.js
@@ -1,34 +0,0 @@
-$(document).ready(function() {
- var fgContext = $('#foreground').getContext();
- var bgContext0 = $('#bg0').getContext();
-
- var viewport = {
- height: 600,
- width: 800,
- zoom: 0,
- x0: -400,
- x1: 400,
- y0: -300,
- y1: 300,
-
- };
-
- //adjust viewport to reflect new zoom level
- function zoom(level) {
-
- }
-
- function drawMap() {
- dimensions = getViewportDimensions();
- }
-
- function getViewportDimensions() {
- var zoom = viewport.zoom;
- var x1 = viewport.x;
-
- var x2 = x1 + 600 - zoom * 200;
-
- var y1
-
- }
-});
View
3  design.txt
@@ -0,0 +1,3 @@
+viewport
+ zoom
+ global x
View
229 public/client.js
@@ -0,0 +1,229 @@
+$(document).ready(function() {
+ var canvas = document.getElementById('foreground');
+ var fgContext = canvas.getContext('2d');
+ var canvas = document.getElementById('bg0');
+ var bgContext = canvas.getContext('2d');
+
+//initial values for viewport
+ var viewport = {
+ height: 600,
+ width: 800,
+ zoom: .5,
+ x0: 0,
+ x1: 800,
+ y0: 0,
+ y1: 600,
+ //ground level
+ groundY: 200,
+ //zoomed out
+ currView: 0,
+ };
+
+//default zoomed in left-hand position
+ var defaultLeft = {
+ zoom: 1.0,
+ x0: 0,
+ viewCode: 1,
+ };
+
+//default zoomed in right-hand position
+ var defaultRight = {
+ zoom: 1.0,
+ x0: 400,
+ viewCode: 2,
+ }
+
+//stores images for tiling
+ var bgTiles = {};
+//stores bg static images;
+ var bgImages = {}
+//stores images that live on the foreground
+ var fgImages = {};
+
+//speed that viewport is moved
+ var incr;
+ //whether or not we are in motion;
+ var moving = false;
+
+//load all the images and store them, then call redraw()
+ function init() {
+ var bg1TileSrcs = {'BLUE_GRASS_FG_1.png': {height: 187, width: 332, defaultY: viewport.height - viewport.groundY, index: 1},
+ 'BLUE_GRASS_FG_2.png': {height: 33, width: 332, defaultY: viewport.height - viewport.groundY - 33, index: 2},
+ };
+ var bg1ImgSrcs = {'SLINGSHOT_01_BACK.png': {height: 199, width: 38, defaultY: viewport.height - viewport.groundY - 124, defaultX: 40},
+ 'SLINGSHOT_01_FRONT.png': {height: 124, width: 43, defaultY: viewport.height - viewport.groundY - 124, defaultX: 40},
+ };
+ var fgImgSrcs = {
+ 'INGAME_BIRDS_PIGS.png': {height: 920, width: 859},
+ 'SLINGSHOT_RUBBERBAND.png': {height: 16, width: 14},
+ };
+ var loaded = 0;
+ var tileKeys = Object.keys(bg1TileSrcs);
+ var bgKeys = Object.keys(bg1ImgSrcs);
+ var fgKeys = Object.keys(fgImgSrcs);
+
+ var totalImages = tileKeys.length + bgKeys.length + fgKeys.length;
+
+ //load tile images
+ var key;
+ for(var i = 0, ll = tileKeys.length; i < ll; i++) {
+ key = tileKeys[i];
+ data = bg1TileSrcs[key];
+
+ var img = new Image();
+ img.src = '/images/' + key;
+ img.height = data.height;
+ img.width = data.width;
+ img.defaultY= data.defaultY;
+ img.index = data.index;
+
+ bgTiles[key] = img;
+ //when all images are loaded, draw.
+ img.onload = function() {
+ loaded++;
+ if(loaded == totalImages) {
+ redraw();
+ }
+ }
+ };
+
+ //load non-tile bg images
+ for(var i = 0, ll = bgKeys.length; i < ll; i++) {
+ key = bgKeys[i];
+ data = bg1ImgSrcs[key];
+
+ var img = new Image();
+ img.src = '/images/' + key;
+ img.height = data.height;
+ img.defaultY = data.defaultY;
+ img.defaultX = data.defaultX;
+
+ bgImages[key] = img;
+ //when all images are loaded, draw;
+ img.onload = function() {
+ loaded++;
+ if(loaded == totalImages) {
+ redraw();
+ }
+ }
+ }
+
+ //load foreground images
+ for(var i = 0, ll = fgKeys.length; i < ll; i++) {
+ key = fgKeys[i];
+ data = fgImgSrcs[key];
+
+ var img = new Image();
+ img.src = '/images/' + key;
+ img.height = data.height;
+
+ img.defaultY = data.defaultY;
+ img.defaultX = data.defaultX;
+
+ fgImages[key] = img;
+ //when all images are loaded, draw;
+ img.onload = function() {
+ loaded++;
+ if(loaded == totalImages) {
+ redraw();
+ }
+ }
+ }
+ }
+
+//called whenever some change to the viewport is occurring.
+ function modifyViewport(zoom, x) {
+ moving = true;
+ if(x > viewport.x0) {
+ incr = 4;
+ } else {
+ incr = -4
+ }
+ if(zoom != viewport.zoom) {
+ if(viewport.x0 != x) {
+ var zoomDiff = ((zoom - viewport.zoom) / Math.abs((viewport.x0 - x))) * incr;
+ } else {
+ var zoomDiff = (2.0 / 400);
+ }
+ }
+ //set the redraw interval
+ var interval = setInterval(function() {
+ if(! transitionView(x, zoom, zoomDiff)) {
+ clearInterval(interval);
+ }
+ }, 10);
+ }
+
+//handles a single frame of animation by adjusting image size and position and redrawing the canvas.
+ function transitionView(goalX, goalZoom, zoomDiff) {
+ if(Math.abs(viewport.x0 - goalX) < 2 && (zoomDiff == undefined || Math.abs(viewport.zoom - goalZoom) < .01)) {
+ return false;
+ } else {
+
+ viewport.x0 += incr;
+ viewport.x1 += incr;
+ if(goalZoom != undefined) {
+ viewport.zoom += zoomDiff;
+ }
+ redraw();
+ return true;
+ }
+ }
+
+ //redraw the entire canvas with updated positions.
+ function redraw() {
+ bgContext.clearRect(0, 0, viewport.width, viewport.height);
+
+ //tile images
+ for(var i in bgTiles) {
+ var img = bgTiles[i]
+ //scaled dimensions of the image to account for zoom
+ adjustedWidth = img.width * viewport.zoom;
+ adjustedHeight = img.height * viewport.zoom;
+
+ //initial width of the image, adjusted for the viewport position
+ var initialWidth = (img.width - viewport.x0) * viewport.zoom;
+ while(initialWidth < 0) {
+ initialWidth += adjustedWidth;
+ }
+ initialWidth = Math.ceil(initialWidth);
+
+ //offset of the first image, in terms of the images original size.
+ var initialOffset = img.width - (initialWidth / viewport.zoom);
+ var horzPos = 0;
+
+ var y;
+ switch(img.index){
+ case 1: y = viewport.height - viewport.groundY;
+ break;
+ case 2: y = viewport.height - viewport.groundY - img.height * viewport.zoom;
+ }
+
+ //first tile
+ bgContext.drawImage(img, initialOffset, 0, initialWidth / viewport.zoom, img.height, 0, y, initialWidth, adjustedHeight);
+
+ horzPos += initialWidth;
+
+ //filler tiles
+ adjustedWidth = Math.ceil(adjustedWidth);
+ while(horzPos + adjustedWidth <= viewport.x1 - viewport.x0) {
+ bgContext.drawImage(img, horzPos, y, adjustedWidth, adjustedHeight);
+ horzPos += adjustedWidth;
+ }
+
+ //last tile
+ var finalWidth = (viewport.x1 - viewport.x0) - horzPos;
+ bgContext.drawImage(img, 0, 0, finalWidth / viewport.zoom, img.height, horzPos, y, finalWidth, adjustedHeight);
+ }
+ }
+
+ $('canvas').click(function() {
+ if(!moving) {
+ modifyViewport(defaultRight.zoom, defaultRight.x0);
+ }
+ });
+
+
+
+ init();
+});
View
BIN  public/images/BLUE_GRASS_FG_1.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/images/BLUE_GRASS_FG_2.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/images/INGAME_BIRDS_PIGS.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/images/SLINGSHOT_01_BACK.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/images/SLINGSHOT_01_FRONT.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/images/SLINGSHOT_RUBBERBAND.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
7,179 public/jquery.js
7,179 additions, 0 deletions not shown
View
5 public/style.css
@@ -0,0 +1,5 @@
+canvas {
+ position: absolute;
+ left: 10px;
+ top: 40px;
+}
View
6 views/index.ejs
@@ -1,12 +1,14 @@
<!DOCTYPE html>
<html>
<head>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
- <script type="text/javascript" src="client.html"></script>
+ <script type="text/javascript" src="/jquery.js"></script>
+ <script type="text/javascript" src="/client.js"></script>
+ <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>angry birds</p>
<canvas id="foreground" width='800' height='600'></canvas>
+ <canvas id="bg0" width='800' height='600' style="border:1px solid black;"></canvas>
</body>
</html>
Please sign in to comment.
Something went wrong with that request. Please try again.