Question

我正在为学校做一个项目（制作一个带有canvas标签的简单游戏，什么不是），我需要使用js对象。我已经意识到对象不会在我的主代码中“声明”，这里是js文件

    function Platform(x, y, speed, imgn){
    this.speed=speed;
    //this.img=new Image();
    this.x=x;
    this.y=y;
    this.imgn=imgn?imgn:parseInt(Math.random()*5);
    /*if(imgn==1){
        img.src="Images/Platform1.png";
    }else if(imgn==2){
        img.src="Images/Platform2.png";
    }else if(imgn==3){
        img.src="Images/Platform3.png";
    }else if(imgn==4){
        img.src="Images/Platform4.png";
    }else if(imgn==5){
        img.src="Images/Platform5.png";
    }*/
}

Platform.prototype.moveUp=function(){
    this.y+=this.speed;
};

Platform.prototype.platdraw=function(){
   ctx.drawImage(this.img, this.x, this.y) 
};

其中一些被注释掉的原因是bc i虽然它打破了但是这里是我“声明”它的代码

            var Platforms=new Array();
            Platforms.push(new Platform(1, 1, 1, 1));
            alert(Platforms.x)

我非常感谢一些帮助，如果没有注释掉的push语句也不允许其余的代码运行

这是我的其余代码，如果它是其他错误的我不是最好的这个东西也可以我可以将声明的对象放入循环我只想用一个atm进行测试

    <!DOCTYPE html>
<html>
    <head>
        <script src='Platform.js'></script>
    </head>

    <body onload='initialize()'>
        <canvas id='canvas' width='400px' height='500px'></canvas>
        <script>
        var canvas, ctx;

            var onplat , isjump, jumpstage, time;

            var player=new Image();
            player.src="Sprite.png";

            var playerX, playerY, playerXFrame, playerYFrame, playerFrameW, playerFrameH;

            var upKey, leftKey, rightKey;

            function initialize(){
                //canvas variables
                canvas=document.getElementById('canvas');
                ctx=canvas.getContext("2d");

                //player variables
                playerX=0;
                playerY=0;
                playerXFrame=0;
                playerYFrame=0;
                playerFrameW=34;
                playerFrameH=47;
                onplat=false;
                isjump=false;
                jumpstage=0;
                time=0;


                var Platforms=new Array();
                Platforms.push(new Platform(1, 1, 1, 1));
                alert(Platforms[0])

                //keyboard controls
                upKey=false;
                downKey=false;
                leftKey=false;
                rightKey=false;
                document.addEventListener("keydown", keyDownHandler);
                document.addEventListener("keyup", keyUpHandler);

                update();
            }
            function update(){
                time++;
                if(isjump /*&& !onplat*/){

                    if(jumpstage==1 ){
                        playerY-=50;
                        playerYFrame=0;

                        jumpstage++;
                    }else if(jumpstage==2 && time==20){
                        playerY-=20;
                        playerYFrame=0;

                        jumpstage++;
                    }else if(jumpstage==3 && time==30){
                        playerY+=30;
                        playerYFrame=0;

                        jumpstage++;
                    }else if(jumpstage==4 && time==40){
                        playerYFrame=0;
                        playerY+=40;
                        isjump=false;
                        jumpstage=0;

                }} 

                if(rightKey && playerX<canvas.width-playerFrameW-20) {
                    playerYFrame=0;
                    playerX +=6;
                }
                else if(leftKey && playerX>0) {
                    playerYFrame=1;
                    playerX -= 6;
                }
                else if(upKey && playerY>=0 && !isjump){
                    jumpstage=1;
                    onplat=false;
                    playerYFrame=0;
                    playerY-=1;
                    isjump=true;
                    time=0;

                }

                if(rightKey || leftKey || upKey){
                    playerXFrame++;
                    playerXFrame%=6;
                }
                if(!onplat & playerY<400){
                    playerY+=5;
                    if(playerYFrame==0){
                        playerYFrame=0;
                    }else if(playerYFrame==1){
                        playerYFrame=1;
                    }
                }
                if(playerY>410){
                    playerY=400;
                }


                draw();
                requestAnimationFrame(update);

            }
            function draw(){
                ctx.clearRect(0,0,canvas.width, canvas.height);

                ctx.drawImage(player, playerXFrame*playerFrameW, playerYFrame*playerFrameH, playerFrameW, playerFrameH, playerX, playerY, playerFrameW, playerFrameH );




                console.log(playerX+" "+playerYFrame+" "+playerY+" "+time+" "+isjump);
            }
            function keyDownHandler(e){
                //alert(e.keyCode);
                switch(e.keyCode){
                    case 37: leftKey=true; break;
                    case 38: upKey=true; break;
                    case 39: rightKey=true; break;
                }
            }
            function keyUpHandler(e){
                //alert(e.keyCode);
                switch(e.keyCode){
                    case 37: leftKey=false; break;
                    case 38: upKey=false; break;
                    case 39: rightKey=false; break;
                }
            }
        </script>

    </body>
</html>

Answer 1

您可以尝试以下代码：

＆＃13;

 function Platform(x, y, speed, imgn) {
     this.speed = speed;
     //this.img=new Image();
     this.x = x;
     this.y = y;
     this.imgn = imgn ? imgn : parseInt(Math.random() * 5);
     /*if(imgn==1){
         img.src="Images/Platform1.png";
     }else if(imgn==2){
         img.src="Images/Platform2.png";
     }else if(imgn==3){
         img.src="Images/Platform3.png";
     }else if(imgn==4){
         img.src="Images/Platform4.png";
     }else if(imgn==5){
         img.src="Images/Platform5.png";
     }*/
 }

 Platform.prototype.moveUp = function() {
     this.y += this.speed;
 };

 Platform.prototype.platdraw = function() {
     ctx.drawImage(this.img, this.x, this.y)
 };
 var canvas, ctx;

 var onplat, isjump, jumpstage, time;

 var player = new Image();
 player.src = "http://kb4images.com/images/free-images/37032049-free-images.jpg";
 //set image with your image
 var playerX, playerY, playerXFrame, playerYFrame, playerFrameW, playerFrameH;

 var upKey, leftKey, rightKey;

 function initialize() {
     //canvas variables
     canvas = document.getElementById('canvas');
     ctx = canvas.getContext("2d");
     //player variables
     playerX = 0;
     playerY = 0;
     playerXFrame = 0;
     playerYFrame = 0;
     playerFrameW = 34;
     playerFrameH = 47;
     onplat = false;
     isjump = false;
     jumpstage = 0;
     time = 0;


     var Platforms = new Array();
     Platforms.push(new Platform(1, 1, 1, 1));
     alert(Platforms[0])

     //keyboard controls
     upKey = false;
     downKey = false;
     leftKey = false;
     rightKey = false;
     document.addEventListener("keydown", keyDownHandler);
     document.addEventListener("keyup", keyUpHandler);

     update();
 }

 function update() {
     time++;
     if (isjump /*&& !onplat*/ ) {

         if (jumpstage == 1) {
             playerY -= 50;
             playerYFrame = 0;

             jumpstage++;
         } else if (jumpstage == 2 && time == 20) {
             playerY -= 20;
             playerYFrame = 0;

             jumpstage++;
         } else if (jumpstage == 3 && time == 30) {
             playerY += 30;
             playerYFrame = 0;

             jumpstage++;
         } else if (jumpstage == 4 && time == 40) {
             playerYFrame = 0;
             playerY += 40;
             isjump = false;
             jumpstage = 0;

         }
     }

     if (rightKey && playerX < canvas.width - playerFrameW - 20) {
         playerYFrame = 0;
         playerX += 6;
     } else if (leftKey && playerX > 0) {
         playerYFrame = 1;
         playerX -= 6;
     } else if (upKey && playerY >= 0 && !isjump) {
         jumpstage = 1;
         onplat = false;
         playerYFrame = 0;
         playerY -= 1;
         isjump = true;
         time = 0;

     }

     if (rightKey || leftKey || upKey) {
         playerXFrame++;
         playerXFrame %= 6;
     }
     if (!onplat & playerY < 400) {
         playerY += 5;
         if (playerYFrame == 0) {
             playerYFrame = 0;
         } else if (playerYFrame == 1) {
             playerYFrame = 1;
         }
     }
     if (playerY > 410) {
         playerY = 400;
     }


     draw();
     requestAnimationFrame(update);

 }

 function draw() {
 debugger;
     ctx.clearRect(0, 0, canvas.width, canvas.height);

     ctx.drawImage(player, playerXFrame * playerFrameW, playerYFrame * playerFrameH, playerFrameW, playerFrameH, playerX, playerY, playerFrameW, playerFrameH);




     console.log(playerX + " " + playerYFrame + " " + playerY + " " + time + " " + isjump);
 }

 function keyDownHandler(e) {
     //alert(e.keyCode);
     switch (e.keyCode) {
         case 37:
             leftKey = true;
             break;
         case 38:
             upKey = true;
             break;
         case 39:
             rightKey = true;
             break;
     }
 }

 function keyUpHandler(e) {
     //alert(e.keyCode);
     switch (e.keyCode) {
         case 37:
             leftKey = false;
             break;
         case 38:
             upKey = false;
             break;
         case 39:
             rightKey = false;
             break;
     }
 }

＆＃13;

<!DOCTYPE html>
<html>

<head>
    <script src='Platform.js'></script>
</head>

<body onload='initialize()'>
    <canvas id='canvas' width='400px' height='500px'></canvas>
</body>

</html>

＆＃13;

尝试在单独的文件中添加JS代码并将该文件包含在头文件中。希望它有所帮助：）

声明js对象无法正常工作

1 个答案: