HTML 페이지에서 Javascript 게임 실행

간단한 HTML 캔버스 게임 (link here)을 만드는 방법에 대한 지침서를 읽었습니다. 게임은 자바 스크립트 파일에 저장됩니다. 테스트 방법은 잘 모르겠습니다. 나는 주위를 둘러 보았다 그리고는 HTML 페이지에서 실행해야합니다 것을 발견, 그래서 나는 지금까지 이렇게 썼다 : 내가 기대HTML 페이지에서 Javascript 게임 실행

<html> 
<head> 

<script language="javascript" src="main.js" type="text/javascript"/> 
</script> 

</head> 
<body> 

</body> 
</html>

이가하는 것도. 그러나, 나는 이것을 실행하기 위해 무엇을해야할지 모르겠습니다. 나는 이것에 대한 어떤 의견을 주셔서 감사합니다. 감사

그것은 자바 스크립트 파일의 오류로 내려왔다 * 편집.

//canvas 
var canvas=document.createElement("canvas"); 
var ctx=canvas.getContext("2d"); 
canvas.width=512; 
canvas.height=480; 
document.body.appendChild(canvas); 

//background img 
var bgready=false; 
var bgimage=new Image(); 
bgimage.onload=function(){ 
    bgready=true; 
}; 
bgimage.src="images/bg_space.png"; 
//player img 
var playerready=false; 
var playerimage=new Image(); 
playerimage.onload=function(){ 
    playerready=true; 
}; 
playerimage.src="images/spr_player.png"; 
//enemy img 
var enemyready=false; 
var enemyimage=new Image(); 
enemyimage.onload=function(){ 
    enemyready=true; 
}; 
enemyimage.src="images/spr_enemy1.png"; 

//objects 
var player={ 
    speed:256 
}; 

var enemy={}; 
var kills=0; 

//handle keys 
var keysdown={}; 

addEventListener("keydown",function(e){ 
    keysdown[e.keycode]=true; 
},false); 

addEventListener("keyup",function(e){ 
    delete keysdown[e.keyCode]; 
},false); 

//reset 
var reset=function(){ 
    player.x=canvas.width/2; 
    player.y=canvas.height/2 

    enemy.x=32+(Math.random()*(canvas.width-64)); 
    enemy.y=32+(Math.random()*(canvas.height-64)); 
}; 

//update 
var update=function(modifier){ 
if (38 in keysdown){ 
    player.y-=player.speed*modifier;//up 
} 
if (40 in keysdown){ 
    player.y+=player.speed*modifier;//down 
} 
if (37 in keysdown){ 
    player.x-=player.speed*modifier;//left 
} 
if (39 in keysdown){ 
    player.x+=player.speed*modifier;//right 
} 

if(
    player.x<=(enemy.x+32) 
    && enemy.x<=(player.x+32) 
    && player.y<=(enemy.y+32) 
    && enemy.y<=(player.y+32) 
    ){ 
     ++kills; 
     reset(); 
} 
}; 

//render 
var render=function(){ 
if (bgready){ 
    ctx.drawImage(bgimage,0,0); 
} 

if (playerready){ 
    ctx.drawImage(playerimage,player.x,player.y); 
} 

if (enemyready){ 
    ctx.drawImage(enemyimage,enemy.x,enemy.y); 
} 

//score 
ctx.fillStyle="rgb(250,250,250)"; 
ctx.font="24px Helvetica"; 
ctx.textAlign="left"; 
ctx.textBaseline="top"; 
ctx.fillText("kills: "+kills,32,32); 
}; 

//mainloop 
var main=function(){ 
var now=Date.now(); 
var delta=now-then; 

update(delta/1000); 
render(); 

then=now; 
}; 

//init 
reset(); 
var then=Date.now(); 
setInterval(main,1);

나는 적어도 7 번 지금 내 스크립트와 튜토리얼 스크립트 모두에 걸쳐 검토 한 : 다음은 내 코드입니다. 나는 이미지를 잘못로드하고있는 것을 발견했지만 이제는 이미지를 표시합니다. 나는 플레이어를 전혀 움직일 수 없다.

출처

2013-05-25 Jeremy Darrach

은'main.js'입니다. https://github.com/lostdecade/simple_canvas_game/blob/master/js/game.js? –

그게 전부입니다 페이지가로드됩니다. – tymeJV

태그와 git rid of language = "javascript"속성 사이에 넣으십시오. – Steven

-1

문제는 HTML 코드에있는 것 같습니다.

<script type="text/javascript" src="main.js"></script>

을 또는 그 그것을 해결하지 않는 경우, 바로 </body> 태그 후 <script> 태그를 만들고, 거기에 모든 코드를 붙여 넣습니다 나는 올바른 구문 될 것이라고 확신합니다.

출처

2014-02-11 02:47:20 user2921024

이것이 더 정확한 구문이지만 실제로 OP가 스스로 해결 한 문제는 실제로 해결되지 않습니다 (편집 참조). – Vitruvius

HTML 페이지에서 Javascript 게임 실행

답변

관련 문제