https://heekim0719.tistory.com/58
위 링크의 코드를 보고 슈팅게임 코드를 돌려보려 했는데 작동이 안 됩니다. script src="js/jquery-3.2.0.js" 때문인 것 같은데 어떻게 수정해야 할지 모르겠습니다.
도와주세요! ㅠㅠ
<!DOCTYPE html>
<html lang="en">
<head>
<body>
<meta charset="UTF-8">
<title>햄스터 슈팅게임</title>
<h3>햄스터 슈팅게임</h3>
<canvas id="myCanvas" width="500" height="800"></canvas>
<script>
//햄스터가 해바라기씨를 쏘는 게임. 고양이 발에 맞으면 HP 감소.
var canvas=document.querySelector("#myCanvas");
var context=canvas.getContext("2d");
var bg1Y=0;
var bg2Y=-800; //배경이미지 Y좌표
var count=0;
var unitIndex=0;
var unitX=250;
var unitY=700;
var bgImg=new Image(); //배경이미지
bgimg.src="Project/background.png";
var unitImg=new Image();//햄스터 이미지
unitImg.src="Project/hamster.png";
var atkImg=new Image();//해바라기씨 이미지
atkImg.src="Project/seed2.png";
var atkList=[];
var enemyImg1=new Image();//적(고양이발) 이미지
var enemyImg2=new Image();
var enemyImg3=new Image();
enemyImg1.src="Project/attack1.png";
enemyImg2.src="Project/attack2.png";
enemyImg3.src="Project/attack3.png";
var enemyImgs = [enemyImg3, enemyImg2, enemyImg1]
var enemyList=[];
var score=0;
context.font="bold 20px sans-serif";
context.fillStyle="black";
var intervalId = setInterval(function(){
count++;
context.drawImage(bgImg, 0, bg1Y, 500, 800);
context.drawImage(bgImg, 0, bg2Y, 500, 800);
context.fillText("SCORE : "+score, 5, 20);
for(var i=0; i<enemyList.length;i++){
var temp=enemyList[i];
context.drawImage(enemyImgs[temp.type], temp.x-50, temp.y-50, 100, 100);
}
for(var i=0; i<atkList.length;i++){
var temp=atkList[i];
context.drawImage(atkImg, temp.x-40, temp.y-40, 80, 80);
}
context.drawImage(unitImg, unitX-50, unitY-50, 100, 100);
backScroll();
unitAnimation();
makeatk();
moveatk();
checkatk();
makeEnemy();
moveEnemy();
checkEnemy();
checkatkCollision();
checkUnitCollision();
}, 20);
function checkUnitCollision(){
for(var i=0; i<enemyList.length;i++)
{
var temp=enemyList[i];
var UnitDie = unitX > temp.x-50 && unitX < temp.x+50 && unitY > temp.y-50 && unitY < temp.y+50;
if(UnitDie){
clearInterval(intervalId);
}
}
}
function checkatkCollision(){
for(var i=0; i<atkList.length;i++)
{
var atk=atkList[i];
for(var j=0;j<enemyList.length;j++){
var enemy=enemyList[j];
var Shooted = atk.x > enemy.x-50 && atk.x < enemy.x+50 && atk.y > enemy.y-50 && atk.y > enemy.y+50;
if(Shooted){
atk.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;
}
else if(enemy.type==3){
score += 30;
}
}
}
}
if(UnitDie){
clearInterval(intervalId);
}
}
}
function makeEnemy(){
var ranNum = Math.random()*200;
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=50;
}
else if (result==1){
obj.energy=100;
}
obj.isDead=false;
enemyList.push(obj);
}
}
function moveEnemy(){
for(var i=0; i<enemyList.length;i++){
var temp=enemyList[i];
temp.y=temp.y+5;
if(temp.y>=840){
temp.isDead=true;
}
}
}
function checkEnemy(){
for(var i=enemyList.length-1;i>=0;i--){
var temp=enemyList[i];
if(temp.isDead){
enemyList.splice(i, 1);
}
}
}
$("#myCanvas").on("mouseMove", function(e){
unitX=e.offsetX;
});
function makeatk(){
if(count%3!=0){
return;
}
var obj={};
obj.x=unitX;
obj.y=unitY;
obj.isDead=false;
atkList.push(obj);
}
function moveatk(){
for (var i=0;i<atkList.length;i++){
var temp=atkList[i];
temp.y=temp.y-10;
if(temp.y<= -40){
temp.isDead=true;
}
}
}
function checkatk(){
for(var i=atkList.length-1;i>=0;i--){
var temp = atkList[i];
if(temp.isDead){
atkList.splice(i, 1);
}
}
}
function unitAnimation(){
if(count%8 !=0){
return;
}
unitIndex++;
if(unitIndex==2){
unitIndex=0;
}
}
function backScroll(){
bg1Y +=5;
bg2Y +=5;
if(bg1Y >= 800){
bg1Y = -800;
bg2Y = 0;
}
if(bg2Y>= 800){
bg2Y = -800;
bg1Y = 0;
}
}
</script>
</head>
</body>
</html>