Witam,
Mam problem, gdyż robie grę w html5 oraz javascript i płynność gry zalezy jakby od mocy komputera (z tego co zaobserwowałem)

Pętla gry wygląda tak:

[PHP] pobierz, plaintext 
if (state)
	gLoop = setTimeout(GameLoop, 1000 / 60);
};
[PHP] pobierz, plaintext 

i w GameLoop dziają różne akcje, jak nasłuchwianie klwiszy, rysowanie i renderowania grafiki itd...
Gdy grę uruchamiam na komputerze, chodzi płynniutko, ale gdy włącze ja (oczywiscie w tej samej przeglądarce) na starym laptopie gra chodzi jakby była na 10 fps'ach.

Da się temu jakoś zapobiec?

Trzeba ją zoptymalizować. Odświeżasz pętle co 16 ms - zdecydowanie możesz dać np. 30, 60 itd.
Nasłuchiwanie klawiszy masz w GameLoop? To nie jest do końca poprawnie.
Pokaż kod to może wyłapie się jakieś większe błędy..

OK, To całe GameLoop wygląda tak

[PHP] pobierz, plaintext 
var GameLoop = function(){
  clear();
  DrawBackground();
  player.draw();
  startBackground();
 
  if(player.isJumping) player.checkJump();
  if(player.isFalling) player.checkFall();
 
  if (Key.isDown(Key.LEFT)) player.moveLeft();
  if (Key.isDown(Key.SPACE)) player.jump();
  if (Key.isDown(Key.RIGHT)) player.moveRight();
 
	platforms.forEach(function(platform, index){
		if (platform.isMoving) {
			if (platform.x < 60) {
				platform.direction = 1;
			} else if (platform.x > width-80- platformWidth) {
				platform.direction = -1;
			}
				platform.x += platform.direction * (index / 2) * ~~(points / 100);				
			}
			if (points > 2){
				platform.y += 1;
				if(platform.y > height){
					var type = ~~(Math.random() *5);
					if(type == 0)
						type = 1;
					else
						type = 0;
 
					 platforms[index] = new Platform((Math.random() * (width -140- platformWidth))+60, platform.y - height, type);
 
				}
			}
		platform.draw();
	});
		checkCollision();
 
	ctx.fillStyle = "Black";
	ctx.fillText("POINTS:" + points, 10, height-10);
 
	if (state)
	{
	  gLoop = setTimeout(GameLoop, 1000 / 60);	
	}
 
	};
[PHP] pobierz, plaintext 

Nasłuchiwanie jest powyżej, tutaj tylko wyłapuję co jest nacisniete.
Ogólnie gra może byc bardzo nawet niezoptymalizowana bo jest to moja pierwsza taka gra w js i w sumie bardziej sie ucze

1. może jest na 10 FPSach? Weź sprawdź ile faktycznie masz klatek na sekundę. To że nastawiłeś na tyle to nic nie znaczy.

2. możesz uniezależnić ruch od FPSów. Mierzysz ile faktycznie upłynęło czasu między obecną klatką a klatką poprzednią a potem wszelki ruch mnożysz przez wartość czasu.

czyli coś jak (pseudokod):


tym sposobem jeśli obiekt ma przemierzyć 600 pikseli (przykładowo) w czasie jednej sekundy, to i tak to zrobi, niezależnie czy będzie 10 czy 60 klatek na sekundę (bez tego przy mniejszych FPSach by wolniej chodził).

Jednak to ci nie powiększy FPSów, a jedynie dokona korekty ruchu. Być może będzie trzeba zrobić jakąś optymalizację, bo może gdzieś masz coś, co ci zamula.
(testuj też w różnych przeglądarkach - ta sama gra na Chrome może szybciej działać niż na Firefoxie).

Słyszałeś o request animation frame?

trueblue
Tak słyszałem i zastosowałem taki kod

[PHP] pobierz, plaintext 
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();
 
(function animloop(){
  requestAnimFrame(animloop);
  GameLoop();
})();
[PHP] pobierz, plaintext 

Otrzymałem efekt wręcz przeciwny, gra tak przyspieszyła aż wydawało sie, że chodzi nienaturalnie jak przyspieszony film w stosunku do starego kodu, więc nie wiem czy to jest dobre?

PrinceOfPersia, dzięki za radę, sprawdzę jak tylko wróce do domu.

I swoją drogą mam kolejne pytanie odnosnie gry, żeby nie towrzyc już nowego wątku.
Czy porpawne jest tworzenie gry na jednym canvasie? ... Obecnie tak mam bo też się spotkałem z takimi grami, ale niektórzy to rozdzielają. Tło na innym, bohater na innym a aktywne elementy otoczenia na innym.
(Pytam bo, chciałem też obrócić obrazek bohatera o 180 stopni i mozliwe jest tylko odwócenie całego canvasa a nie pojedyńczego img = new Image() )

Tak.


Skąd bierzesz takie informacje? W Canvas możesz obracać co tylko chcesz i jak chcesz - obrazki, teksty, figury, linie itd.

markuz, jedyne informacje jakie znalazlem na obrót czegokolwiek w canvasie kończyło sie bledami.
Przewaznie było to:

[PHP] pobierz, plaintext 
ctx.save();
ctx.scale(-1, 1);
ctx.drawImage(....
ctx.restore();
[PHP] pobierz, plaintext 

(ctx = canvas jakby co)

Po tym wszystko mrugało (cała gra, czyli canvas) .. rozjechało sie i dupa blada.

Błąd != Brak rozwiązania

Przykład specjalnie dla Ciebie:
http://jsfiddle.net/ozrjpc5x/
2 obrazki (1 animowany, 2 nie)
http://jsfiddle.net/ozrjpc5x/1/

OK, spróbuje jeszcze raz to zaimplementowac.
Wracając do płynności gry ... to rozwiązanie które podał PrinceOfPersia będzie dobrym rozwiązaniem?

no tak, ale moje rozwiązanie z liczeniem "ile czasu upłynęło" nie rozwiąze ci problemów płynności a jedynie problemy z synchronizacją czasową. Bo bez tego jak będziesz miał 10 klatek na sekundę, postać będzie poruszać się 6 razy wolniej.


Z innych powodów się to czasem rozdziela. coś na zasadzie warstw w Photoshopie się czasem robi. Jeśli tło jest statyczne, to wystarczy raz narysować na warstwie, i nie tracić mocy komputera na rysowanie tła od początku, tylko umieszcza się kilka canvasów żeby rysować tylko te elementy, które się ruszają, a statyczne tło na innym itp.

ale to jest optymalizacja, którą można dokonać, ale technicznie tak samo możesz korzystać z jednego canvasa i na nim wszystko rysować. Przykłady podał markuz.

EDIT:
aha, i możesz zmierzyć co ci zżera kompa. W Dev Toolsach Chrome masz audyty np. "ta i ta funkcja zajmuje ci tyle i tyle czasu".
możesz samemu liczyć też, np. spróbuj wykomentarzować jakiś kod i zobacz czy szybciej działa.itp.