Question

我用画布在html5制作小行星游戏。我制造了可移动的船，它可左右旋转并可向前移动。当没有按下按键时，我增加了摩擦来减慢速度。接下来要做的就是射击子弹/激光。我只有一枪和子弹前进，但它也跟随船的运动：/我不知道如何从船上拆下它以及如何制造更多的子弹。

以下是代码：

window.addEventListener('keydown',doKeyDown,true);
    window.addEventListener('keyup',doKeyUp,true);
    var canvas = document.getElementById('pageCanvas');
    var context = canvas.getContext('2d');
    var angle = 0;
    var H = window.innerHeight; //*0.75,
    var W = window.innerWidth; //*0.75;
    canvas.width = W;
    canvas.height = H;
    var xc = W/2; //zeby bylo w centrum :v
    var yc = H/2; //jw.
    var x =  xc;
    var y =  yc;
    var dv = 0.2;
    var dt = 1;
    var vx = 0;
    var vy = 0;
    var fps = 30;
    var maxVel = 10;
    var frict = 0.99;
    var brakes = 0.90;
    var keys = new Array();
    var fire = false;
    var laser = false;
    ///////////////////lasery xD
    var lx = 25,
        ly = 9,
        lw = 4,
        lh = 4;

    function doKeyUp(evt){
        keys[evt.keyCode] = false;
        fire = false;
    }

    function doKeyDown(evt){
        keys[evt.keyCode] = true;
    }

    //OOOOOOOOOOOOOOOOOOLASEROOOOOOOOOOOOOOOOOOOOOOOOOOO
    function drawLaser() {
        context.fillStyle = "red";
        context.fillRect(lx,ly,lw,lh);

    }

    function moveLaser() {
        lx += 2;


    }


    //OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO
    function ogienZdupy(){
            context.fillStyle = "red";
            context.beginPath();
            context.moveTo(-2,2);
            context.lineTo(2,10);
            context.lineTo(-2,18);
            context.lineTo(-25,10);
            context.lineTo(-2,2);
            context.strokeStyle = "red";
            context.stroke();
        }

    function convertToRadians(degree) {
        return degree*(Math.PI/180);
    }

    function incrementAngle() {
        angle += 5;
        if(angle > 360){
            angle = 0;
            }
    }

    function decrementAngle(){
        angle -= 5;
        if(angle > 360){
            angle = 0;
            }
    }
    function xyVelocity(){
        vx += dv * Math.cos(convertToRadians(angle)); //* friction;
        vy += dv * Math.sin(convertToRadians(angle)); //* friction;
        if(vx > maxVel){
            vx = maxVel;
        }
        if(vy > maxVel){
            vy = maxVel;
        }
    }

    function shipMovement(){
        if(38 in keys && keys[38]){
            xyVelocity();
            fire = true;
        }
        if(40 in keys && keys[40]){
            vx = 0;
            vy = 0;
        }

        if(37 in keys && keys[37]){
            decrementAngle();
        };
        if (39 in keys && keys[39]){
            incrementAngle();
        };
        if (32 in keys && keys[32]){
            laser = true;
        };
    }

    function xyAndFriction(){

        x += vx * dt;
        y += vy * dt;

        vx *= frict;
        vy *= frict;

    }

    function outOfBorders(){

        if(x > W){
            x = x - W;
            }
        if(x< 0){
            x = W;
        }

        if(y > H){
            y = y - H;
        }

        if(y < 0){
            y = H;
        }
    }

    function blazeatron420(){
        context.beginPath();
        context.moveTo(0,0);
        context.lineTo(20,10);
        context.lineTo(0,20);
        context.lineTo(7,10);
        context.lineTo(0,0);
        context.strokeStyle = "green";
        context.stroke();
    }

    function space(){
        context.fillStyle = "black";
        context.fillRect(0,0,W,H);
    }

    function drawEverything() {  

        shipMovement();
        xyAndFriction();
        outOfBorders();

        //context.save();
        space();
        context.save();
        context.translate(x,y);
        //context.translate(25,25);
        context.rotate(convertToRadians(angle));
        context.translate(-7,-10);
        if(fire){
            ogienZdupy();
        }
        if(laser){
            drawLaser();
            moveLaser();
        }
        context.fillStyle = "green";
        //context.fillText(vx + " ｋｍ／ｈ",50,50);
        /*context.fillText("dupa",-30,0);
        context.beginPath();
        context.moveTo(-20,5);
        context.lineTo(-5,10);
        context.strokeStyle = "green"; //KOLOR LINII ;_;
        context.stroke();*/
        blazeatron420();
        context.restore();
    }

    setInterval(drawEverything, 20);

小提琴http://jsfiddle.net/tomasthall/q40zvd6v/1/

Answer 1

这就是你的问题：

        context.rotate(convertToRadians(angle));
        context.translate(-7,-10);

你在画布上旋转所有东西..

实际上你应该只旋转blazeatron420

请看这个问题： How do I rotate a single object on an html 5 canvas?

并查看旋转单个“对象”的解决方案..

Answer 2

我将激光绘图移出旋转的上下文。在射击时刻启动lx和ly。

laser = true;
lx = x;
ly = y;

http://jsfiddle.net/q40zvd6v/2/

现在你需要给激光器一个合适的矢量。这可以从你的船的角度和一些三角函数计算出来。

        if (32 in keys && keys[32]){
            laser = true;
            lx = x;
            ly = y;
            var angle_in_radians = convertToRadians(angle);
            lvx = Math.cos(angle_in_radians);                
            lvy = Math.sin(angle_in_radians);
        };

现在拍的很好： http://jsfiddle.net/q40zvd6v/4/

如果将船舶矢量添加到射弹矢量中，看起来会更好。

        if (32 in keys && keys[32]){
            laser = true;
            lx = x;
            ly = y;
            var angle_in_radians = convertToRadians(angle);
            lvx = Math.cos(angle_in_radians);                
            lvy = Math.sin(angle_in_radians);
            lvx += vx;
            lvy += vy;
        };

http://jsfiddle.net/q40zvd6v/5/

祝你好运：＆gt;

帆布小行星游戏

2 个答案: