HTML5 자바 스크립트 이미지 출력

-1

[Google Translator 사용] 안녕하세요, 저는 처음으로 글쓰기를하고 있습니다.HTML5 자바 스크립트 이미지 출력

나는이 책의 예를 순서대로 따른다.

이 책은 <1.html>부터 <22.html>까지 조금씩 증가합니다.

이미지는 < 10.html>의 실행 결과에서 출력되어야합니다.

[문제]

< 9.html>, 단어가 일반적으로 인쇄 된 "시작합니다"비록.

그러나 < 10.html> 갑자기 아무 것도 나타나지 않습니다. 이미지 호출에 문제가있는 것 같습니다.

function setImage()에 문제가 있습니까?

[사용자]

이미지는 동일한 폴더에있다.
이미지와 코드의 이름이 같습니다.
< 10.html>에 추가 된 일부 기능에 문제가있었습니다.
"html5 validator nu"라는 사이트에서의 디버깅에는 오류가 없습니다. 가 (← 나는 점을 제외() 링크를 방지 할 수 있습니다.)
- 추가 기능 10.html> :
기능 drawAll()

기능 stopGame()

함수 drawPlayer()

함수 drawBk()

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"/> 
    <title> 레이싱 게임 </title> 

    <style> 
     body 
     { 
      background-color: #000000; 
      margin: 0px; 
     } 

     canvas 
     { 
      background-color: #0099FF; 
     } 
    </style> 

</head> 

    <body> 
     <canvas id="canvas" width="800" height="600"> </canvas> 


     <script type="text/javascript"> 
     // 캔버스 객체 
     var canvas; 
     var ctx; 
     var canvasBuffer; 
     var bufferCtx; 
     var threadSpeed = 16; 

     // 캐릭터 (일단 잠수함으로 지정) 
     var submarine; 
     var sx, sy, sw = 60, sh = 35; 

     // 배경이미지 
     var background; 

     //장애물 
     var enemy = new Array(); 
     var enemyColor = ["red", "blue", "white"]; 
     var ellapse = 10; 

     // 타이머 인스턴스 
     var loopInstance; 

     // 게임의 상태 
     var STATE_START = false; 
     var STATE_GAMEOVER = false; 

     // 키 상태 
     var keyPressed = []; 

     // 경과 시간 
     var oldTime; 
     var startTime; 
     var totalTime; 

     window.addEventListener("load", initialize, false); 
     window.addEventListener("keydown", getKeyDown, false); 
     window.addEventListener("keyup", getKeyUp, false); 

     function initialize() 
     { 
      canvas = document.getElementById("canvas"); 
      if(canvas == null || canvas.getContext==null) return; 
      ctx = canvas.getContext("2d"); 

      canvasBuffer = document.createElement("canvas"); 
      canvasBuffer.width = canvas.width; 
      canvasBuffer.height = canvas.height; 
      bufferCtx = canvasBuffer.getContext("2d"); 




      // 게임 시작 메시지 
      startMessage(); 

      // 이미지 설정 
      setImage(); 

      // 반복 동작 설정 
      loopInstance = setInterval (update, threadSpeed); 
     } 

     // 주기적으로 반복되는 루틴 
     function update() 
     { 
      if((keyPressed[13] == true) && !STATE_START) // enter 
      { 
       startGame(); 
      } 

      drawAll(); 
     } 

     function drawAll(); 
     { 
      if(!STATE_START) 
      { 
       return; 
      } 

      else if (STATE_GAMEOVER) 
      { 
       stopGame(); 
       drawText(ctx, "Game Over", canvas.width/2, canvas.height/2 - 60, "bold 30px arial", "#ffff00", "center", "top"); 

       drawText(ctx, "Spacebar to Restart", canvas.width/2, canvas.height/2 - 20, "bold 25px arial", "#ffffff", "center", "top"); 
      } 

      else 
      { 
       // 배경 이미지 출력 
       drawBk(); 

       // 잠수함 출력 
       drawPlayer(); 
       ctx.drawImage(canvasBuffer, 0, 0); 
      } 
     } 

     function stopGame() 
     { 
      STATE_START = false; 
     } 

     // 잠수함 유닛 출력 
     function drawPlayer() 
     { 
      bufferCtx.drawImage(submarine, sx-sw/2, sy-sh/2); 
     } 

     // 게임 배경 이미지 출력 
     function drawBk() 
     { 
      bufferCtx.drawImage(background, 0, 0); 
     } 

     function startGame() 
     { 
      // 게임 시작 상태 
      STATE_START = true; 

      // 캐릭터의 초기 위치 
      sx = canvas.width/2 - 18; 
      sy = canvas.height/2 - 18; 
      sw = 60; 
      sh = 35; 
     } 

     function getKeyDown (event) 
     { 
      keyPressed[event.keyCode] = true; 
     } 

     function getKeyUp(event) 
     { 
      keyPressed[event.keyCode] = false; 
     } 

     function setImage() 
     { 
      submarine = new Image(); 
      submarine.src = "C.jpg";  // 보류 

      background = new Image(); 
      background.src = "back.jpg"; // 보류 
     } 

     function startMessage() 
     { 
      drawText(ctx, "Enter to Start", canvas.width/2, canvas.height/2 - 60, "bold 30px arial", "#ffff00", "center", "top"); 
      drawText(ctx, "조작:방향키 ←↑→↓", canvas.width/2, canvas.height/2 - 20, "bold 20px arial", "#ffffff", "center", "top"); 
     } 

     function drawText(ctx, text, x, y, font, color, align, base) 
     { 
      if(font != undefined) ctx.font = font; 
      if(color != undefined) ctx.fillStyle = color; 
      if(align != undefined) ctx.textAlign = align; 
      if(base != undefined) ctx.textBaseline = base; 
      ctx.fillText(text, x, y); 
     } 

     </script> 

    </body> 
</html>

1 :

출처

2017-10-02 HellJosun

콘솔 기능 drawAll() 에러

출처

2017-10-02 06:21:28

HTML5 자바 스크립트 이미지 출력

답변

관련 문제