코딩중 코딩중 - 3 years ago 191
HTML Question

HTML5 JavaScript image output

[Using Google Translator]
Hello, I am writing for the first time.

I followed the examples in the book in order.

This book progresses from <1.html> to <22.html> in small increments.

The image should be output from the execution result of <10.html>.




[problem]

<9.html>, even though the word "Enter to Start" was printed normally.

However, <10.html> suddenly does not pop up anything. There seems to be a problem with the image call.

Is there a problem with function setImage ()?




[Additional]


  1. The images are in the same folder.

  2. The image and code have the same name.

  3. There was a problem with some functions added in <10.html>.

  4. Debugging on a site called "html5 validator nu" has no errors.
    (← I excluded points(.) to avoid links)


    • Added functions in <10.html>:



    function drawAll ()

    function stopGame ()

    function drawPlayer ()

    function drawBk ()



enter image description here

<!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:

Answer Source

remove Error console Screenshot

console function drawAll() error

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download