Question

我是初学者。我尝试将代码复制到Notepad ++并在Chrome上运行。它无法运行（没有显示任何内容）。请帮忙。我不知道它有什么问题。

我的下面的代码是一个基本的游戏导弹roket老板。在书籍教程之后，我第一次想要制作游戏。但我的第一场比赛甚至无法运行任何东西。画布上没有画出任何东西。它会是图像的src吗？我正在使用Windows10。可能是操作系统还是防病毒软件？我正在使用McAfee。

__exit__

Answer 1

有很多语法错误。我已经解决了所有问题。现在您只需创建名为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>

我的Html 5 Javascript Canvas游戏代码有什么问题？我是初学者

1 个答案: