Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"></link>
    <script>
        function randomIntWrapper(min, max) {
            return function () {
                return Math.floor((Math.random() * max) + min)
            }
        }

        function Shipt(config) {
            this.config = config;
            const nave = this;
            this.game = config.game;
            this.row = config.row;
            this.col = config.col;

            this.impactos = function () {
                let countImpactos = 0;
                config.game.bullets.forEach(function (b) {
                    if (b.row === nave.row && b.col === nave.col) {
                        if (countImpactos > 0) {
                            nave.destroy();
                        }
                        // else if (Math.random() < 0.2) {
                        //     nave.destroy();
                        // }
                        else {
                            if (b.direction === 'up') {
                                nave.row++
                            } else {
                                nave.row--
                            }
                            if (nave.row > 20) {
                                nave.row = 0
                            }
                            if (nave.row < 0) {
                                nave.row = 20
                            }
                        }
                        countImpactos++
                    }
                });
            };
            this.checkIfWin = function () {
                if (nave.game.running) {
                    if (nave.col >= 20) {
                        let gate = nave.game.config.tablero.gate;
                        if (nave.row >= gate.start && nave.row <= gate.end) {
                            nave.game.win()
                        } else {
                            nave.game.gameOver();
                        }
                    }
                }
            };

            this.update = function () {
                "use strict";
                nave.impactos();
                nave.col++;
                nave.checkIfWin()
            };
            this.render = function () {
                var elem = document.querySelector("span[row='" + this.row + "'][column='" + this.col + "']")
                elem.innerHTML = '<i class="fa fa-space-shuttle" aria-hidden="true"></i>'
            };
            this.destroy = function () {
                nave.game.gameOver();
            }
        }

        function Disparo(config) {
            "use strict";
            this.config = config || {};
            this.row = config.row;
            this.col = config.col;
            this.update = function () {

            };

            this.render = function () {
                var elem = document.querySelector("span[row='" + this.row + "'][column='" + this.col + "']")
                elem.innerHTML = '<i class="fa fa-bullseye" aria-hidden="true"></i>'
            }
        }

        function Game(config) {
            const game = this;
            const runnig = true;
            const zeroOrOne = randomIntWrapper(1, 2);
            const randTablero = randomIntWrapper(0, 20);
            this.config = config || {};
            this.config.tablero = this.config.tablero || {rows: 21, cols: 21, gate: {start: 5, end: 9}};
            this.gameOver = function () {
                clearInterval(this.mainLoopIterval);
                game.running = false;
                document.write('Game Over!')
            };
            this.win = function () {
                "use strict";
                clearInterval(game.mainLoopIterval);
                game.running = false;
                document.write('You Win!')
            };
            this.nave = new Shipt({row: 10, col: 0, game: this});
            this.bullets = [];

            this.render = function () {
                "use strict";
                let html = '';
                html += '<div id="tablero">';
                for (let i = 0; i < 21; i++) {
                    for (let j = 0; j < 21; j++) {
                        if (j === 0) {
                            html += '</br>';
                        }
                        html += '<span row="' + i + '" column="' + j + '" ><i class="fa fa-square" aria-hidden="true"></i></span>';
                    }
                }
                html += '</div>';
                document.getElementsByTagName('body')[0].innerHTML = html;
                game.bullets.forEach(function (e) {
                    e.render()
                });

                game.nave.render();

                let gate = game.config.tablero.gate;
                var st = document.querySelector("span[row='" + gate.start + "'][column='20']");
                st.innerHTML = '<i class="fa fa-square-o" aria-hidden="true"></i>'
                var end = document.querySelector("span[row='" + gate.end + "'][column='20']")
                end.innerHTML = '<i class="fa fa-square-o" aria-hidden="true"></i>'
            };
            this.spawnBullet = function () {
                let start = randTablero();
                let row = zeroOrOne() ? 0 : 20;
                game.bullets.push(new Disparo({col: start, row: row, direction: row === 0 ? 'down' : 'up', game: game}));

            };


            this.update = function () {
                game.nave.update();
                game.bullets.forEach(function (e) {
                    e.update();
                });
                if (zeroOrOne()) {
                    game.spawnBullet()
                }
            };
            this.start = function () {
                game.running = true;
                this.mainLoopIterval = setInterval(function () {
                    game.update();
                    game.render();
                }, this.config.interval || 200)
            };
        }

    </script>
    <style>
        span {
            display: inline-block
        }
    </style>
</head>
<body>
<script>
    document.write('<div id="tablero"><button onclick="new Game().start()">Run</button>');
    for (let i = 0; i < 21; i++) {
        for (let j = 0; j < 21; j++) {
            if (j === 0) {
                document.write('</br>')
            }
            document.write('<span row="' + i + '" column="' + j + '" >X</span>')
        }
    }
    document.write('</div>');
</script>


</body>
</html>