From 52d5f63e04b29ef77eb9f350ed090440a99d6a11 Mon Sep 17 00:00:00 2001 From: Alvin Crespo Date: Mon, 9 Jul 2012 22:26:49 -0400 Subject: [PATCH 1/3] modifying the js to display simple oop standards in js --- index.html | 23 ++-- js/game.js | 321 ++++++++++++++++++++++++++++++++++------------------- 2 files changed, 223 insertions(+), 121 deletions(-) diff --git a/index.html b/index.html index c1764a8..0d941e8 100644 --- a/index.html +++ b/index.html @@ -1,10 +1,17 @@ - - - - Simple Canvas Game - - - - + + + + + + + + Simple Canvas Game + + + + + + + diff --git a/js/game.js b/js/game.js index 5353b81..779f5ab 100644 --- a/js/game.js +++ b/js/game.js @@ -1,123 +1,218 @@ -// Create the canvas -var canvas = document.createElement("canvas"); -var ctx = canvas.getContext("2d"); -canvas.width = 512; -canvas.height = 480; -document.body.appendChild(canvas); - -// Background image -var bgReady = false; -var bgImage = new Image(); -bgImage.onload = function () { - bgReady = true; -}; -bgImage.src = "images/background.png"; - -// Hero image -var heroReady = false; -var heroImage = new Image(); -heroImage.onload = function () { - heroReady = true; -}; -heroImage.src = "images/hero.png"; - -// Monster image -var monsterReady = false; -var monsterImage = new Image(); -monsterImage.onload = function () { - monsterReady = true; -}; -monsterImage.src = "images/monster.png"; - -// Game objects -var hero = { - speed: 256 // movement in pixels per second -}; -var monster = {}; -var monstersCaught = 0; - -// Handle keyboard controls -var keysDown = {}; - -addEventListener("keydown", function (e) { - keysDown[e.keyCode] = true; -}, false); - -addEventListener("keyup", function (e) { - delete keysDown[e.keyCode]; -}, false); - -// Reset the game when the player catches a monster -var reset = function () { - hero.x = canvas.width / 2; - hero.y = canvas.height / 2; - - // Throw the monster somewhere on the screen randomly - monster.x = 32 + (Math.random() * (canvas.width - 64)); - monster.y = 32 + (Math.random() * (canvas.height - 64)); -}; - -// Update game objects -var update = function (modifier) { - if (38 in keysDown) { // Player holding up - hero.y -= hero.speed * modifier; - } - if (40 in keysDown) { // Player holding down - hero.y += hero.speed * modifier; - } - if (37 in keysDown) { // Player holding left - hero.x -= hero.speed * modifier; - } - if (39 in keysDown) { // Player holding right - hero.x += hero.speed * modifier; +var Game, Hero, Monster; + +//==================================================================================== +// GAME CLASS +//==================================================================================== +Game = (function(win, doc){ + + function Game() { + this.canvas = document.createElement('canvas'); + this.ctx = this.canvas.getContext('2d'); + this.canvas.width = 512; + this.canvas.height = 480; + this.monstersCaught = 0; + this.keysDown = []; + + document.body.appendChild(this.canvas); + + return this; } - // Are they touching? - if ( - hero.x <= (monster.x + 32) - && monster.x <= (hero.x + 32) - && hero.y <= (monster.y + 32) - && monster.y <= (hero.y + 32) - ) { - ++monstersCaught; - reset(); + function handleKeyDown(e) { + this.keysDown[e.keyCode] = true; } -}; -// Draw everything -var render = function () { - if (bgReady) { - ctx.drawImage(bgImage, 0, 0); + function handleKeyUp(e) { + delete this.keysDown[e.keyCode]; } - if (heroReady) { - ctx.drawImage(heroImage, hero.x, hero.y); + Game.prototype = { + 'init': function() { + this.assetsReady = { + 'bgReady': false, + 'heroReady': false, + 'monsterReady': false + }; + + this.hero = new Hero(); + this.monster = new Monster() + + this.attachEvents(); + + return this; + }, + + 'attachEvents': function() { + var that = this; + + addEventListener('keydown', function(e){ handleKeyDown.call(that, e); }, false); + addEventListener('keyup', function(e){ handleKeyUp.call(that, e); }, false); + }, + + 'loadAssets': function() { + var that = this; + + this.bgImage = new Image(); + this.bgImage.onload = function() { + that.assetsReady.bgReady = true; + }; + + this.heroImage = new Image(); + this.heroImage.onload = function() { + that.assetsReady.heroReady = true; + }; + + this.monsterImage = new Image(); + this.monsterImage.onload = function() { + that.assetsReady.monsterReady = true; + }; + + this.bgImage.src = 'images/background.png'; + this.heroImage.src = 'images/hero.png'; + this.monsterImage.src = 'images/monster.png'; + + return this; + }, + + 'reset': function() { + this.hero.x = this.canvas.width / 2; + this.hero.y = this.canvas.height / 2; + + // Throw the monster somewhere on the screen randomly + this.monster.x = 32 + (Math.random() * (this.canvas.width - 64)); + this.monster.y = 32 + (Math.random() * (this.canvas.height - 64)); + + return this; + }, + + 'render': function() { + if(this.assetsReady.bgReady) { + this.ctx.drawImage(this.bgImage, 0, 0); + } + + if(this.assetsReady.heroReady) { + this.ctx.drawImage(this.heroImage, this.hero.x, this.hero.y); + } + + if(this.assetsReady.monsterReady) { + this.ctx.drawImage(this.monsterImage, this.monster.x, this.monster.y); + } + + //Score + this.ctx.fillStyle = 'rgb(250, 250, 250)'; + this.ctx.font = '24px Helvetica'; + this.ctx.textAlign = 'left'; + this.ctx.textBaseline = 'top'; + this.ctx.fillText('Goblins Caught: ' + this.monstersCaught, 32, 32); + + return this; + }, + + 'update': function(modifier) { + //Player is holding up + if(38 in this.keysDown) { + this.hero.y -= this.hero.speed * modifier; + } + + //Player is holding down + if(40 in this.keysDown) { + this.hero.y += this.hero.speed * modifier; + } + + //Player is holding left + if(37 in this.keysDown) { + this.hero.x -= this.hero.speed * modifier; + } + + if(39 in this.keysDown) { + this.hero.x += this.hero.speed * modifier; + } + + //if the hero hit the left side + if(this.hero.x/2 < 0) { + this.hero.x = 0; + } + + //if the hero hit the right side + if(this.hero.x >= this.canvas.width - 32) { + this.hero.x = this.canvas.width - 32; + } + + //if hero hit the top + if(this.hero.y <= 0) { + this.hero.y = 0; + } + + //if hero hit the bottom + if(this.hero.y >= this.canvas.height - 32) { + this.hero.y = this.canvas.height - 32; + } + + //Are the hero and monsters touching? + if (this.hero.x < (this.monster.x + 32) && this.monster.x < (this.hero.x + 32) && this.hero.y <= (this.monster.y + 32) && this.monster.y <= (this.hero.y + 32)) { + ++this.monstersCaught; + this.reset(); + } + + return this; + }, + + 'run': function() { + var now = Date.now(), delta = now - this.then; + + this.update(delta / 1000); + this.render(); + + this.then = now; + + return this; + } + }; + + return Game; + +}(window, document)); +//==================================================================================== + +//==================================================================================== +// HERO CLASS +//==================================================================================== +Hero = (function(win, doc) { + + function Hero() { + this.speed = 256; + this.x = 0; + this.y = 0; } - if (monsterReady) { - ctx.drawImage(monsterImage, monster.x, monster.y); + Hero.prototype = { + + }; + + return Hero; + +}(window, document)); +//==================================================================================== + +//==================================================================================== +// MONSTER CLASS +//==================================================================================== +Monster = (function(win, doc) { + + function Monster() { + this.x = 0; + this.y = 0; } - // Score - ctx.fillStyle = "rgb(250, 250, 250)"; - ctx.font = "24px Helvetica"; - ctx.textAlign = "left"; - ctx.textBaseline = "top"; - ctx.fillText("Goblins caught: " + monstersCaught, 32, 32); -}; - -// The main game loop -var main = function () { - var now = Date.now(); - var delta = now - then; - - update(delta / 1000); - render(); - - then = now; -}; - -// Let's play this game! -reset(); -var then = Date.now(); -setInterval(main, 1); // Execute as fast as possible + Monster.prototype = { + + }; + + return Monster; + +}(window, document)); +//==================================================================================== + +var game = new Game().init().loadAssets().reset(); + game.then = Date.now(); +setInterval(function() { game.run(); }, 1); \ No newline at end of file From 5cafb1671d376ec903d16a53b487a99f4041f992 Mon Sep 17 00:00:00 2001 From: Alvin Crespo Date: Thu, 12 Jul 2012 14:49:38 -0400 Subject: [PATCH 2/3] adding curl.js, seperating out files, documenting and optimizing some code --- index.html | 26 +++++++- js/Hero.js | 38 +++++++++++ js/Monster.js | 37 +++++++++++ js/curl.js | 23 +++++++ js/game.js | 172 +++++++++++++++++++++++++++----------------------- 5 files changed, 215 insertions(+), 81 deletions(-) create mode 100644 js/Hero.js create mode 100644 js/Monster.js create mode 100644 js/curl.js diff --git a/index.html b/index.html index 0d941e8..5fc27cc 100644 --- a/index.html +++ b/index.html @@ -9,9 +9,31 @@ Simple Canvas Game - - + + + diff --git a/js/Hero.js b/js/Hero.js new file mode 100644 index 0000000..1339808 --- /dev/null +++ b/js/Hero.js @@ -0,0 +1,38 @@ +//==================================================================================== +// HERO CLASS +//==================================================================================== +Game.Hero = (function(win, doc) { + + /** + @constructor + */ + function Hero() { + this.speed = 256; + this.x = 0; + this.y = 0; + } + + //----------------------------------------------------------------------------------------------------- + // PRIVATE METHODS + //----------------------------------------------------------------------------------------------------- + //----------------------------------------------------------------------------------------------------- + + //----------------------------------------------------------------------------------------------------- + // EVENT HANDLERS + //----------------------------------------------------------------------------------------------------- + //----------------------------------------------------------------------------------------------------- + + //----------------------------------------------------------------------------------------------------- + // PUBLIC METHODS + //----------------------------------------------------------------------------------------------------- + Hero.prototype = { + 'init': function() { + + } + }; + //----------------------------------------------------------------------------------------------------- + + return Hero; + +}(window, document)); +//==================================================================================== \ No newline at end of file diff --git a/js/Monster.js b/js/Monster.js new file mode 100644 index 0000000..dadb490 --- /dev/null +++ b/js/Monster.js @@ -0,0 +1,37 @@ +//==================================================================================== +// MONSTER CLASS +//==================================================================================== +Game.Monster = (function(win, doc) { + + /** + @constructor + */ + function Monster() { + this.x = 0; + this.y = 0; + } + + //----------------------------------------------------------------------------------------------------- + // PRIVATE METHODS + //----------------------------------------------------------------------------------------------------- + //----------------------------------------------------------------------------------------------------- + + //----------------------------------------------------------------------------------------------------- + // EVENT HANDLERS + //----------------------------------------------------------------------------------------------------- + //----------------------------------------------------------------------------------------------------- + + //----------------------------------------------------------------------------------------------------- + // PUBLIC METHODS + //----------------------------------------------------------------------------------------------------- + Monster.prototype = { + 'init': function() { + + } + }; + //----------------------------------------------------------------------------------------------------- + + return Monster; + +}(window, document)); +//==================================================================================== \ No newline at end of file diff --git a/js/curl.js b/js/curl.js new file mode 100644 index 0000000..71042b2 --- /dev/null +++ b/js/curl.js @@ -0,0 +1,23 @@ +/* + MIT License (c) copyright B Cavalier & J Hann */ +var r=!0,z=!1; +(function(l){function i(){}function t(a,b){return 0==O.call(a).indexOf("[object "+b)}function m(a){return a&&"/"==a.charAt(a.length-1)?a.substr(0,a.length-1):a}function j(a,b){var c,f,e;f=1;a=a.replace(P,function(a,b,c,k){c&&f++;e=r;return k||""});return e?(c=b.split("/"),c.splice(c.length-f,f),c.concat(a||[]).join("/")):a}function B(a){var b=a.indexOf("!");return{K:a.substr(b+1),j:0<=b&&a.substr(0,b)}}function x(){}function p(a){x.prototype=a;a=new x;x.prototype=I;return a}function A(){function a(a,b, +c){f.push([a,b,c])}function b(a,b){for(var c,e=0;c=f[e++];)(c=c[a])&&c(b)}var c,f,e;c=this;f=[];e=function(c,s){a=c?function(a){a&&a(s)}:function(a,b){b&&b(s)};e=i;b(c?0:1,s);b=i;f=u};this.$=function(b,c,f){a(b,c,f)};this.h=function(a){c.r=a;e(r,a)};this.d=function(a){c.da=a;e(z,a)};this.o=function(a){b(2,a)}}function o(a,b,c,f){a instanceof A?a.$(b,c,f):b(a)}function d(a,b,c){var f;return function(){0<=--a&&b&&(f=b.apply(u,arguments));0==a&&c&&c(f);return f}}function q(){function a(b,f,e){var g; +g=k.f(h,u,[].concat(b));this.then=b=function(a,b){o(g,function(b){a&&a.apply(u,b)},function(a){if(b)b(a);else throw a;});return this};this.next=function(b,c){return new a(b,c,g)};f&&b(f);o(e,function(){k.i(g)})}var b=[].slice.call(arguments);t(b[0],"Object")&&(h=k.b(b.shift()));return new a(b[0],b[1])}function D(a){var b=a.id;if(b==u)if(E!==u)E={z:"Multiple anonymous defines in url"};else if(!(b=k.V()))E=a;if(b!=u){var c=v[b];b in v||(c=k.k(b,h).b,c=v[b]=k.u(c,b));if(!(c instanceof A))throw Error("duplicate define: "+ +b);c.ca=z;k.v(c,a)}}var h=l.curl,w,C,y=l.document,n=y&&(y.head||y.getElementsByTagName("head")[0]),J={},K={},L={},F={},I={},O=I.toString,u,M={loaded:1,interactive:L,complete:1},v={},G=z,E,Q=/\?/,N=/^\/|^[^:]+:\/\//,P=/(\.)(\.?)(?:$|\/([^\.\/]+.*)?)/g,R=/\/\*[\s\S]*?\*\/|(?:[^\\])\/\/.*?[\n\r]/g,S=/require\s*\(\s*["']([^"']+)["']\s*\)|(?:[^\\]?)(["'])/g,H,k;k={f:function(a,b,c,f){function e(a){return j(a,s.e)}function g(b,c){var g,d,h,i;g=c&&function(a){c.apply(u,a)};if(t(b,"String")){d=e(b);h=v[d]; +i=h instanceof A&&h.a;if(!(d in v))throw Error("Module not resolved: "+d);if(g)throw Error("require(id, callback) not allowed");return i||h}o(k.i(k.f(a,s.e,b,f)),g)}var s;s=new A;s.e=s.id=b||"";s.W=f;s.w=c;s.p=g;g.toUrl=function(b){return k.k(e(b),a).url};s.ba=e;return s},u:function(a,b,c,f){var e,g,s;e=k.f(a,b,u,c);e.e=f==u?b:f;g=e.h;s=d(1,function(a){e.m=a;try{return k.O(e)}catch(b){e.d(b)}});e.h=function(a){o(c||G,function(){g(v[e.id]=s(a))})};e.A=function(a){o(c||G,function(){e.a&&(s(a),e.o(K))})}; +return e},N:function(a,b,c,f){a=k.f(a,b,u,c);a.e=f;return a},U:function(a){return a.p},B:function(a){return a.a||(a.a={})},T:function(a){var b=a.n;b||(b=a.n={id:a.id,uri:k.C(a),exports:k.B(a)},b.a=b.exports);return b},C:function(a){return a.url||(a.url=k.t(a.p.toUrl(a.id)))},b:function(a){var b,c,f;(b=a)||(a={});c=a.apiName;if((f=a.apiContext)||c?f[c]:w&&b)throw Error((c||"curl")+" already exists");(f||l)[c||"curl"]=q;w&&b&&(l.curl=w);c=a.defineName;if((f=a.defineContext)||c?f[c]:C&&b)throw Error((c|| +"define")+" already exists");(f||l)[c||"define"]=c=function(){var a=k.S(arguments);D(a)};C&&b&&(l.define=C);c.amd={plugins:r,jQuery:r,curl:"0.6.4"};b&&(k.b=k.H);return k.H(a)},H:function(a){function b(b,c){var e,g,d,h,i;for(i in b){d=b[i];d.name=d.id||d.name||i;h=a;g=B(m(d.name||i));e=g.K;if(g=g.j)h=f[g],h||(h=f[g]=p(a),h.g=p(a.g),h.c=[]),delete b[i];if(c){g=d;var n=void 0;g.path=m(g.path||g.location||"");n=m(g.main)||"main";"."!=n.charAt(0)&&(n="./"+n);g.F=j(n,g.name+"/");g.X=j(n,g.path+"/");g.b= +g.config}else g={path:m(d)};g.L=e.split("/").length;e?(h.g[e]=g,h.c.push(e)):h.s=k.J(d,a)}}function c(a){var b=a.g;a.Z=RegExp("^("+a.c.sort(function(a,c){return b[a].La.indexOf("/")&&!(a in f))&&(g=a=m(b.I)+"/"+a);c=N.test(a)?a:a.replace(b.Z,function(b){e=f[b]||{};d=e.b;return e.F&&b==a?(g=e.F,e.X):e.path||""});return{e:g||a,b:d||h,url:k.J(c,b)}},J:function(a,b){var c=b.s;return c&&!N.test(a)?m(c)+"/"+a:a},t:function(a){return a+(Q.test(a)?"":".js")},D:function(a,b,c){var f=y.createElement("script");f.onload=f.onreadystatechange=function(c){c=c||l.event;if("load"== +c.type||M[f.readyState])delete F[a.id],f.onload=f.onreadystatechange=f.onerror="",b()};f.onerror=function(){c(Error("Syntax or http error: "+a.url))};f.type=a.G||"text/javascript";f.charset="utf-8";f.async=!a.Y;f.src=a.url;F[a.id]=f;n.insertBefore(f,n.firstChild);return f},P:function(a){var b=[],c;("string"==typeof a?a:a.toSource?a.toSource():a.toString()).replace(R,"").replace(S,function(a,e,g){g?c=c==g?u:c:c||b.push(e);return a});return b},S:function(a){var b,c,f,e,g,d;g=a.length;f=a[g-1];e=t(f, +"Function")?f.length:-1;2==g?t(a[0],"Array")?c=a[0]:b=a[0]:3==g&&(b=a[0],c=a[1]);!c&&0 Date: Thu, 12 Jul 2012 20:05:16 -0400 Subject: [PATCH 3/3] adding multiple enemies --- images/boss.png | Bin 0 -> 1377 bytes index.html | 10 +++++--- js/Level.js | 47 +++++++++++++++++++++++++++++++++++ js/game.js | 64 ++++++++++++++++++++++++++++++++++++------------ 4 files changed, 102 insertions(+), 19 deletions(-) create mode 100644 images/boss.png create mode 100644 js/Level.js diff --git a/images/boss.png b/images/boss.png new file mode 100644 index 0000000000000000000000000000000000000000..15954d55f6d5359c2f75e660440b554cc01f9f7d GIT binary patch literal 1377 zcmeAS@N?(olHy`uVBq!ia0vp^azL!W!3HE*9Zu8(DajJoh?3y^w370~qErUQl>DSr z1<%~X^wgl##FWaylc_cg49sbnArU1JzCKpT`MG+DAT@dwxdlMo3=B5*6$OdO*{LN8 zNvY|XdA3ULckfqH$V{%1*XSQL?vFu&J;D8jzb> zlBiITo0C^;Rbi_HHrEQs1_|pcDS(xfWZNo192Makpx~Tel&WB=XP}#GU}m6TW~gUq zY+`P1uA^XNU}&IkV5Dzoq-$tyWo%?+V4wg6Nh+i#(Mch>H3D2mX;thjEr=FDs+o0^GXscbn}XpVJ5hw7AF^F7L;V>=P7_pOiaoz zEwNPsx)kDt+yY-;xWReF(0~F4nSMoLfxe-hfqrf-$X{U9#U(+h2xnkbT^v$bkg6Y) zTAW{6lnjiIG-a4(VA$ce2&53`8Y};zOkkuW=D6f1m*%GCm3X??DgkBmQZiGl+|140 z3=Pdq49txT%q$EIogAIbT#U>OT#SH}fw3FR3~YLV;cnz;WbEo}Vrgk;=xS(b?q=p@ zW@_qczP+vl9-pA3bQv8XfIT+3tqie&PAz-CHX}m`T04p6cCV+Uy@&( zkzb(T9BiuKo0y!L2jYXG2jW|o)S}F?)D*X({9FZa_*!LRvER*+kiQ{%Q^*N3eV}9X zL5Tw?vA~3YDGaFzdKSkCj>*Ba_YxyXKt|$LwIf2y{Rt-O8rtfO}Y*_W`@Y7(YM+F5hBxhu$-e{F$>d|F?&cCRp zXWsdOsSz7OUTsv7ufAinLojp_@4S%ScbB>O&oyL5&gL+vmD0T`cGsF|nY?@?H<&Fy7nIw)7LD{!WK&|Bt^?&Zu)KH#|3q>ukHk z0Y5I)6t=`j-crRo?(H3)1*_&f=IT87Jb6d=!k<^oj?Lb2i%U0m!SsjC$B*y$^!&f` zaRt6Ki?+MU8IN*#wkH&xzVWGE-OZCjSl&ieeBCV$F{M-Oc}*{^dGZ&sHZpxPX*%(J z!;^nPQAK~HKZGsQoHDmh&0Kgk+YEof!j%oC^32NeY&8o_bOh(hMXmLjQ&`F2tW_KE zZLY*b9r5-{ivpq~yxt!U-_PWzGvy!CQhTSD+XH@mUEp<h-;TphC~n L)z4*}Q$iB}u>j&; literal 0 HcmV?d00001 diff --git a/index.html b/index.html index 5fc27cc..6c00e19 100644 --- a/index.html +++ b/index.html @@ -20,16 +20,20 @@ 'jquery': '//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min', 'monster.js': 'js/Monster.js', 'hero.js': 'js/Hero.js', - 'game.js': 'js/game.js' + 'game.js': 'js/Game.js', + 'level.js': 'js/Level.js' } });