[드래곤플라이트 만들기]makeEnemy / moveEnemy / checkEnemy

어려웠던 점.1 

//오류 메시지 뜸.
var juck1_01=new Image();
juck1_01="images/juck1_01.png";

setInterval(function(){
			....
	context.drawImage(juck1_01, 0, 15, 100, 100);
    		....
}, 10);

//해결
var juck1_01=new Image();
juck1_01.src="images/juck1_01.png";

setInterval(function(){
			....
	context.drawImage(juck1_01, 0, 15, 100, 100);
    		....
}, 10);

적기 객체를 생성하여 for 반복문을 넣기 전 화면에 출력해보려함.

그러나 

Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)'
    at zzz5.html:88

에러가 뜸. 

 

알고보니 src를 안 적어 줘서 오류 떴던 것임... 혼자 계속 찾을때는 코드 빠진게 눈에 안 보이는데... 다른 사람이 내 코드를 보면 한눈에 문제점을 파악함 다음 부터는 좀 더 주의 해서 봐야겠다.

 

 

어려웠던 점.2

//원하는대로 출력되지 않음
<script>
  //7. 적기 이미지 불러오기
  var juck1_01=new Image();
  juck1_01.src="images/juck1_01.png";

  setInterval(function(){

    //7. 적기 객체 생성
    for(var i=0; i<5; i++){
    var obj={};
    obj.x=50+100*i;
    obj.y=50;
    console.log(i);
    }

    //7. 적기 그리기
    context.drawImage(juck1_01, obj.x, obj.y, 100, 100);
  }, 10);
</script>

//원하는대로 출력됨
<script>
  //7. 적기 이미지 불러오기
  var juck1_01=new Image();
  juck1_01.src="images/juck1_01.png";

  setInterval(function(){

    //7. 적기 객체 생성
    for(var i=0; i<5; i++){
    var obj={};
    obj.x=50+100*i;
    obj.y=50;
    console.log(i);
	//7. 적기 그리기
    context.drawImage(juck1_01, obj.x, obj.y, 100, 100);
    }
  }, 10);
</script>

 

문제

 적기를 한줄에 5마리로 출력하고 싶었음. 그러나

1.  적기의 위치가 원하는 곳에 표기 되지 않았음.
2.  캐릭터가 한마리만 출력됨.

이유

1. 이미지 좌표의 기준의 좌 상단(x:0, y:0)에 캐릭터가 출력된다. 그래서 원하는 만큼 좌표값을 변경해줘야함.
2. 적기를 그리는 위치가 잘 못 되었음.
   
   setInterval 함수는 자동으로 layer를 출력하는 기능이라고 보면됨.
   적기는 layer 한개당 5마리를 그릴 예정이므로 setInterval함수 안에서 for 문으로 그려줘야함.

 

 

어려웠던 점.3

 

문제

적기의 객체를 생성하는 for문에 바로 적기를 그리는 줄 알았는데 그게 아니었음. 

 

원리

layer 1개가 생성될때 for문에 의해 적기 5개가 1줄에 생성된다. 

생성된 각각의 적기 객체들은 enemyList배열에 저장되고

배열에 저장된 객체들을 반복문을 돌면서 그린다 .

 

아직도 이해가 될 듯 말듯 하다.... 한 60%쯤 이해 된듯함... 계속 코드리뷰를 해야할 것 같음.