Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

first commit, based off of shuttle

  • Loading branch information...
commit 7f92effd7061e158ce223c1f0936bcd832004ee8 0 parents
@databyss authored
3  README
@@ -0,0 +1,3 @@
+2D Canvas Background Fun!
+
+SWOOOOOOOOOOOOOOOOSH!
297 canvasbg.js
@@ -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
BIN  images/spacebg400x400.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  images/spacebg64x64.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
31 index.html
@@ -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>
2  start_serv.bat
@@ -0,0 +1,2 @@
+start python -m SimpleHTTPServer
+start http://localhost:8000

0 comments on commit 7f92eff

Please sign in to comment.
Something went wrong with that request. Please try again.