PAEz

Far from perfect but in Codepen you can access a resource in another pen... https://blog.codepen.io/2013/05/28/new-feature-use-pens-as-external-resources/ ..not perfect but good enough some times....still love plnkr

Awesome, loved it. Can you put stuff in the buildings or something on the side occasionally because there was never a reason to shot left or right,.

Just dont forget your password to Gio's site or you'll never get in again. @Gio Thats just a sarcastic dig at the fact you dont have a forgotten password link on your site.

Yep... plnkr.co ...its rather good to (love the error hinting), being using it alot lately.

Incase you missed it what you need to know is Scope and Closures, this is really important js fundamentals. Heres a few links on the subject that looked ok.... http://doctrina.org/JavaScript:Why-Understanding-Scope-And-Closures-Matter.html http://ryanmorr.com/understanding-scope-and-context-in-javascript/ http://speakingjs.com/es5/ch01.html#basic_var_scope_and_closures

I cant draw or anything so not the best to review your work but I found that to be very informative and very concise. Anyone new to doing this kinda thing would find this very helpful, well done. Thanks for adding the assets.

That looks great and I really appreciate you taking the time to write it up instead of doing a youtube clip. One thing though, tomorrow I want to do this (as I aint done PS in ages) and Id really like the original asset you used so I don't have to recreate it. Its always good if we can follow the tut using the same stuff as in the tut so we can compare if were doing it right. Sorry if its in there somewhere (Ill admit I haven't read it in its entirety yet) and I just didn't notice it.

@Rudy But for much less time than they would if they didnt cheat. Plus from a couple of people I know....If they can cheat their appreciation of the game will drop. I thnk this because of my bro in law. He use to cheat on EVERYTHING! I use to spend alot of time making cheats for him on the original xbox. Then 360 came out and he couldnt cheat anymore....Hes the one that told me that since not being able to cheat he actually enjoyed playing games more. Why? Who knows exactly. But personally I think its because hes pushed through the frustration of loosing and learnt that joy full feeling of being a true winner. Its the pain followed by the completion that truly makes you feel.

In the future if all you want to know is if the json is valid then run it through this.... http://jsonlint.com/ ....I forgot all about that before. Me, I just put it in an editor and use jsbeautify to restructure it and then youll see the errors real quick.

Thats cool. I dont know why but that reminded me of...um...ghost writers?...meh, I cant remember what their called but you might remember. Remember those things where you typed stuff and it recorded all of it (cursor movements, corrections, woteva) and then played it back at the same speed (thinking c64 here).....use to love those things.

No idea bout ya system or what not, but that json is broken, here it is fixed..... { "frames": [{ "frame": { "x": 2, "y": 0, "w": 1920, "h": 1080 } }, { "frame": { "x": 1924, "y": 0, "w": 144, "h": 90 } } ]}....can you spot your two errors? But then, why bother with the "frame"?...... { "frames": [{ "x": 2, "y": 0, "w": 1920, "h": 1080 }, { "x": 1924, "y": 0, "w": 144, "h": 90 } ]}

If your using the canvas then chances are that your going to be redrawing it every frame anywayz, so you need to reprint your text every frame anywayz. I guess you'd just have an object that stores what text/where/how and every frame you just draw what ever is there. Then you can just change what ever is there. Overlaying it with divs might seem like a good idea, but (without any tests) Id say its a bad idea. You might make it easier for you to do updates or whatever, but Id be surprised if it was the most efficient way of doing it. Itll prolly cause repaints and what not (you could avoid most of that tho if you do all of your updates in a requestFrame) and from what Ive seen canvas works best when its the only thing on the page. OH, and third party packages are written in pure JS aswell

if (this.cursors.left.isDown){ this.player.body.velocity.x = -100; this.player.animations.play('left'); }else if(this.cursors.right.isDown){ this.player.body.velocity.x = 100; this.player.animations.play('right'); }else if(this.cursors.up.isDown && this.cursors.left.isDown){ this.player.animations.play('cast-large-right'); }else if(this.key_c.isDown){ this.player.animations.play('cast-large-left'); }else{ this.player.animations.stop(); this.player.frame = 78; } With that code if the left key is down the rest doesnt get checked including..... }else if(this.cursors.up.isDown && this.cursors.left.isDown){ ...and..... }else if(this.key_c.isDown){ ...."else" is your problem EDIT : I think you want something like this..... if (this.cursors.left.isDown) { this.player.body.velocity.x = -100; this.player.animations.play('left'); } else if (this.cursors.right.isDown) { this.player.body.velocity.x = 100; this.player.animations.play('right'); } else { this.player.animations.stop(); this.player.frame = 78; } if (this.key_c.isDown) { if (this.cursors.right.isDown) this.player.animations.play('cast-large-right'); else if (this.cursors.left.isDown) this.player.animations.play('cast-large-left'); // else shoot in the direction their facing }

Im not going to answer this but just wanted to say.... Your getting into the realms of "code this for me"....I hate that crap. If you want people to try and "fix" your code, not "write" it, then show us some code!!!! Create a simple example in JsBin or CodeIo of woteva and then people like me would be perfectly happy to fix it. @XekeDeath : Love the sig Got a mate who created a career as a coder using that advice....being an Aussie I wonder if he taught you

I dont really know CreateJS so I gotta ask, wheres textures in CreateJS? I had a quick look and saw no mention of textures anywhere, if you mean bitmap or spritesheet you should say so. Maybe you should ask at their place... http://community.createjs.com/discussions/easeljs

I wouldnt have a clue, but maybe you should state what for?....webgl, phaser, pixi, woteva....I know that webgl textures have to be unless you set something or other (I really dont know).

@David : Hey, thats cool....another thing I hadnt seen lately. Just out of interest I put that through jsperf..... http://jsperf.com/math-floor-vs-math-round-vs-parseint/126 ....dont ya just hate results like that? Nice to see IE still sucks.....really? a function call is faster than a bitwise operation?.....ok.....

@Vaughan Sometimes its just a case of not making it too easy. Once it becomes general knowledge that games store things in local storage and all the kid needs to do is go to the web inspector and have a look, it all gets too easy. So even if its really weak as hell at least its going to take looking in the code to cheat and not just local storage. For instance, which one of these is easier to cheat with?..... {lives:3} ....or... ÅÌ And thats using one of the oldest, weakest methods there is ...... function dyslexia(string){return String.fromCharCode.apply(this,string.split('').map(function(a){return a.charCodeAt()^255;}))} var a = "{lives:3}"; var z = dyslexia(a); a == dyslexia(z); PS. I dont think that function would work right with unicode stuff (couldnt be bothered checking), if thats the case just btoa it first and in your ascii land.

I know this is old but it really bugs me that no one gave you any advice at all. So even though Im really not the one to answer this, heres my 2c worth.... For drawing HTML has the lovely canvas which can do what you want. But, if you want more control and options you should look at something like paper.js or fabric.js. Either of these libraries will make it easier to draw and update, plus give you alot more options for the future, like interactivity (allow the user to put the mouse over a circle and get stats or woteva). Your in JS land now, you should be looking at JSON. Both the methods you mention are going to have to be converted to an object/array at some time anyways, so may as well start with that. So itll look something like... [{ "name": "circle-1", "radiusWhenBorn": 5, "radiusWhenMiddle": 100, "radiusWhenDead": 0, "colorYouth": "green", "colorMiddle": "blue", "colorOld": "red", "birthdate": "2014-05-10", "deathdate": "2014-06-10",}, { "name": "circle-2", "radiusWhenBorn": 3, "radiusWhenMiddle": 200, "radiusWhenDead": 0, "colorYouth": "green", "colorMiddle": "blue", "colorOld": "red", "birthdate": "2014-04-10", "deathdate": "2014-06-10",}, { "name": "circle-3", "radiusWhenBorn": 50, "radiusWhenMiddle": 100, "radiusWhenDead": 0, "colorYouth": "green", "colorMiddle": "blue", "colorOld": "red", "birthdate": "2014-05-10", "deathdate": "2014-06-10",}]Then in your code you can do.... var circles = JSON.parse("theabove");...and circles will be a nice array of circle objects. Then later you can stringify (google JSON and then read the MDN link) circles and save it somewhere (look up localStorage for simple stuff and then look at db's). Although for colours you might want to use an array of rgb or hsl values as your going to need them later to interlope between. But if you want to use words theres heaps of colour libraries out there and paper or fabric are most likely to have them. Timing and animation These days you should be looking at requestAnimationFrame for when to update the animation. Date.parse() can convert your dates to milliseconds... https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse ...well Im not completely sure about your format, but that page will tell ya. Date.now() will get the current milliseconds. You'll then have something like a start date for the virtual time and a real start date for now. Then on each requestFrame you record the amount of time since the last frame and convert it to your virtual time system. Itd be easy if you just say something like in virtual time 1 real time unit (milllisecond) equals (I dont know) 1000 milliseconds of virtual time (one second) and adjust accordingly. Then you just figure out where you are in your virtual time, which circles are still alive and what point they are in their life and then lerp the values accordingly. Ohwell, sorry for the late reply, but just incase, hope that helps you get an idea of what to look for.

Its a small thing, but.... for(var i = 0; i < (this.filter().particles || 1); i++) {...will call filter and create an object on every particle created due to the conditional. The conditional is executed every loop. Where as, this..... for (var i = 0,end=this.filter().particles||1; i < end; i++)...will only do it once no matter how many particles it makes.

Have a look at this code. Filter.... { x: Math.random() * 20, particles: 10}Your code.... var filter = this.filter();filter.x = (filter.x + this.x) || this.x;filter.y = (filter.y + this.y) || this.y;filter.maxParticles = filter.maxParticles || 0;if(filter.maxParticles === 0 || filter.maxParticles > this.particles.length) { if(createNewParticles !== false) { for(var i = 0; i < (filter.particles || 1); i++) this.particles.push(new Particle(filter)); }}...all the particles created at that moment will have exactly the same x. My code.... for (var i = 0,end=this.filter().particles||1; i < end; i++){ var filter = this.filter(); filter["x"] = (filter.x + this.x) || this.x; filter["y"] = (filter.y + this.y) || this.y; this.particles.push(new Particle(filter));}...all the particles will have different x values. PS. Thanks for showing me... i < (filter.particles || 1);I hadnt seen that before .....Id prefer to declare it with end, but I like that

Love to see stuff like this in simple form. One thing though, using eval in a particle system is nuts!! Heres why..... http://jsperf.com/evaleval ...and here it is using functions.... http://jsbin.com/poseq/2/edit ...if theres something in that tutorial that lead you to do this then Im sorry, I definately could be wrong, but I couldnt look at the tut as I dont have enough data limit left for the month. Also while Im here, the way your creating new particles is a little off in that if you have set it to make ten particles and if the filter has a random x or woteva then all 10 particles will have the same x and woteva as the first one created and I wouldn't have thought thats what you'd want.... http://jsbin.com/poseq/3/edit

Really good, but no sound is dull.

First up thanks heaps for making me look at this, I just assumed that the object way would be faster aswell coz I come from pascal (I was hopeless at it ) and was taught that allocating and deallocating memory COSTS and strings do it alot. Ive never made a game (still havent even used Phaser yet) but I would have thought that speed would always count, even in the little things. Personally Im a little obsessed with objects in JS, its one of the things that made me love it and yeah I might resort to them too quick sometimes....maybe. I did some tests on a couple of minifiers once and both of them slowed the code down, they might make code smaller but sometimes by turning things into their slower cousins (noticed that one thing they converted too was something I had already been shown as slow, so did the tests). Have no idea about closure. Ive always wondered why people dont use things like the compactor on this page more.... http://jsutility.pjoneil.net/ ...do a safe minify then that gets smaller results anyway. If only there was a mutator that could actually speed things up . Heres another perf that relates..... http://jsperf.com/strings-vs-enums/2 Really I guess it would depend on what hes using this for and how, he didnt really supply enough info to know that.

Have a look at the source for the lessmilk games.... http://www.lessmilk.com/ ....for instance.... http://www.lessmilk.com/4/js/play.js ....from..... http://www.lessmilk.com/4/ He creates playable fun games that have bugger all code to them (thanks to the beauty of Phaser). Try to get to the point that you understand them. Look up anything that doesnt make sense till it does. Ask questions here about anything that gives you real trouble and reference the source so others know where your coming from.