를 보고 해당 코드를 작성하였습니다. 파일, 오디오, 이미지, jqery까지 모두 제대로 하였으나 캔버스만 뜹니다. 코드에 문제가 있나요? 아래는 위의 블로그를 보고 따라서 친 제 코드입니다.
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="css/style.css">
<title>ShootingGame.html</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="800"></canvas>
<script src = "js/jquery-3.2.0.js"></script>
<script>
var canvas = document.querySelector("#myCanvas")
var context = canvas.getContext("2d");
var back1Y = 0;
var back2Y = -800;
var backImg = new Image();
backImg.src = "images/backbg.png";
var unitImg1 = new Image();
var unitImg2 = new Image();
unitImg1.src = "images/unit1.png";
unitImg2.src = "images/unit2.png";
var unitImgs = [unitImg1,unitImg2];
var unitX = 250;
var unitY = 700;
var unitIndex = 0;
var count = 0;
var missImg = new Image();
missImg.src = "images/mi1.png";
var missList[];
var enemyImg1 = new Image();
var enemyImg2 = new Image();
enemyImg1.src = "images/juck1.png";
enemyImg2.src = "images/juck2.png";
var enemyImgs = [enemyImg2,enemyImg1];
var enemyList = [];
var score = 0;
context.font = "bold 20px sans-serif";
context.fillStyle = "black";
var shootSound = new Audio("sounds/shoot1.wav");
var dieSount = new Audio("sounds/birddie.wav");
var intervalId = setInterval(function(){
count++;
context.drawImage(backImg, 0, back1Y,500,800);
context.drawImage(backImg, 0, back2Y,500,800);
context.fillText("SCORE:"+score, 5, 20);
for(var i = 0; i<missList.length; i++)
{
var tmp = missList[i];
context.drawImage(missImg, tmp.x-40,tmp.y-40,80,80);
}
for(var i = 0; i<missList.length; i++)
{
var tmp = enemyList[i];
context.drawImage(enemyImgs[tmp.type],
tmp.x-50,tmp.y-50,100,100);
}
context.drawImage(unitImgs[unitIndex], unitX-50,unitY-50,100,100);
backScroll();
unitAnimation();
makeMissile();
moveMissile();
checkMissile();
makeEnemy();
moveEnemy();
checkEnemy();
checkMissCollusion();
checkUnitCollusion();
}, 20);
function checkUnitCollusion()
{
for(var i = 0; i<missList.length; i++)
{
var tmp = enemyList[i];
var isUnitDie = unitX > tmp.x-50 &&
unitX < tmp.x+50 &&
unitY > tmp.y-50 &&
unitY < tmp.y+50;
if(isUnitDie)
{
die.Sound.play();
clearInterval(intervalId);
}
}
}
function checkMissCollusion()
{
for(var i = 0; i<missList.length; i++)
{
var miss = missList[i];
for(var j = 0; j<missList.length; j++)
{
var enemy = enemyList[j];
var isShooted = miss.x > enemy.x-50 &&
miss.x < enemy.x+50 &&
miss.y > enemy.y-50 &&
miss.y < enemy.y+50;
if(isShooted)
{
shootSound.currentTime = 0;
shootSound.play();
miss.isDead = true;
enemy.energy -= 50;
if(enemy.energy <=0)
{
enemy.isDead = true;
if(enemy.type == 0)
{
score +=10;
}
else if(enemy.type == 1)
{
score+=20;
}
}
}
}
}
}
function makeEnemy()
{
var ranNum = Math.random()*100;
var result = Math.floor(ranNum);
if(result != 10)
{
return;
}
var enemyX = [50,150,250,350,450];
for(var i=0; i<5; i++)
{
obj={};
obj.x=enemyX[i];
obj.y =-50;
var result = Math.floor(Math.random()*2);
obj.type=result;
if(result==0)
{
obj.energy=100;
}
else if(result==1)
{
obj.energy = 150;
}
obj.isDead = false;
enemyList.push(obj);
}
}
function moveEnemy()
{
for(var i=0; i<enemyList.length;i++)
{
var tmp=enemyList[i];
tmp.y = tmp.y+5;
if(tmp.y>=840)
{
tmp.isDead = true;
}
}
}
function checkEnemy()
{
for(var i=enemyList.length-1; i >=0; i--)
{
var tmp = enemyList[i];
if(tmp.isDead)
{
enemyList.splice(i, 1);
}
}
}
$("#myCanvas").on("mousemove",function(e){
unitX = e.offsetX;
});
function makeMissile()
{
if(count%5 !=0){
return;
}
var obj = {};
obj.x = unitX;
obj.y = unitY;
obj.isDead = false;
missList.push(obj);
}
function moveMissile()
{
for(var i=0; i<missList.length; i++)
{
var tmp = missList[i];
tmp.y = tmp.y-10;
if(tmp.y <= -40)
{
tmp.isDead = true;
}
}
}
function checkMissile()
{
for(var i=missList.length-1; i>=0; i--)
{
var tmp = missList[i];
if(tmp.isDead)
{
missList.splice(i,1);
}
}
}
function unitAnimation()
{
if(count%8 != 0)
{
return;
}
unitIndex++;
if(unitIndex==2)
{
unitIndex=0;
}
}
function backScroll()
{
back1Y += 5;
back2Y += 5;
if(back1Y >= 800)
{
back1Y = -800;
back2Y = 0;
}
if(back2Y >= 800)
{
back2Y = -800;
back1Y = 0;
}
}
</script>
</body>
</html>