什么'；我的HTML5JavaScript画布游戏代码有什么问题？I'；我是初学者
我是初学者。我试图将代码复制到Notepad++上，并在Chrome上运行它。它无法运行（没有显示任何内容）。请帮忙。我不知道它怎么了 我下面的代码是一个基本的游戏导弹roket老板。在一本书的指导之后，我第一次准备做一个游戏。但我的第一场比赛什么都跑不了。画布上什么也没有画。会是图像的src吗？我用的是Windows10。可能是操作系统还是杀毒软件？我在用McAfee什么'；我的HTML5JavaScript画布游戏代码有什么问题？I'；我是初学者,javascript,html,canvas,Javascript,Html,Canvas,我是初学者。我试图将代码复制到Notepad++上，并在Chrome上运行它。它无法运行（没有显示任何内容）。请帮忙。我不知道它怎么了 我下面的代码是一个基本的游戏导弹roket老板。在一本书的指导之后，我第一次准备做一个游戏。但我的第一场比赛什么都跑不了。画布上什么也没有画。会是图像的src吗？我用的是Windows10。可能是操作系统还是杀毒软件？我在用McAfee 游戏循环 var fps=50；//指定每秒帧速率 var定时=0； var ctxP=document.getEleme
游戏循环
var fps=50；//指定每秒帧速率
var定时=0；
var ctxP=document.getElementById（'myCanvas'）.getContext（'2d'）；
var imgBg1=新图像（）；
var imgBg2=新图像（）；
var imgBg3=新图像（）；
var imgRocket=新图像（）；
var imgBoss=新图像（）；
//敌人1和2
var imgEnemy=新图像（）；
var enemyPos1={x:Math.random（）*320，y:0}；
var enemyPos2={x:Math.random（）*320，y:-100}；
var enemy1=新付款人（0.01,1，enemyPos1.x，enemyPos1.y，50,50）；
var enemy2=新付款人（0.05,2，enemyPos2.x，enemyPos2.y，50,50）；
var keyframeObject=2；
var计数=0；
无功延迟=10；
var-posBossX=170；
var rocketPos={x:220，y:220}；
var-kerocket=1；
setInerval{Update，1000/fps}//函数调用更新函数
var imgMissile=新图像（）//创建导弹变量
var missilePos={enable:false，keyframeObject:1，x:0，y:0}；
//变数牵引导弹
//关键帧1和初始值（0,0）
函数更新（）{
window.addEventListener（'click'，clickReporter，false）；
//单击鼠标时调用函数clickReporter
文件。addEventListener（'keydown'，checkKeyDown，false）；
//按键按下时调用函数clickReporter
文件。添加的监听器（“键控”，检查键控，假）；
//按键打开时调用函数clickReporter
定时+=0.2；
drawBg（定时）；
drawRocket（keyframeRocket、rocketPos.x、rocketPos.y）；
//调用函数来绘制Rocket1
drawBoss（posBossX，0）；
enemyPos1.y++；
enemy1.setY（enemyPos1.y）；
enemy1.draw（）；
enemyPos2.y++；
enemy2.setY（enemyPos2.y）；
enemy2.draw（）；
//在此写入函数
函数drawBg（定时）{
imgBg1.src='images/bg1.png'；//加载bg
imgBg2.src='images/bg2.png'；
imgBg3.src='images/bg3.png'；
ctxP.drawImage（imgBg1,0320-定时/248320,0,0480320）；
ctxP.drawImage（imgBg2,0320-定时，480320,0,0480320）；
ctxP.drawImage（imgBg3,0320-定时*1.5480320,0,0480320）；
}
函数drawRocket（关键帧、posX、posY）{
imgRocket.src='images/rocket.png'；//加载rocket.png
ctxP.drawImage（imgRocket，（（关键帧-1）*100），0100100，posX，posY，50,50）；
}
函数drawBoss（posX、posY）{
imgBoss.src='images/boss.png'；//加载boss.png
ctxP.drawImage（imgBoss、posX、posY）；
}
函数1（关键帧、行、posX、posY）{
imgEnemy1.src='images/敌军.png'；
ctxP.drawImage（imgEnemy1，（（关键帧-1）*50），（（行-1）*50），50,50，posX，posY，50,50）；
}
函数2（关键帧、行、posX、posY）{
imgEnemy2.src='images/敌军.png'；
ctxP.drawImage（imgEnemy2，（（关键帧-1）*50），（（行-1）*50），50,50，posX，posY，50,50）；
}
功能抽屉柜（延迟、行、posX、posY、减宽、减高）{
这个。延迟=延迟；
这个.count=0；
这个.enable=true；
这个。关键帧=1；
this.row=行；
posX=posX；
this.posY=posY；
这个.desWidth=desWidth；
此.desHeight=desHeight；
paurenemy.prototype.setX=函数（posX）{
posX=posX；
}
paurenemy.prototype.setY=函数（posY）{
this.posY=posY；
}
paurenemy.prototype.enable=函数（enable）{
this.enable=enable；
}
draw=function（）{
this.count+=this.delay；
如果（this.count>=1）{
if（this.keyframe==1）{
这个。关键帧=2；
}否则{
这个。关键帧=1；
}
如果（this.count>=1）{this.count=0；}
}
imgEnemy.src='images/敌军.png'；
ctwP.drawImage（imgEnemy.（此关键帧-1）*50，（此关键帧-1行）*50,50,50，
这个.posX，这个.posY，这个.desWidth，这个.desHeight）；
}
}
功能检查键关闭（e）{
var key=e.keyCode；
如果（键==87）{
rocketPos.y=rocketPos.y-5；
}//如果按w，则将y减少5
如果（键=83）{
rocketPos.y=rocketPos.y+5；
}//如果按s，则将y加5
如果（键==65）{
rocketPos.x=rocketPos.x-5；
}//如果按A键，则将x减少5
如果（键=68）{
rocketPos.x=rocketPos.x+5；
}//如果按D键，则将x加5
如果（键=88）{
missilePos.enable=true；//如果按X，状态为enable，true
missilePos.x=rocketPos.x；//火箭的原点导弹
Misselepos.y=火箭头.y；
}
}
功能检查键控（e）{
var key=e.keyCode；
//警报（键）；
如果（键==65）{
keyframeRocket=1；//释放关键帧时生成关键帧1（前）
}
如果（键==68）{
keyframeRocket=1；//释放D时生成关键帧1（前）
}
}
函数（keyframe.posX，posY）{
imgMissile.src='images/imissile.png'；//加载missle.png
ctxP.drawImage（imgMissile，{（keyframe-1）*25}，0,25,25，posX，posY，25,25）；//飞弹有两个关键帧，大小为25
}
函数clickReporter（e）{
positionX=e.pageX；//X上光标位置的positionX
possisonty=e.pageY；//光标在Y上的位置的possiony
警报（“X=“+PositionX+”，Y=“+positionY”）；
}
images<!DOCTYPE HTML>
<html>
<head><meta charset="utf-8"><title>Game Loop</title></head>
<body>
<canvas id="myCanvas" width="480" height="320"></canvas>
<script type="text/javascript">
var fps=50; //specify framerate per second
var timing=0;
var ctxP=document.getElementById('myCanvas').getContext('2d');
var imgBg1 = new Image();
var imgBg2 = new Image();
var imgBg3 = new Image();
var imgRocket = new Image();
var imgBoss = new Image();
// Enemy 1 and 2
var imgEnemy = new Image();
var enemyPos1 = {x:Math.random()*320,y:0};
var enemyPos2 = {x:Math.random()*320,y:-100};
var enemy1 = new drawEnemy(0.01,1,enemyPos1.x,enemyPos1.y,50,50);
var enemy2 = new drawEnemy(0.05,2,enemyPos2.x,enemyPos2.y,50,50);
var keyframeObject=2;
var count=0;
var delay=10;
var posBossX=170;
var rocketPos = {x:220,y:220};
var keyframeRocket=1;
setInterval(Update,1000/fps); //function to call for Update function
var imgMissile = new Image(); //Create Missile Variable
var missilePos={enable:false,keyframeObject:1,x:0,y:0};
//Variable to draw missle
//keyframe 1 and initial at (0,0)
function Update(){
window.addEventListener('click',clickReporter,false);
//Call function clickReporter when the mouse is clicked
document.addEventListener('keydown',checkKeyDown,false);
//Call function clickReporter when the key is down
document.addEventListener('keyup',checkKeyUp,false);
//Call function clickReporter when the key is up
timing+=0.2;
drawBg(timing);
drawRocket(keyframeRocket,rocketPos.x,rocketPos.y);
//call for function to draw Rocket1
drawBoss(posBossX,0);
enemyPos1.y++;
enemy1.setY(enemyPos1.y);
enemy1.draw();
enemyPos2.y++;
enemy2.setY(enemyPos2.y);
enemy2.draw();
}
//write function here
function drawBg(timing){
imgBg1.src='images/bg1.png'; //to load bg
imgBg2.src='images/bg2.png';
imgBg3.src='images/bg3.png';
ctxP.drawImage(imgBg1,0,320-timing/2,480,320,0,0,480,320);
ctxP.drawImage(imgBg2,0,320-timing,480,320,0,0,480,320);
ctxP.drawImage(imgBg3,0,320-timing*1.5,480,320,0,0,480,320);
}
function drawRocket(keyframe,posX,posY){
imgRocket.src='images/rocket.png'; //to load rocket.png
ctxP.drawImage(imgRocket,((keyframe-1)*100),0,100,100,posX,posY,50,50);
}
function drawBoss(posX,posY){
imgBoss.src='images/boss.png'; //to load boss.png
ctxP.drawImage(imgBoss,posX,posY);
}
function drawEnemy1(keyframe,row,posX,posY){
imgEnemy1.src='images/enemy.png';
ctxP.drawImage(imgEnemy1,((keyframe-1)*50),((row-1)*50),50,50,posX,posY,50,50);
}
function drawEnemy2(keyframe,row,posX,posY){
imgEnemy2.src='images/enemy.png';
ctxP.drawImage(imgEnemy2,((keyframe-1)*50),((row-1)*50),50,50,posX,posY,50,50);
}
function drawEnemy(delay,row,posX,posY,desWidth,desHeight){
this.delay=delay;
this.count=0;
this.enable=true;
this.keyframe=1;
this.row=row;
this.posX=posX;
this.posY=posY;
this.desWidth=desWidth;
this.desHeight=desHeight;
drawEnemy.prototype.setX=function(posX){
this.posX=posX;
}
drawEnemy.prototype.setY=function(posY){
this.posY=posY;
}
drawEnemy.prototype.enable=function(enable){
this.enable=enable;
}
drawEnemy.prototype.draw=function(){
this.count+=this.delay;
if(this.count>=1){
if(this.keyframe==1){
this.keyframe=2;
}else{
this.keyframe=1;
}
if(this.count>=1){this.count=0;}
}
imgEnemy.src = 'images/enemy.png';
ctwP.drawImage(imgEnemy,(this.keyframe-1)*50,(this.row-1)*50,50,50,
this.posX,this.posY,this.desWidth,this.desHeight);
}
}
function checkKeyDown(e){
var key = e.keyCode;
if(key == 87){
rocketPos.y=rocketPos.y-5;
}//if press w reduce y by 5
if(key=83){
rocketPos.y=rocketPos.y+5;
}//if press s add y by 5
if(key==65){
rocketPos.x=rocketPos.x-5;
}//if press A reduce x by 5
if(key=68){
rocketPos.x=rocketPos.x+5;
}//if press D add x by 5
if(key=88){
missilePos.enable=true; //if press X, status is enable, true
missilePos.x=rocketPos.x;//origin point Missile at rocket
missilePos.y=rocketPos.y;
}
}
function checkKeyUp(e){
var key = e.keyCode;
//alert(key);
if(key==65){
keyframeRocket=1;//make keyframe 1 (front) when release A
}
if(key==68){
keyframeRocket=1; //make keyframe 1 (front) when release D
}
}
function drawMissile(keyframe,posX,posY){
imgMissile.src= 'images/missile.png'; //load missle.png
ctxP.drawImage(imgMissile,(keyframe-1)*25,0,25,25,posX,posY,25,25); // Missile.png has two keyframes and size by 25
}
function clickReporter(e){
positionX=e.pageX; // possitionX for cursor position on X
possisiontY=e.pageY; // possitionY for cursor position on Y
alert("X="+possitionX+",Y="+positionY);
}
</script>
</body>
</html>
游戏循环
var fps=50；//指定每秒帧速率
var定时=0；
var ctxP=document.getElementById（'myCanvas'）.getContext（'2d'）；
var imgBg1=新图像（）；
var imgBg2=新图像（）；
var imgBg3=新图像（）；
var imgRocket=新图像（）；
var imgBoss=新图像（）；
//敌人1和2
var imgEnemy=新图像（）；
var enemyPos1={x:Math.random（）*320，y:0}；
var enemyPos2={x:Math.random（）*320，y:-100}；
var enemy1=新付款人（0.01,1，enemyPos1.x，enemyPos1.y，50,50）；
var enemy2=新付款人（0.05,2，enemyPos2.x，enemyPos2.y，50,50）；
var keyframeObject=2；
var计数=0；
无功延迟=10；
var-posBossX=170；
var rocketPos={x:220，y:220}；
var-kerocket=1；
setInterval（Update，1000/fps）；//调用Update f的函数