-1
[Google Translatorを使用] こんにちは、私は初めて執筆しています。HTML5 JavaScript画像出力
私はこの本の例を順番に続けました。
この書籍は、<1html>から<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：
