Javascript:是否继续执行if语句为true时调用的函数,而继续执行if语句为false时调用的函数?

时间:2020-07-08 09:14:54

标签: javascript html5-canvas

我正在用Javascript制作赛车游戏,用户必须避免与屏幕上即将来临的汽车相撞。为了监视碰撞,我创建了一些if语句,这些语句通过存储即将到来的汽车对象的“ obs”数组。起初,我只是想在用户碰撞时使用拼接功能将其删除,但是我想让汽车在撞到时移出屏幕。这就是为什么我在代码的“ obstacles”类中创建了crashed()函数的原因。但是,在执行this(obs [j] .crashed())时,如果用户发生冲突,则仅在if语句为true时才执行它,这是预期的。但是,我试图找出一种方法,使其继续执行crashed()函数,直到它出现在屏幕之外为止。有什么建议吗?这是我的代码,在此先感谢您(请忽略代码中间的多个矩形,这只是我的游戏背景)...

<script>
        "use strict"
        var a=document.getElementById("myCanvas");
        var c=a.getContext("2d");
        
        var obs=[];
        
        var userX=180;
        var userY=400;
        var userSpd=0;
        
        function randomNumber(){
            var rand=(Math.random()*400)+1;
            if(rand<100){return 30}
            else if(rand>100&&rand<200){return 130}
            else if(rand>200&&rand<300){return 230}
            else if(rand>300){return 330}
        }
        
        class obstacles{
            constructor(x){
                this.x=x;
                this.y=-(Math.floor(Math.random()*100)+1);
            }
            
            show(){
                c.fillStyle="blue";
                c.beginPath();
                c.rect(this.x,this.y,40,70);
                c.fill();
                c.closePath();
            }
            
            move(){
                this.y+=2;
            }
            crashed(){
                this.y+=-2;
                this.x+=-2;
            }
        }
        
        createObstacles();
        function createObstacles(){
            var x;
            for(var i=0;i<1;i++){
                x=randomNumber();
                obs[i]=new obstacles(x);
            }
        }
        
        window.onkeydown=function(e){
            if(e.keyCode==37){
                userSpd=-3;
            }
            if(e.keyCode==39)
                userSpd=3;
        }
        
        window.onkeyup=function(e){
            if(e.keyCode==37){
                userSpd=0;
            }
            if(e.keyCode==39){
                userSpd=0;
            }
        }
            
        function draw(){
            var x;
            var y;
            c.clearRect(0,0,400,500);
            
            c.fillStyle="black"
            c.beginPath();
            c.rect(10,0,80,500);
            c.fill();
            c.closePath();

            c.fillStyle="black"
            c.beginPath();
            c.rect(110,0,80,500);
            c.fill();
            c.closePath();

            c.fillStyle="black"
            c.beginPath();
            c.rect(210,0,80,500);
            c.fill();
            c.closePath();

            c.fillStyle="black"
            c.beginPath();
            c.rect(310,0,80,500);
            c.fill();
            c.closePath();

            c.fillStyle="yellow"
            c.beginPath();
            c.rect(15,0,4,500);
            c.fill();
            c.closePath();

            c.fillStyle="yellow"
            c.beginPath();
            c.rect(81,0,4,500);
            c.fill();
            c.closePath();

            c.fillStyle="yellow"
            c.beginPath();
            c.rect(115,0,4,500);
            c.fill();
            c.closePath();

            c.fillStyle="yellow"
            c.beginPath();
            c.rect(181,0,4,500);
            c.fill();
            c.closePath();
            c.fillStyle="yellow"
            c.beginPath();
            c.rect(215,0,4,500);
            c.fill();
            c.closePath();

            c.fillStyle="yellow"
            c.beginPath();
            c.rect(281,0,4,500);
            c.fill();
            c.closePath();
            c.fillStyle="yellow"
            c.beginPath();
            c.rect(315,0,4,500);
            c.fill();
            c.closePath();

            c.fillStyle="yellow"
            c.beginPath();
            c.rect(381,0,4,500);
            c.fill();
            c.closePath();
            
            userX+=userSpd;
            c.fillStyle="red";
            c.beginPath();
            c.rect(userX,userY,40,70);
            c.fill();
            c.closePath();
            
            for(var j=0;j<obs.length;j++){
                x=randomNumber();
                obs[j].show();
                obs[j].move();
                if(obs[j].y==80||obs[j].y==81){
                    obs.push(new obstacles(x))
                }
                if(obs[j].y>500){obs.splice(j,1)}
                
                if(userX>obs[j].x&&userX<obs[j].x+40&&userY<obs[j].y+70&& userY>obs[j].y){obs.splice(j,1)}
                
                if(userX+40>obs[j].x&&userX+40<obs[j].x+40&&userY<obs[j]. y+70&& userY>obs[j].y){obs.splice(j,1)}
                
                if(userX>obs[j].x&&userX<obs[j].x+40&&userY+70<obs[j].y+70&& userY+70>obs[j].y){obs.splice(j,1)}
                
                if(userX+40>obs[j].x&&userX+40<obs[j].x+40&&userY+70<obs[j]. y+70&& userY+70>obs[j].y){obs.splice(j,1)}
            }
        }
        window.setInterval(draw,17);
        
    </script>

0 个答案:

没有答案