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/

I forgote to change it :/ sorry – TomasThall Apr 23 '15 at 12:33 — TomasThall, Apr 23 '15 at 12:33

score 2 · Answer 1 · edited May 23 '17 at 11:54

2

this be your problem right here:

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

you rotate everything on the canvas..

when in fact you should only be rotating the blazeatron420

Please look at this question: How do I rotate a single object on an html 5 canvas?

and see the solutions for rotating a single "object"..

edited May 23 '17 at 11:54

Community

1
1

answered Apr 23 '15 at 12:35

Henrik

2,180
16
29

sEver · Accepted Answer · 2015-04-23T12:55:24.883

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 :>

@sEver any idea if something like this works for the DOM as well? http://stackoverflow.com/questions/43723656/transforms-are-added-endlessly — Lynel Hudson, May 01 '17 at 23:37

Canvas Asteroids game

2 Answers2