game.js

class Level {

    wall;
    width;
    height;
    gravity;

        constructor(wallWidth, wallHeight, canvasWidth, canvasHeight, map) {

            //rozmiar sciany
            this.wall = { width: wallWidth, height: wallHeight };

            //rozmiar poziomu
            this.width = canvasWidth / wallWidth;
            this.height = canvasHeight / wallHeight;

            //rodzaje scian
            this.walls = [
                {id: 'background', colour: '#808080', solid: 0 },
                {id: 'wall', colour: '#333333', solid: 1 },
                {id: 'win', colour: '#00ff00', solid: 0 },
                {id: 'lose', colour: '#ff0000', solid: 0 }
            ];

            //mapa
            this.mapx=map;
            this.gravity = wallHeight / 25;

        }

        set wall(size) {
            var canvasWidth = this.wall.width * this.width;
            var canvasHeight = this.wall.height * this.height;

            this.wall = { width: size.width, height: size.height };

            this.width = canvasWidth / size.width;
            this.height = canvasHeight / size.height;
        }

        get wall() {
            return this.wall;
        }


        set mapx(map) {

            this.checkMap(map);
            this.map=map;


        }

        get mapx() {
            this.checkMap(this.map);
            return this.map;
        }


        drawWall(x1, y1, x2, y2, colour, context) {
            context.beginPath();
            context.strokeStyle = colour;
            context.rect( x1, y1, x2-x1, y2-y1 );
            context.fillStyle = colour;
            context.fill();
        }



        drawMap(context) {
            for (var x=0; x<level.width; x++) {
                for (var y=0; y<level.height; y++) {
                    this.drawWall(
                        x*this.wall.width,
                        y*this.wall.height,
                        (x+1)*this.wall.width,
                        (y+1)*this.wall.height,
                        this.walls[this.mapx[y][x]].colour,
                        context
                    );
                }
            }
        }

        checkMap (map) {
            //alert("checkMap initialazed.");

            var minWidth = map[0].length;
            var minHeight = map.length;

            for (var y=0; y<this.height; y++) {

                if(map[y].length<minWidth) minWidth = map[y].length;
                for (var x=0; x<map[y].length; x++) {
                    if (map[y][x]>this.walls.length-1) {
                        alert("illegal wall at "+y+" "+x+" !");
                        return false;
                    }
                }
            }

            if(minWidth == this.width && minHeight == this.height) {
                //alert("checkMap successful!");
                return true;
                }
            else {
                alert("checkMap failed!");
                return false;
                }
        }


        checkWall (wall) {

        }
    };

class Player {


    colour;
    level;
    position;
    r;
    velocity;
    speed;
    moving;
    gravity;
    fallingCounter;
    onground;

    constructor(colour, level) {

            //rozmiar sciany
            this.level = level;

            this.colour = colour;

            this.position = {
                x: level.wall.width * (1 + 0.5),
                y: level.wall.width * (21 + 0.5)
            };
            this.r = (level.wall.height / 2);
            //var colour = '#0000ff';
            this.velocity = {
                x: 0,
                y: 0
            };

            this.speed = {
                x: level.wall.width / 5,
                y: level.wall.height / 4.5
            };

            this.moving = {
                left: false,
                right: false,
                up: false
            }
            this.gravity = level.gravity;
            this.fallingCounter = 1;
            this.onground = false;

        }

    drawPlayer(context) {

        context.beginPath();
        context.arc(this.position.x, this.position.y, this.r, 0, 2 * Math.PI);
        context.fillStyle = this.colour;
        context.fill();

        /*
        this.velocity = {
                x: 0,
                y: 0
            };
            */
    }


    move(context) {

        var location = {
            centerX: Math.floor(this.position.x / this.level.wall.width),
            centerY: Math.floor(this.position.y / this.level.wall.height),
            left: Math.floor((this.position.x - this.r - 0.01)/this.level.wall.width),
            right: Math.floor((this.position.x + this.r + 0.01)/this.level.wall.width),
            top: Math.floor((this.position.y - this.r - 0.01)/this.level.wall.height),
            bottom: Math.floor((this.position.y + this.r + 0.01)/this.level.wall.height),
        };

        var walls = {
            center: this.level.walls[this.level.map[location.centerY][location.centerX]],
            left: this.level.walls[this.level.map[location.centerY][location.left]],
            right: this.level.walls[this.level.map[location.centerY][location.right]],
            top: this.level.walls[this.level.map[location.top][location.centerX]],
            bottom: this.level.walls[this.level.map[location.bottom][location.centerX]],
            topleft: this.level.walls[this.level.map[location.top][location.left]],
            topright: this.level.walls[this.level.map[location.top][location.right]],
            bottomleft: this.level.walls[this.level.map[location.bottom][location.left]],
            bottomright: this.level.walls[this.level.map[location.bottom][location.right]],
        };

        var oldPosition = this.position;

        this.position = {
            x: this.position.x + this.velocity.x,
            y: this.position.y + this.velocity.y + this.gravity * this.fallingCounter
        };

        this.fallingCounter += 0.15;

        this.onground = false;
        this.checkSolidWalls(walls, location, oldPosition);
        this.checkWinWalls(walls);
        this.checkLoseWalls(walls);


        this.drawPlayer(context);



    }


    checkSolidWalls(walls, location, oldPosition) {



        if(walls.left.solid == 1) {
            if(this.position.x < oldPosition.x)
                this.position.x = (location.left +1) * this.level.wall.width + this.r;
        }

        if(walls.right.solid == 1) {
            if(this.position.x > oldPosition.x)
                this.position.x = (location.right - 1) * this.level.wall.width + this.r;
        }

        if(walls.top.solid == 1) {
            if(this.position.y < oldPosition.y)
                this.position.y = (location.top +1) * this.level.wall.width + this.r;
        }

        if(walls.bottom.solid == 1) {
            if(this.position.y > oldPosition.y){
                this.position.y = (location.bottom -1) * this.level.wall.width + this.r;
                this.fallingCounter = 1;
                this.onground = true;
            }
        }

        if(walls.topleft.solid == 1) {
            if(this.position.y < oldPosition.y && this.position.x < oldPosition.x) {
                this.position.y = (location.top +1) * this.level.wall.width + this.r;
                this.position.x = (location.left +1) * this.level.wall.width + this.r;
            }
        }

        if(walls.topright.solid == 1) {
            if(this.position.y < oldPosition.y && this.position.x > oldPosition.x) {
                this.position.y = (location.top +1) * this.level.wall.width + this.r;
                this.position.x = (location.right - 1) * this.level.wall.width + this.r;
            }
        }

        if(walls.bottomleft.solid == 1) {
            if(this.position.y > oldPosition.y && this.position.x < oldPosition.x) {
                this.position.y = (location.bottom -1) * this.level.wall.width + this.r;
                this.position.x = (location.left +1) * this.level.wall.width + this.r;
            }
        }

        if(walls.bottomright.solid == 1) {
            if(this.position.y > oldPosition.y && this.position.x > oldPosition.x) {
                this.position.y = (location.bottom -1) * this.level.wall.width + this.r;
                this.position.x = (location.right - 1) * this.level.wall.width + this.r;
            }
        }


    }

    checkWinWalls(walls) {
        if(walls.center.id == 'win') {
                alert('  WIN! :D  ');
                this.position = {
                    x: this.level.wall.width * (1 + 0.5),
                    y: this.level.wall.height * (1 + 0.5)
                };
            }
    }

    checkLoseWalls(walls) {
        if(walls.center.id == 'lose') {
                alert('  GAME OVER  ');
                this.position = {
                    x: this.level.wall.width * (1 + 0.5),
                    y: this.level.wall.height * (1 + 0.5)
                };
            }
    }


    startMoving(key, context) {



        switch(key) {
            case 37:
                this.moving.left = true;
                break;
            case 39:
                this.moving.right = true;
                break;
            case 38:
                if(this.onground==true)
                this.moving.up = true;
                break;
        };

        //if(!this.moving.up) this.fallingCounter = 1;

        this.setMoving();

        //this.move(context);
    }

    stopMoving(key,context) {

        if(this.moving.up) this.fallingCounter = 0;

        switch(key) {
            case 37:
                this.moving.left = false;
                break;
            case 39:
                this.moving.right = false;
                break;
            case 38:
                this.moving.up = false;
                break;
        };
        this.setMoving();

        //this.move(context);
    }


    setMoving() {

        this.velocity.x=0;
        this.velocity.y=0;

        if(this.moving.right==true)
            this.velocity.x += this.speed.x;

        if(this.moving.left==true)
            this.velocity.x -= this.speed.x;


        if(this.moving.up==true && this.onground==true)
            this.velocity.y -= this.speed.y*2;
    }

}


document.addEventListener('DOMContentLoaded', function (event) {

    //zapisanie do zmiennej elementu canvas
    var canvas = document.getElementById('canvas');
    //zapisanie do zmienne zawartosci elementu canvas
    var context = canvas.getContext('2d');

    //ustawienie wymiarow elementu canvas
    canvas.width = 800;
    canvas.height = 600;

    //ustawienie koloru wypelnieniaB1CFFF
    context.fillStyle = '#333333';
    //narysowanie prostokata o wymiarach elementu canvas
    context.fillRect(0, 0, canvas.width, canvas.height);


    console.log('DONE');
    var sizeofwall = 25;
    // rozmiar ściany
    var wall = { width: sizeofwall, height: sizeofwall };

    // rozmiar poziomu
    var width = canvas.width / sizeofwall;
    var height = canvas.height / sizeofwall;

    //rodzaje ścian
    var walls = [
        {id: 'background', colour: '#333333', solid: 0 },
        {id: 'wall', colour: '#a0a0a0', solid: 1 },
        {id: 'win', colour: '#00ff00', solid: 0 },
        {id: 'lose', colour: '#ff0000', solid: 0 }
    ];

    // mapa
    /*
    var map = [
        [ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ],
        [ 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 1 ],
        [ 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1 ],
        [ 1, 0, 0, 0, 0, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1 ],
        [ 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1 ],
        [ 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0 ,1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1 ],
        [ 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 1, 1, 1, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1 ],
        [ 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1 ],
        [ 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1 ],
        [ 1, 0, 0, 0, 0, 1, 0, 1, 1, 1, 1, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ,0, 0, 0, 1, 0, 0, 1 ],
        [ 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1 ],
        [ 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1 ],
        [ 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 1, 1, 1, 1, 1, 1, 3, 3, 3, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1 ],
        [ 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 3, 3, 3, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1 ],
        [ 1, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1 ],
        [ 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1 ],
        [ 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1 ],
        [ 1, 0, 0, 0, 0, 1, 0, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ],
        [ 1, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1 ],
        [ 1, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1 ],
        [ 1, 0, 0, 0, 0, 1, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1 ],
        [ 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1 ],
        [ 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1 ],
        [ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ]
    ];
    */
     var map = [
        [ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ],
        [ 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1 ],
        [ 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1 ],
        [ 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1 ],
        [ 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1 ],
        [ 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1 ],
        [ 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1 ],
        [ 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1 ],
        [ 1, 0, 1, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 1 ],
        [ 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ,1, 0, 0, 0, 0, 0, 1 ],
        [ 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1 ],
        [ 1, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1 ],
        [ 1, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1 ],
        [ 1, 0, 1, 1, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1 ],
        [ 1, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1 ],
        [ 1, 0, 1, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1 ],
        [ 1, 0, 1, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1 ],
        [ 1, 0, 1, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1 ],
        [ 1, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1 ],
        [ 1, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1 ],
        [ 1, 0, 1, 1, 1, 1, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1 ],
        [ 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1 ],
        [ 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 1, 2, 2, 2, 2, 2, 1 ],
        [ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ]
    ];

    level = new Level(sizeofwall,sizeofwall, canvas.width, canvas.height, map);
    level.drawMap(context);

    player = new Player('#0000ff', level);
    player.drawPlayer(context);

    document.addEventListener('keydown', function(event) {
        //alert("wcisnieto "+event.keyCode);
        player.startMoving(event.keyCode, context);

    });

    document.addEventListener('keyup', function(event) {
        //alert("wcisnieto "+event.keyCode);
        player.stopMoving(event.keyCode, context);

    });


    function drawGame() {
        context.clearRect(0, 0, canvas.Width, canvas.height);
        level.drawMap(context);
        player.move(context);
    }

    setInterval(drawGame, 1000/25);


})