DOODLE WITH ACK-ACK

DEMO

https://sijlver.github.io/DOODLE__WITH__ACK-ACK/game.html

Who Did it?

I worked along, so I did everything myself.

What was the most difficult?

I think, the most important thing is to spend time on the correct structure of the project and then everything will be easily.

How it work?

We are waiting until all the pictures are uploaded.

import {getImg} from './promises';
import {Player} from './player';
import {Lines} from './lines';
import {Fire} from './fire';
import {Tank} from './tank';

Promise.all([getImg('./img/bg.png'), getImg('./img/player.png'), getImg('./img/platforms.png'), getImg('./img/tank.png'), getImg('./img/fire.png')])
    .then(results => init(...results));

function init(bgImg, playerImg, lineImg, tankImg, fireImg) {
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    const arr = [{x:700, y:580}, {x:720, y:480}, {x:600, y:430}, {x:500, y:380}, {x:620, y:250}, {x:400, y:200}, {x:500, y:100}, {x:620, y:80}, {x:720, y:80}, {x:600, y:20}, {x:400, y:-80}];
    const score = document.getElementById('score');
    const button = document.getElementById('start');
    const continueBlock = document.querySelector('.continue');
    const continueButton = document.getElementById('continueButton');
    const player = new Player(ctx, playerImg, score);
    const fire = new Fire(ctx, fireImg);
    const tank = new Tank(ctx, tankImg, fire);
    let lines = arr.map(obj => new Lines(ctx, lineImg, obj.x, obj.y));
    let lose = false;
    canvas.width = 1200;
    canvas.height = 600;

    ...

}

After we call function gameLoop.

function gameLoop() {
    ctx.drawImage(bgImg, 0, 0, canvas.width, canvas.height);
    updateLines(player);
    player.update(lines, fire);
    player.render();
    loseFun(player);
    button.addEventListener('click', startFun);
    if(button.classList.contains('start')&&!lose){
        window.requestAnimationFrame(gameLoop);
    }
    if(Number(score.innerHTML) >= 200){
        tank.update();
    }else if(Number(score.innerHTML) < 200&&tank.sY < 508){
        tank.resolve = 'down';
        tank.update();
    }
    tank.render();
}

For example module Lines

class Lines{
    constructor(ctx, lineImg, x=0, y=0, sX=0, sY=12, sHeight=16, lineJump){
        this.ctx = ctx;
        this.sX = sX;
        this.sY = sY;
        this.sHeight = sHeight;
        this.posY = y;
        this.posX = x;
        this.lineWidth = 80;
        this.lineHeight = sHeight;
        this.lineJump = lineJump;
        this.disappear = 1;
        this.img = lineImg;
    }
    update (incr=2){
        this.posY += incr;
    }
    render () {
        this.ctx.drawImage(this.img, this.sX, this.sY, 57, this.sHeight, this.posX, this.posY, this.lineWidth, this.lineHeight);
    }
}

Thank you for attention!