Permalink
Browse files

first commit, based off of shuttle

  • Loading branch information...
0 parents commit 7f92effd7061e158ce223c1f0936bcd832004ee8 @databyss committed Mar 17, 2012
Showing with 333 additions and 0 deletions.
  1. +3 −0 README
  2. +297 −0 canvasbg.js
  3. BIN images/spacebg400x400.png
  4. BIN images/spacebg64x64.png
  5. +31 −0 index.html
  6. +2 −0 start_serv.bat
@@ -0,0 +1,3 @@
+2D Canvas Background Fun!
+
+SWOOOOOOOOOOOOOOOOSH!
@@ -0,0 +1,297 @@
+var exitFlag = false;
+var lastUpdate = null;
+var c, ctx;
+
+// Article: http://www.wired.com/gamelife/2012/03/rj-mical-gdc-speech
+
+var clickDebug = 'Click Debug:';
+clickDebug += '<table><tr><td>click</td><td>(0,0)</td></tr>';
+clickDebug += '<tr><td>canvas</td><td>(0,0)</td></tr>';
+clickDebug += '<tr><td>game</td><td>(0,0)</td></tr></table>';
+
+var inputKeys = { // defines key codes used for input
+ up: 87, // W
+ right: 68, // D
+ left: 65, // A
+ down: 83, // S
+ quit: 27 // ESC
+}
+
+
+// input state object
+var input = {
+ left: false,
+ up: false,
+ down: false,
+ right: false,
+ quit: false,
+ debugOutput: function() {
+ var debugOutput = $('#gameDebug').html() + '<br />Input Debug:';
+ debugOutput += '<table><tr><td>up</td><td>(' + this.up + ')</td></tr>';
+ debugOutput += '<table><tr><td>down</td><td>(' + this.down + ')</td></tr>';
+ debugOutput += '<tr><td>left</td><td>(' + this.left + ')</td></tr>';
+ debugOutput += '<tr><td>right</td><td>(' + this.right + ')</td></tr>';
+ debugOutput += '<tr><td>quit</td><td>(' + this.quit + ')</td></tr></table>';
+ $('#gameDebug').html(debugOutput);
+ }
+}
+
+var world = {
+ x: 0,
+ y: 0
+}
+
+function background() {
+ this.image = null;
+ this.scale = 1;
+ this.scroll = {
+ x: 0, y: 0
+ };
+ this.scrollFactor = {
+ x: 0, y: 0
+ };
+}
+
+function setMapBG() {
+ ctx.clearRect(0, 0, c.width, c.height);
+ //ctx.fillStyle = '#ffffff';
+ //ctx.fillRect(0, 0, c.width, c.height);
+ if(bgImage !== null) {
+ //ctx.drawImage(bgImage, world.xOffset, world.yOffset, c.width, c.height, 0, 0, c.width, c.height);
+ }
+}
+
+function handleKeyDown(evt) {
+ //console.log(evt.keyCode);
+ switch(evt.keyCode) {
+ case inputKeys.quit: // ESC Key
+ input.quit = true;
+ exitFlag = true;
+ //console.log('Exiting Game');
+ break;
+
+ case inputKeys.left: // Left Key
+ if(!input.left) {
+ //console.log('left pressed');
+ input.left = true;
+ }
+ break;
+
+ case inputKeys.right: // Right Key
+ if(!input.right) {
+ //console.log('right pressed');
+ input.right = true;
+ }
+ break;
+
+ case inputKeys.up: // Up Key
+ if(!input.up) {
+ input.up = true;
+ }
+ break;
+
+ case inputKeys.down: // Down Key
+ if(!input.down) {
+ input.down = true;
+ }
+ break;
+
+ defult:
+ console.log('unknown key pressed: ' + evt.keyCode)
+ }
+}
+
+function handleKeyUp(evt) {
+ //console.log(evt.keyCode);
+ switch(evt.keyCode) {
+
+ case inputKeys.left: // Left Key
+ input.left = false;
+ break;
+
+ case inputKeys.right: // Right Key
+ input.right = false;
+ break;
+
+ case inputKeys.up: // Up Key
+ input.up = false;
+ break;
+
+ case inputKeys.down: // Down Key
+ input.down = false;
+ break;
+
+ defult:
+ console.log('unknown key released: ' + evt.keyCode)
+ }
+}
+
+function drawDebugGrid(method) {
+ switch(method) {
+ case 'grid':
+ ctx.strokeStyle = '#ff0000';
+ for(var x = 0; x < c.width; x+=level.scale) {
+ ctx.beginPath();
+ ctx.moveTo(x, 0);
+ ctx.lineTo(x, c.height);
+ ctx.stroke();
+ }
+ for(var y = 0; y < c.height; y += level.scale) {
+ ctx.beginPath();
+ ctx.moveTo(0, y);
+ ctx.lineTo(c.width, y);
+ ctx.stroke();
+ }
+ break;
+
+ case 'crosshair':
+ ctx.strokeStyle = '#ff0000';
+ ctx.beginPath();
+ ctx.moveTo(0, c.height / 2);
+ ctx.lineTo(c.width, c.height / 2);
+ ctx.stroke();
+
+ ctx.beginPath();
+ ctx.moveTo(c.width / 2, 0);
+ ctx.lineTo(c.width / 2, c.height);
+ ctx.stroke();
+ break;
+ }
+}
+
+function gameLoop() {
+ var newUpdate = new Date();
+
+ $('#gameDebug').html(clickDebug);
+ input.debugOutput();
+ if(!exitFlag) {
+ setMapBG();
+ drawDebugGrid(); // 'crosshair' or 'grid'
+ if(!lastUpdate) {
+ lastUpdate = newUpdate;
+ }
+ } else {
+ //player.debugOutput();
+ }
+ lastUpdate = newUpdate;
+}
+
+function loadImages() {
+ // preload images
+ var imageManager = new ImageLoader();
+
+ imageManager.queueDownload('images/space.png');
+
+ imageManager.downloadAll(function() {
+ bgImage = imageManager.getAsset('images/spacebg64x64.png');
+ });
+}
+
+function setupCanvas() {
+ // define graphics contexts
+ c = document.getElementById("gameCanvas");
+ ctx = c.getContext("2d");
+
+ // canvas defaults
+ ctx.lineWidth = 1;
+
+ // set more after loading bg image
+ // flip image and translate down to fix coordinates
+ ctx.scale(1, -1); // flip over x axis
+ ctx.translate(0, -c.height); // move (0,0) to bottom left to match cartisian plane
+ ctx.translate(0.5, 0.5); // offset for aliasing
+
+}
+
+$(function() {
+ // on ready
+ setupCanvas();
+ loadImages(); //TODO: async, need to wait for finish before moving on.
+
+ // add listeners for keyboard input
+ window.addEventListener('keydown', handleKeyDown, true);
+ window.addEventListener('keyup', handleKeyUp, true);
+
+ // debug
+ $("#gameCanvas").click(function(e){
+ var gc = $("#gameCanvas");
+ var x = e.pageX - gc.offset().left;
+ var y = e.pageY - gc.offset().top;
+ var map = level.toMapCoord({x: x, y: c.height - y});
+
+ clickDebug = 'Click Debug:';
+ clickDebug += '<table><tr><td>click</td><td>(' + e.pageX + ', ' + e.pageY + ')</td></tr>';
+ clickDebug += '<tr><td>canvas</td><td>(' + Math.round(x) + ', ' + Math.round(y) + ')</td></tr>';
+ clickDebug += '<tr><td>game</td><td>(' + Math.round(x) + ', ' + (c.height - Math.round(y)) + ')</td></tr>';
+ clickDebug += '<tr><td>map</td><td>(' + Math.round(map.x) + ', ' + Math.round(map.y) + ')</td></tr>';
+ clickDebug += '<tr><td>color</td><td>(' + level.colorAt(map.x, map.y) + ')</td></tr></table>';
+ });
+
+ (function animloop(){
+ requestAnimFrame(animloop);
+ gameLoop();
+ })();
+});
+
+//BEGIN RAF SHIM
+// reference: http://paulirish.com/2011/requestanimationframe-for-smart-animating/
+// shim layer with setTimeout fallback
+window.requestAnimFrame = (function() {
+ return window.requestAnimationFrame ||
+ window.webkitRequestAnimationFrame ||
+ window.mozRequestAnimationFrame ||
+ window.oRequestAnimationFrame ||
+ window.msRequestAnimationFrame ||
+ function(callback){
+ window.setTimeout(callback, 1000 / 60);
+ };
+})();
+// END RAF SHIM
+
+// BEGIN ImageLoader Scripts
+// ImageLoader based on http://www.html5rocks.com/en/tutorials/games/assetmanager/
+function ImageLoader() {
+ this.successCount = 0;
+ this.errorCount = 0;
+ this.downloadQueue = [];
+ this.cache = {};
+}
+
+ImageLoader.prototype.queueDownload = function(path) {
+ this.downloadQueue.push(path);
+}
+
+ImageLoader.prototype.downloadAll = function(downloadCallback) {
+ if(this.downloadQueue.length === 0) {
+ downloadCallback();
+ } else {
+ for(var i = 0; i < this.downloadQueue.length; i++) {
+ var path = this.downloadQueue[i];
+ var img = new Image();
+ var that = this;
+ img.addEventListener("load", function() {
+ that.successCount += 1;
+ if(that.isDone()) {
+ downloadCallback();
+ }
+ }, false);
+ img.addEventListener("error", function() {
+ that.errorCount += 1;
+ if(that.isDone()) {
+ downloadCallback();
+ }
+ }, false);
+ img.src = path;
+ this.cache[path] = img;
+ }
+ }
+}
+
+ImageLoader.prototype.isDone = function() {
+ return(this.downloadQueue.length === (this.successCount + this.errorCount));
+}
+
+ImageLoader.prototype.getAsset = function(path) {
+ return this.cache[path];
+}
+// END ImageLoader Scripts
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -0,0 +1,31 @@
+<html>
+ <head>
+ <title>databyss/canvasbg @ GitHub</title>
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script type="text/javascript" src="canvasbg.js"></script>
+ </head>
+ <body>
+ <h1>Javascript 2D Canvas Background stuff</h1>
+
+ <br /><br />
+
+ <div id="gameWindow">
+
+ <canvas id="gameCanvas" width="400" height="400" style="position:absolute;top:50;left:10;">Canvas element not supported by your browser.</canvas>
+
+ <div id="commands" style="position:absolute;top:650;left:10;">
+ <h2>Controls</h2>
+ WASD to move.<br />
+ ESC to quit!<br />
+
+ <br />
+
+ Download as zip file: <a href="https://github.com/databyss/canvasbg/zipball/master">Download ZIP File</a>
+ </div> <!-- commands -->
+ </div> <!-- gameWindow -->
+ <div id="gameDebug" style="position:absolute;top:50;left:500;"></div>
+
+ <br /><br />
+
+ </body>
+</html>
@@ -0,0 +1,2 @@
+start python -m SimpleHTTPServer
+start http://localhost:8000

0 comments on commit 7f92eff

Please sign in to comment.