OadT

You indeed call your function (you use the () operator!) This would be needed when your function returns an callback! MusicArray[index].addEventListener( "canplaythrough", MusicLoaded );This is the right way, but you still need to pass index in any way to the function MusicArray[index].addEventListener( "canplaythrough", MusicLoaded.bind(window, index) } );Well, I am quite a fan of bind, because its the easiest solution You can also use closures, however, keep in mind the following is wrong: MusicArray[index].addEventListener( "canplaythrough", function(){ MusicLoaded(index) } );This is because variables in javascript are blockscoped, so when the callback gets invoked index is equal to the NumberOfMusics, because index gets still increased

You call your onKeyDown/Up functions as methods of the document-object, so the this inside them will refer to the document object (document.left is true, but not controler.left) So simply reply replace line 2 and 3 with: document.onkeydown = this.onKeyDown.bind(this);document.onkeyup = this.onKeyUp.bind(this);The bind-method simply ensures this refers to your instance. I would also recommend to use window.addEventListener, because if you want to use multiple instances of Controller later you get into trouble, because the instances override document.onkeydown window.addEventListener("keydown", this.onKeyDown.bind(this), false);window.addEventListener("keyup", this.onKeyUp.bind(this), false);I would recommend to read some articles about "this" in javascript, so you know exactly what this all means In javascript "this" is not defined by declaring a function, but by the way you invoke a function.

Please make a jsfiddle of the whole thing I see there can be many different problems: 1) I think in setInterval the right time is 1000 instead of 500 (twice as much as in setTimeout in updateAnimation) 2) I think the variable mosquito in you updateAnimation function reference to the wrong object (I think it reference to the last mosquito of your array) Anyway, for me it's a odd style. I would suggest to simply get the current time and get the state by the time if(Date.now() % 1000 < 500) { //state 1} else { //state 2}This is also not the best style, but for your problem it's a easy solution. If you want to create more advanced animations later read some articles

Hello, Your MoveBlock method gets correctly called (2 times for every instance). The problem is that this inside the function is set to the window object and not your player object! I recommend to read articles about this, simply google something like "javascript function context" Here is a quick fix: window.addEventListener("keydown", this.moveBlock.bind(this));The bind method returns the moveBock function with a fixed this (In this case your Player Object)

Simply remove the "Update"-Call from the "Game"-function. if you call the update-function inside the game-function the parameter e is undefined inside the update-function. You already added an event-listener to call the update-function when the event keyup is fired

Here is the right topic for you http://www.html5gamedevs.com/topic/368-learning-to-write-good-javascript-resources-for-beginners/

Yep, srry for the confusion. I didn't mean setTimeout a real solution, I just wanted to show it as kind of "waiting" until theres nothing to do. It of course just works in cases where the function didn't effect the following code. I will edit my post to make it clear. Again srry

<edit> It's possible per setTimeout but it's a dirty hack, so it's just for demonstration to show that the start function will work later</edit> function Class(setup) { this.test = "Hello!"; this.start = setup; (function(that){ window.setTimeout(function(){that.start()},1) })(this)}var instance = new Class(setup);//instance.start();function setup() { console.log(instance.test);}Solution: create an object inside the function: function Class(setup) { var obj = {} obj.test = "Hello!"; obj.start = setup; obj.start(); //<= New! return obj}var instance = new Class(setup);function setup() { console.log(this.test);} But here you need to write your setup function with this.

Sure it's quite simple, just imagine following: Your loop-function needs 10ms to execute and you want it to run every 20ms. If you call setTimeout at the end of the function the function will start just every 30ms, because after you call the loop-function it will calculate for 10ms and after its finished it will call setTimeout (needs further 20ms). If you call setTimeout at the beginning the browser plans to start the loop 20ms later again and will calculate the function finish Didn't help you now, but now you are enlightened

Well, requestAnimationFrame is a kind of "smooth" update If you want to avoid problems caused by variations in update speed you need to make your game logic fps independent, even with setTimeout. Little tipp btw: call setTimeout at the beginning at your loop function (maybe you already know it, I just want to make sure )

Srry, I think there was a problem with my browser. I tested the game even on different days and it never worked, but today... it works Or did you changed anything? Of course minimal ui is ignored, my fault But the demo looks nice, I will play the full version later

I get an error while the game is loading The key "minimal-ui" is not recognized and ignored. fullscreen.html:1 I'm using Opera 20 on Windows 7 (64 bit)

An idea of me: Scale your canvas via css like BdR mentioned. So use the doubled value for the width and heigth property of the canvas as in CSS. Then scale the Context of the canvas via ctx.scale(2,2) If you draw an image normal there should be no difference (else set imagesmoothingenabled false) and if you scale an image down it might have a better quality hope it helps

If you want to see how you can implement inheritance in JS I can also recommend this site. But as d13 already mentioned it's different from object orientated languages, so be careful. @d13 Is there a reason why you didn't use the new invocation? like: function Monster (numberOfLegs) { this.eyes = 10; this.legs = numberOfLegs this.sayHello = function() { console.log("Hello!"); }};var sprite = new Monster(7); //creates Monster with 10 eyes and 7 legs I just want to know if there is anything bad at this code

Ugly solution for B: .selectpeg:before{ background: white; content: ""; width: 16px; height: 6px; position: absolute; transform: translate(75%, -133%); -webkit-transform: translate(75%, -133%);}Runs in (the latest Versions of) Firefox, Chrome, Opera and Explorer. Just change the class for your needs

Congratulation for finishing your first game to the difficult: I think you should make the prizes and wood per second at the beginning higher. You get a axe very fast, but it will not help you very much at the beginning. But it's just a suggest the hippies are a great idea btw, because this way the player will not run their computers over night

Well, i'm no expert in this topic, but did you already checked out the Nintendo web framework? With this framework it should be possible to access the joystick. Gamepad control seems not to be supported (http://html5test.com/compare/browser/nintendowiiu-4.html), so I think the framework is the only way.

The code at html5rocks.com works fine by me, did you test the code at this side: http://www.html5rocks.com/en/tutorials/device/orientation/deviceorientationsample.html what phone did you use? Edit: I think I found the mistake: the last line of the script should be in the function deviceOrientationHandler I hope it helps, I currently couldn't test the code

I'm 17 years and 5 months

I think the idea with the CSS background has a better performance and if you think it's easier to code, why not? But instead of a background image you may could use 2 different canvas. One as main canvas and the other as bg canvas. I see some developer doing this and I think it's a nicer style as the CSS property. Just put them on the same position via CSS and make the main canvas transparent. For the rectangle collision you may could do a little test. Create a little programm where you spawn many rects randomly and check how long it takes to check the collisions.

If you use JS maybe take a look at this site, I hope its what you are looking for

Can't you select your white places with the magic wand in paint.net or gimp and delete the space? if you have spaces with not full transparent may try in gimp color to transparent (color -> color to transparent) but this tool may not effect exactly what you want, i would just use it at edges to transparent Edit: you can also use select by color ( http://docs.gimp.org/en/gimp-tool-by-color-select.html )

You can paint your image on a canvas and use getImageData to get the single pixels, for examle: var can = document.getElementById("canvas");var con = can.getContext("2d");con.drawImage("map.png", 0, 0);var data = con.getImageData(0, 0, 20, 20);r = data.data[0];//value of red in first pixel (between 0 and 255)g = data.data[1];//value of green in first pixelb = data.data[2];//value of blue in first pixelalpha = data.data[3];//transparent of first pixelso with a for-loop you can read all pixels of your map and convert them to an object in your world or whatever you want

Nice game, I play it now on chrome with mouse lock and it's really better than on opera without mouse lock Maybe you can make it more interesting with a fog in higher levels or maybe change the texture of the terrain in some levels. Or add an boss fight with a pink dino Just some ideas, for me it's still interesting, but I get these Ideas when I played the game the first time

I get to the surface after 3 times Now my arm hurts but I'm happy