Canvas Asteroids game

Question

I'm making Asteroids game in html5 with canvas. I've made moveable ship, which can rotate right and left and can move forward. I've added friction to slow it down when keys aren't pressed. Next thing to do is shooting bullets/lasers. I have yet only one shot and bullet goes forward, but it follow the movement of ship too :/ I don't know how to detach it from the ship and how to make more bullets.

Here's the code:

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);

And the fiddle http://jsfiddle.net/tomasthall/q40zvd6v/1/

sEver · Accepted Answer

I moved your laser drawing out of the rotated context. Initiated lx and ly to x y in the moment of firing.

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

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

Now you need to just give the laser a proper vector. That can be calculated from the angle of your ship and some trigonometry.

        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);
        };

And it shoots fine now: http://jsfiddle.net/q40zvd6v/4/

Looks much nicer if you add the ship vector to projectile vector though.

        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/

Good luck on your game :>

Canvas Asteroids game

Answers (2)

Related Questions