2009-06-12 2 views
7

자바 스크립트 타워 방어를 프로그래밍하기 시작했습니다. 지금까지 저는 궤적을 통해 부하들의 움직임을 보았습니다. 하지만 큰 문제가있어 갑자기 2 초 동안 게임이 멈 춥니 다. 나는 가비지 컬렉터가 그 일을하고있는 것 같아요. 어떻게하면이 문제를 해결할 수 있을지에 대한 아이디어가 게임에 요소를 더 많이 추가 할 계획을 세우고 코딩을 계속하기를 원하지 않기 때문에 매우 좋을 것입니다. 이 완벽하게 흐르는!자바 스크립트 게임; 속도를 늦추고 얼리십시오! 그것을 해결하는 방법?

코드는 매우 간단합니다. particuar 시간 값에, 당신은 위쪽 및 왼쪽 위치를 설정하려고하면

<html> 
<head> 
    <style> 
     #game{ 
      background:red; 
      width:500px;    
      height:500px;   
      position:relative;   
     } 
     .mostro { 
      background:black; 
      width:15px;   
      height:15px;    
      position:absolute;   
     } 
    </style> 
</head> 
<body> 
<div id="game"> 
<script type="text/javascript"> 
waypoint_x = [40, 140, 140, 220, 220, 80, 80, 340, 340, 420, 420]; 
waypoint_y = [140, 140, 60, 60, 240, 240, 320, 320, 100, 100, -20]; 
delay = 25; 
new_monster = 0; 
monsters_placed = 0; 
monsters = []; 
var d = new Date(); 
dist_x = 0; 
dist_y = 0; 
angle = 0; 
mostro=""; 
total_monsters = 5; 
function runGame() { 
    if (monsters_placed<total_monsters) { 
     new_monster++; 
    } 
    if (new_monster == delay) { 
     new_monster = 0; 
     document.getElementById("game").innerHTML = document.getElementById("game").innerHTML + '<div class="mostro" id="mostro-'+monsters_placed+'"></div>'; 
     monsters_placed++; 
    } 
    for (i=0;i<monsters_placed;i=i+1) { 
      mostro = monsters[i]; 
      dist_x = waypoint_x[mostro.point_to_reach] - mostro._x; 
      dist_y = waypoint_y[mostro.point_to_reach] - mostro._y; 
      if ((Math.abs(dist_x) + Math.abs(dist_y)) < 1) { 
       monsters[i].point_to_reach++; 
      } 
      angle = Math.atan2(dist_y, dist_x); 
      mostro._x = mostro._x + mostro.speed * Math.cos(angle); 
      mostro._y = mostro._y + mostro.speed * Math.sin(angle); 
      monsters[i]._rotation = angle/Math.PI*180-90  
     document.getElementById("mostro-"+i).style.left = Math.ceil(mostro._x) + "px"; 
     document.getElementById("mostro-"+i).style.top = Math.ceil(mostro._y) + "px"; 
    } 
} 

function setUpGame(){ 
    for(i=0;i<=total_monsters;i++){ 
     monsters[i] = new Object(); 
     monsters[i].point_to_reach = 0; 
     monsters[i].speed = 1; 
     monsters[i]._x = 0; 
     monsters[i]._y = 0; 
    } 
} 
setUpGame(); 
setInterval(runGame,10); 
</script> 
</body> 
</html> 
+0

간격을 30과 같이 늘리려고 했습니까? – cloudhead

+0

예. 1000 초 간격으로도 발생합니다. – DFectuoso

답변

2

아니고 가비지 컬렉터가 일을하고 있지만, 코드에서 : 당신은 여기 코드는 밖으로 here

를 확인하실 수 있습니다 당신은 숫자가 아닌 숫자로 설정하려고합니다. 그래서 코드가 깨져서 ....

나는 이것이 움직이는 div가 빨간색 배경을 가진 컨테이너의 상단을 가로지를 때 발생한다고 생각합니다.

+0

배경을 종료하기 전에 나타납니다. 왼쪽 및 오른쪽 선언에서 소수점을 더 생각했습니다. 내가 그것을 체크하자. – DFectuoso

+0

게임은 아주 좋은 .... – rahul

+0

또한 IE7에서 이것을 확인하십시오. 스크립트 오류가 발생합니다. – rahul

2

네, 맞습니다. 너무 많은 몬스터가있을 경우 수행해야 할 위치 업데이트가 너무 많아서 지연됩니다. 이로 인해 "다시 그리기"지연이 발생합니다.

각 괴물마다 DOM 요소가있는 것을 볼 수 있습니다 (이 경우). 그러나, 당신은 자신의 위치를 ​​하나씩 업데이트하고 있습니다.

<div id='monster-container'> 
    <div id='monstser-1'></div> 
    <div id='monstser-2'></div> 
    <div id='monstser-3'></div> 
</div> 

그래서 '# 괴물 컨테이너'괴물의 위치를 ​​업데이트 한꺼번에 자신의 위치를 ​​업데이트하는 것이 될 것이다, 첫째로 더 나은 stategy를

:

팁이 지연을 줄이기 위해 움직임. 이렇게하면 다시 그리는 시간을 최소화 할 수 있습니다. 내가 말하는 것은 게임에 대한 원시적 인 이해에서 비롯된 것입니다. 몬스터의 경로에 따라이 접근 방식을 수정해야 할 수도 있습니다. 내 접근 방식은 몬스터가 직선으로 만 움직이는 경우에만 직접 작동합니다.

  • 두 번째로, img 's를 괴물에 사용하는 경우 div 's를 사용하고 이미지를 div의 배경으로 설정하십시오. 이것은 내 애완 동물 게임의 많은 redraw 성능을 제공합니다.

  • 셋째, 괴물에 개별 이미지를 사용하는 경우 합성 이미지와 CSS 스프라이트를 사용하는 것이 좋습니다.

게임과 함께 행운을 빈다. 건배!!

jrh

+0

예; 하지만 내가 필요로하는 방식대로 게임을 하나씩 옮겨야합니다. 그 밖의 팁 tho에 감사드립니다! – DFectuoso

+0

은 쉽게 수행 할 수 있습니다. 컨테이너 div와 관련하여 이동하십시오! 전에 실제로 직면했습니다 ... 집중적 인 게임을 실제로 만들고 싶다면 을 사용하십시오. 정말로 divs와 imgs를 움직이는 것은 단지 당신을 그렇게 얻을 것입니다. – jrharshath

+0

그게 좋은 생각이야 ... hummm hummm – DFectuoso

1

예, 확실히 가비지 수집기입니다. 나는 JavaScript 게임을 직접 개발하고 있으며 지난 며칠 동안이 문제를 없애기 위해 노력했다. 지금까지는 불가능하다고 말할 수 있습니다.

그러나 다른 브라우저에는 다른 가비지 수집기가 있으며 예를 들어 Safari 4에서는 예제가 완벽하게 원활하게 실행됩니다.수하는 데 필요한 변수가없는 그 때문에 심지어 예에 솔직히 Reducing freezing with Object Pooling

, 내가 생각하기에,이 문서에서 설명하는 기술은 매우 도움이되지 않습니다 :

그리고 여기에이 주제에 흥미있는 링크입니다 냉동, 정말 눈에 띄는입니다.

또한 전역 변수가 성능을 저하시키는 지 테스트하기 위해 예제를 다시 작성했습니다. You can see the difference yourself

+0

문제가 해결되지 않아 답변을 올바르게 선택하지 않았지만 귀하의 답변이 잘못되었습니다. 남자!, 좋은 대답, 좋은 내용, 문제의 이해와 확실히 유용 !!! – DFectuoso

관련 문제