Code Playground

[xSnoopLion420x]

Falls ihr Programmiert zeigt doch mal her eure Projekte Werde nach und nach hier meine Veröffentlichen können gerne frei Genutzt werden.

Youtube

Spoiler: Name Generator - Python

ime = input("Enter your name: \n\n")

for c in ime:

    c = c.upper()
    if (c == "A"):
        print("..######..\n..#....#..\n..######..\n..#....#..\n..#....#..\n\n")
    elif (c == "B"):
        print("..######..\n..#....#..\n..#####...\n..#....#..\n..######..\n\n")
    elif (c == "C"):
        print("..######..\n..#.......\n..#.......\n..#.......\n..######..\n\n")
    elif (c == "D"):
        print("..#####...\n..#....#..\n..#....#..\n..#....#..\n..#####...\n\n")
    elif (c == "E"):
        print("..######..\n..#.......\n..#####...\n..#.......\n..######..\n\n")
    elif (c == "F"):
        print("..######..\n..#.......\n..#####...\n..#.......\n..#.......\n\n")
    elif (c == "G"):
        print("..######..\n..#.......\n..#####...\n..#....#..\n..#####...\n\n")
    elif (c == "H"):
        print("..#....#..\n..#....#..\n..######..\n..#....#..\n..#....#..\n\n")
    elif (c == "I"):
        print("..######..\n....##....\n....##....\n....##....\n..######..\n\n")
    elif (c == "J"):
        print("..######..\n....##....\n....##....\n..#.##....\n..####....\n\n")
    elif (c == "K"):
        print("..#...#...\n..#..#....\n..##......\n..#..#....\n..#...#...\n\n")
    elif (c == "L"):
        print("..#.......\n..#.......\n..#.......\n..#.......\n..######..\n\n")
    elif (c == "M"):
        print("..#....#..\n..##..##..\n..#.##.#..\n..#....#..\n..#....#..\n\n")
    elif (c == "N"):
        print("..#....#..\n..##...#..\n..#.#..#..\n..#..#.#..\n..#...##..\n\n")
    elif (c == "O"):
        print("..######..\n..#....#..\n..#....#..\n..#....#..\n..######..\n\n")
    elif (c == "P"):
        print("..######..\n..#....#..\n..######..\n..#.......\n..#.......\n\n")
    elif (c == "Q"):
        print("..######..\n..#....#..\n..#.#..#..\n..#..#.#..\n..######..\n\n")
    elif (c == "R"):
        print("..######..\n..#....#..\n..#.##...\n..#...#...\n..#....#..\n\n")
    elif (c == "S"):
        print("..######..\n..#.......\n..######..\n.......#..\n..######..\n\n")
    elif (c == "T"):
        print("..######..\n....##....\n....##....\n....##....\n....##....\n\n")
    elif (c == "U"):
        print("..#....#..\n..#....#..\n..#....#..\n..#....#..\n..######..\n\n")
    elif (c == "V"):
        print("..#....#..\n..#....#..\n..#....#..\n...#..#...\n....##....\n\n")
    elif (c == "W"):
        print("..#....#..\n..#....#..\n..#.##.#..\n..##..##..\n..#....#..\n\n")
    elif (c == "X"):
        print("..#....#..\n...#..#...\n....##....\n...#..#...\n..#....#..\n\n")
    elif (c == "Y"):
        print("..#....#..\n...#..#...\n....##....\n....##....\n....##....\n\n")
    elif (c == "Z"):
        print("..######..\n......#...\n.....#....\n....#.....\n..######..\n\n")
    elif (c == " "):
        print("..........\n..........\n..........\n..........\n\n")
    elif (c == "."):
        print("----..----\n\n")

-----------------------------------------------------------------------------------------------------------------------------
Youtube

Spoiler: Password Generator - Java

import java.util.Random;

public class PasswordGenerator
{
    public static void main(String[] args)
    {
        int length = 10; // password length
        System.out.println(generatePswd(length));
    }
    static char[] generatePswd(int len)
    {
        System.out.println("Your Password:");
        String charsCaps = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
        String chars = "abcdefghijklmnopqrstuvwxyz";
        String nums = "0123456789";
        String symbols = "!@#$%^&*_=+-/€.?<>)";

        String passSymbols = charsCaps + chars + nums + symbols;
        Random rnd = new Random();
  
        char[] password = new char[len];
        int index = 0;
        for (int i = 0; i < len; i++)
        {
            password[i] = passSymbols.charAt(rnd.nextInt(passSymbols.length()));
      
        }
        return password;
    }
}

-----------------------------------------------------------------------------------------------------------------------------
Youtube

Spoiler: Clash of Tanks [game] - html,css,js

Spoiler: HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        </head>
    <body>
       <div id="main">
          <p>Loading...</p>
       </div>
       <div id="infdiv">Drag available units into the deployment area.<br/><br/>You win, when one of  your units gets to the green line at the top of the field.<br/><br/>Don't let enemies to reach your base.<br/><br/>Good luck, commander! May the force be with you!</div>
       <div id="log"></div>

       <div id="myModal" class="modal">
            <div class="modal-content">
                 <span class="close">&times;</span>
                 <p class="modal-text"></p>
            </div>

</div>

    </body>
</html>

Spoiler: CSS

body {
margin: 0;
padding-top: 50%;
position: relative;
}

#main {
  
    padding: 20px;
    box-shadow: 0 0 100px 80px  lightblue;
    background: lightblue;
    text-align: center;

}

.dif {
    display: inline-block ;
    margin-top: 8px;
    font-weight: bold;
    font-size: 1em;
    width: 120px;
}


#log {
   display:none;
   position: relative;
   font-weight: bolder;
   font-size: 0.8em;
   text-align: center;
}

canvas {
    position: fixed;
    display: block;
    border: 3px solid #eee;
    margin: auto;
    border-radius: 7px;
    box-shadow: 0 0 15px;
}

#info {
    margin-left: 40px;
    color: red;
}
button {
    border:1px solid white;
    border-radius: 7px;
    box-shadow: 0 0 5px, inset 0 0 25px;
    padding: 10px 40px;
    background-color: #f3f3f3;
    font-weight: bold;
    outline-style: none;
}

#btn-left, #btn-right {
    border-radius: 50%;
    padding: 0 20px ;
    font-size: 2em;
}

#infdiv {
    display:none;
    position: relative;
    margin-auto
    width: 80%;
    border: 3px solid lightblue;
    background-color: white;
    padding: 10px;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0 0 20px;
    font-weight: bolder;
    font-size: 0.9em;
}

.modal {
  border-radius: 10px;
  display: none;
  position: relative;
  z-index: 99;
  overflow: auto;
  background-color: rgba(0,100,0,0.5);
}


.modal-content {
  color: white;
  background-color: rgba(0,100,0,0.4);
  margin: 15% auto;
  padding: 20px;
  border: 2px solid white;
  border-radius: 10px;
  width: 80%;
  text-align: center;
}


.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

Spoiler: Javascript

var w, h, k, xo, yo,
units = [],
    icons = [],
    bullets = [],
    enemies = [],
    explosions = [],
    dif = [' practice', ' easy', ' medium', ' hard', ' harder', ' hardcore', ' pro', ' deathmatch', ' godlike', ' impossible'],
    gameTime = 0,
    isGameOver,
    nextwave = 0,
    enemydep = 1,
    firstwave = false,
    deployarea = false,
    counter = 0,
    counter2 = 0,
    gameNum = 0,
    game_paused = false,
    lvl = 0,     // 0...9
    inf = function ()
    {
        var popup = document.getElementById('infdiv');
        var btn = document.getElementById('info');
        if (popup.style.display !== 'block')
        {
            popup.style.display = 'block';
            info.style.color = 'white';
            info.style.backgroundColor = 'red';
        }
        else
        {
            popup.style.display = 'none';
            info.style.color = 'red';
            info.style.backgroundColor = '#f3f3f3';
        }
    },
    changeLvl = function (op) {
        if (op == 1 && lvl < 9) {
            lvl++;
        }
        if (op == 0 && lvl > 0) {     
            lvl--;
        }
  
        var _dif = document.getElementsByClassName("dif");
            _dif[1].innerHTML = dif[lvl];
    };



(function ()
{
    function Sprite(url, pos, size, resized, animspeed, frames, _index, once)
    {
        this.pos = pos;
        this.size = size;
        this.resized = resized;
        this.url = url;
        this.animspeed = animspeed;
        this.frames = frames;
        this._index = _index;
        this.once = once;
    }

    Sprite.prototype =
    {

        update: function (dt)
        {

                        this._index += this.animspeed * dt;

              
        },



                 render: function (ctx)
        {

            var frame;


                  
            if (this.animspeed > 0)
            {          
                var max = this.frames.length;          
                var idx = Math.floor(this._index);                frame = this.frames[idx % max];         
                if (this.once && idx >= max)
                {                    this.done = true;              
                    return;          
                }      
            }      
            else
            {                frame = 0;      
            }

                     
            var x = this.pos[0];
            var y = this.pos[1];

             x += frame * this.size[0];   ctx.drawImage(resources.get(this.url),  x, y,  this.size[0], this.size[1],  0, 0,  this.resized[0], this.resized[1]);

              
        }

      
    };

        window.Sprite = Sprite;
})();

(function ()
{
    function Unit(status, pos, hp, speed, maxspeed, range, damage, reload, angle, defaultangle, dir, sprite)
    {
        this.status = status;
        this.pos = pos;
        this.hp = hp;
        this.maxhp = hp;
        this.speed = speed;
        this.maxspeed = maxspeed;
        this.range = range;
        this.damage = damage;
        this.reload = reload;
        this.angle = angle;
        this.defaultangle = defaultangle;
        this.dir = dir;
        this.sprite = sprite
    }

    Unit.prototype =
    {

                 getAngle: function (target)
        {

            var x = this.pos[0] - target[0];
            var y = this.pos[1] - target[1];
            if (x < 0)
            {
                return Math.floor(Math.atan(y / x) * (180 / Math.PI));
            }
            else
            {
                return Math.floor(Math.atan(y / x) * (180 / Math.PI) - 180);
            }
        },

        moveAhead: function (dt)
        {
            var rad = this.angle / (180 / Math.PI);
            this.pos[0] += Math.cos(rad) * this.speed * dt * this.dir;
            this.pos[1] += Math.sin(rad) * this.speed * dt * this.dir;
      
        },

        findTarget: function (t)
        {
            for (i = 0; i < t.length; i++)
            {

                var dis = this.getDistance(t[i]);
                if (dis < this.range && !t[i].destroyed && t[i].time > 0.7 && t[i].pos[1] > k)
                {
                    this.target = t[i];
                    this.status = "targetfound";
                    return;
                }
            }

        },

        avoidCollision: function (list, ownindx, dt)
        {

            var l = list;

            for (i = 0; i < l.length; i++)
            {
                if (i == ownindx) continue;
                if (this.getDistance(l[i]) < k * 8)
                {
                  for (var sec = 2; sec > 0; sec--) {

                    var ownfuturepos = [this.pos[0] + (Math.cos(this.angle / (180 / Math.PI)) * this.speed * sec * this.dir), this.pos[1] + (Math.sin(this.angle / (180 / Math.PI)) * this.speed * sec * this.dir)];

                    var allyfuturepos = [l[i].pos[0] + (Math.cos(l[i].angle / (180 / Math.PI)) * l[i].speed * sec * this.dir), l[i].pos[1] + (Math.sin(l[i].angle / (180 / Math.PI)) * l[i].speed * sec * this.dir)];
                    if (getDistance(ownfuturepos, allyfuturepos) < k * 3 && this.pos[1] * this.dir > l[i].pos[1] * l[i].dir && Math.abs(ownfuturepos[0] - allyfuturepos[0]) < this.sprite.resized[0])
                    {
                        this.speed -= 160/Math.pow(sec, 4) * dt;
                    }
                 }

                }
            }


        },

        getDistance: function (t)
        {

            return Math.floor(Math.sqrt(Math.pow(this.pos[0] - t.pos[0], 2) + Math.pow(this.pos[1] - t.pos[1], 2)));
        },

        fireOnTarget: function ()
        {

            var x = Math.floor(this.pos[0] + ((this.sprite.resized[1] / 2 * this.dir) * Math.cos(this.angle / (180 / Math.PI))));
            var y = Math.floor(this.pos[1] + ((this.sprite.resized[0] / 2 * this.dir) * Math.sin(this.angle / (180 / Math.PI))));
            bullets.push(
            {
                pos: [x, y],
                target: this.target,
                speed: k * 12,
                damage: this.damage,
                angle: this.angle + getRandom (-5,3),
                dir: this.dir,

            });

            this.lastshot = 0;

        }
    };

        window.Unit = Unit;
})();

var getRandom = function (min, max)
{
    return Math.floor(Math.random() * (max - min + 1)) + min;
};

var getDistance = function (own, ally)
{

    return Math.floor(Math.sqrt(Math.pow(own[0] - ally[0], 2) + Math.pow(own[1] - ally[1], 2)));
};



var deployUnit = function (unit, pos)
{
    var u = unit;
    units.push(new Unit(u[0], u[1], u[2], u[3], u[4], u[5], u[6], u[7], u[8], u[9], u[10], u[11], u[12], u[13]));
    units[units.length - 1].pos = pos;
    deployarea = false;
};

var deployEnemy = function (unit, pos)
{
    var u = unit;
    enemies.push(new Unit(u[0], u[1], u[2], u[3], u[4], u[5], u[6], u[7], u[8], u[9], u[10], u[11], u[12], u[13]));
    enemies[enemies.length - 1].pos = pos;

};



var returnToBase = function (icon)
{
    icon.pos = icon.defaultpos;
    icon.dragable = false;
};

var gameOver = function (a)
{

    var _min = Math.floor(gameTime / 60);
    var _sec = ('0' + Math.floor(gameTime % 60)).slice(-2);


    switch (a)
    {

    case 'win':

        alert("Mission completed! Your time is " + _min + ':' + _sec + '\n\nLosses: ' + counter + ' units.\n\nEnemies destroyed: ' + counter2 + '.');

        var log_item = "<p>Game " + ++gameNum + ":  Win ⏲" + _min + ':' + _sec + ' /' + dif[lvl] + ' /' + "</p>";
        if (lvl < dif.length - 1) lvl++;
        var log = document.getElementById('log');
        log.innerHTML += log_item;
        document.body.style.paddingTop = 50 - (gameNum * 3) + "%";
        log.style.display = "block";
        loader();
        break;

    case 'loss':
        alert("Mission failed!" + '\n\nLosses: ' + counter + ' units.\n\nEnemies destroyed: ' + counter2 + '.');

        var log_item = "<p>Game " + ++gameNum + ":  Fail ⏲" + _min + ':' + _sec + ' /' + dif[lvl] + ' /' + "</p>";
        if (lvl > 0) lvl--;
        var log = document.getElementById('log');
        log.innerHTML += log_item;
        document.body.style.paddingTop = 50 - (gameNum * 3)+ "%";
        log.style.display = "block";
        loader();
        break;

    }
}

var reset = function ()
{

    units = [];
    icons = [];
    bullets = [];
    enemies = [];
    explosions = [];
    isGameOver = false;
    gameTime = 0;
    enemydep = 1;
    firstwave = false;
    nextwave = 0;
    deployarea = false;
    counter = 0;
    counter2 = 0;
}

var xxx = 0,
    yyy = 0;
var mouse =
{
    x: 0,
    y: 0,
    down: false
}

/////////////////////////////

var startGame = function ()
{

    reset();

    var modal = document.getElementById("myModal");
    var span = document.getElementsByClassName("close")[0];
    var p = document.getElementsByClassName("modal-text")[0];
    span.onclick = function() {
         modal.style.display = "none";
         game_paused = !game_paused;
    }

    var log = document.getElementById('log');
    var popup = document.getElementById('infdiv');


    log.style.display = "none";
    popup.style.display = 'none';
    document.body.style.paddingTop = 0;
  
    var maindiv = document.getElementById("main");

    maindiv.innerHTML = '<canvas id="c"></canvas>';

    var c = document.getElementById("c");

    var ctx = c.getContext("2d");

    w = window.innerWidth;
    h = window.innerHeight;


    if (w < h) {
        c.width = w - 46;
        c.height = c.width/0.7;
    } else {
        c.height = h - 46;
        c.width = c.height * 0.7;
    }

    k = c.width / 26;

    xo = c.offsetLeft;
    yo = c.offsetTop;


    ////

    icons = [
    {
        active: true,
        pos: [c.width / 28, c.height - c.height / 8],
        defaultpos: [c.width / 28, c.height - c.height / 8],
        respawn: false,
        respawnrate: 1,
        sprite: new Sprite('https://opengameart.org/sites/default/files/tanks_3.png', [55, 76], [194, 134], [c.width / 5.5, c.height / 10.5])
    },
    {
        active: true,
        pos: [c.width / 3.4, c.height - c.height / 8.5],
        defaultpos: [c.width / 3.4, c.height - c.height / 8.5],
        respawn: false,
        respawnrate: 3,
        sprite: new Sprite('https://opengameart.org/sites/default/files/tanks_3.png', [71, 600], [159, 130], [c.width / 6.5, c.height / 12])
    },
    {
        active: true,
        pos: [c.width / 1.85, c.height - c.height / 8.2],
        defaultpos: [c.width / 1.85, c.height - c.height / 8.2],
        respawn: false,
        respawnrate: 0.5,
        sprite: new Sprite('https://opengameart.org/sites/default/files/tanks_3.png', [52, 269], [205, 124], [c.width / 5.8, c.height / 12])
    },
    {
        active: false,
        pos: [c.width / 1.27, c.height - c.height / 8.2],
        defaultpos: [c.width / 1.27, c.height - c.height / 8.2],
        respawn: false,
        respawnrate: 0.5,
        sprite: new Sprite('https://opengameart.org/sites/default/files/tanks_3.png', [68, 434], [230 - 68, 565 - 434], [c.width / 5.8, c.height / 12])
    }];

    ///

    c.addEventListener("touchmove", function (event)
    {

        var touch = event.touches[0];
        xxx = touch.pageX - xo - 3;
        yyy = touch.pageY - yo - 3;

        checkIcons(xxx, yyy);

        event.preventDefault();
    }, false);

    c.addEventListener("touchend", function (event)
    {

        checkDeployment(xxx, yyy);

    }, false);

    c.addEventListener("mousemove", function (event)
    {
        mouse.x = event.pageX - xo - 3;
        mouse.y = event.pageY - yo - 3;
    }, false);

    c.addEventListener("mousedown", function ()
    {
        mouse.down = true;
        checkIcons(mouse.x, mouse.y);

    }, false);

    c.addEventListener("mouseup", function ()
    {
        mouse.down = false;
        checkDeployment(mouse.x, mouse.y);
    }, false);

    function checkIcons(xx, yy)
    {

        if (xx > icons[0].pos[0] && xx < icons[0].pos[0] + (k * 5) && yy > icons[0].pos[1] - (k * 3) && yy < icons[0].pos[1] + (k * 3) && !icons[0].respawn  && !game_paused)
        {
            if (!icons[1].dragable && !icons[2].dragable)
            {
                icons[0].dragable = true;
                basictank[0] = 'readyfordeploy';
                deployarea = true;
            }
        }

        if (xx > icons[1].pos[0] && xx < icons[1].pos[0] + (k * 5) && yy > icons[1].pos[1] - (k * 3) && yy < icons[1].pos[1] + (k * 3) && !icons[1].respawn  && !game_paused)
        {
            if (!icons[0].dragable && !icons[2].dragable)
            {
                icons[1].dragable = true;
                lighttank[0] = 'readyfordeploy';
                deployarea = true;

            }
        }

        if (xx > icons[2].pos[0] && xx < icons[2].pos[0] + (k * 5) && yy > icons[2].pos[1] - (k * 3) && yy < icons[2].pos[1] + (k * 3) && !icons[2].respawn  && !game_paused)
        {
            if (!icons[0].dragable && !icons[1].dragable)
            {
                icons[2].dragable = true;
                ttank[0] = 'readyfordeploy';
                deployarea = true;

            }
        }
  
        if (xx > icons[3].pos[0] && xx < icons[3].pos[0] + (k * 5) && yy > icons[3].pos[1] - (k * 3) && yy < icons[3].pos[1] + (k * 3))
        {
           game_paused = !game_paused;
    
           if(modal.style.display == "block") {
                modal.style.display = "none";
           } else {
        
                p.innerHTML = 'Please, donate 100500 bucks to obtain this fabulous, innovative, wirelessly rechargeable, eco/vegan/gay friendly machine of death! <br/>Thank you!';
                modal.style.width = c.width*0.8 + "px";
                modal.style.marginLeft = c.width*0.1 + xo + "px";
                modal.style.display = "block";
           }
    
    
    
        }
    }

    function checkDeployment(xx, yy)
    {

        var inside = false;

        if (xx > c.width / 100 && yy > c.height / 2 && xx < c.width - c.width / 100 - 3 && yy < c.height / 2 + c.height / 3.7)
        {
            inside = true;
        }
          
        var allies = false;
        for(var i = 0; i < units.length; i++) {
            if (getDistance([xx,yy], units[i].pos) <  2*k) allies = true;
        }
  
        if (basictank[0] == 'readyfordeploy' && inside && !allies)
        {
            basictank[0] = ' ';
            deployUnit(basictank, [xx, yy]);
            units[units.length - 1].status = 'acceleration';
            icons[0].pos = [icons[0].defaultpos[0], icons[0].defaultpos[1] + c.width / 4];
            icons[0].dragable = false;
            icons[0].respawn = true;
            deployarea = false;
        }
        else if ( basictank[0] == 'readyfordeploy' && (!inside && !icons[0].respawn || allies))
        {
            returnToBase(icons[0]);
            basictank[0] = ' '
        }

        if (lighttank[0] == 'readyfordeploy' && inside && !allies)
        {
            lighttank[0] = ' ';
            deployUnit(lighttank, [xx, yy]);
            units[units.length - 1].status = 'acceleration';
            icons[1].pos = [icons[1].defaultpos[0], icons[1].defaultpos[1] + c.width / 4];;
            icons[1].dragable = false;
            icons[1].respawn = true;

        }
        else if ( lighttank[0] == 'readyfordeploy' && (!inside && !icons[1].respawn || allies))
        {
            returnToBase(icons[1]);
            lighttank[0] = " ";
        }

        if (ttank[0] == 'readyfordeploy' && inside && !allies)
        {
            ttank[0] = ' ';
            deployUnit(ttank, [xx, yy]);
            units[units.length - 1].status = 'acceleration';
            icons[2].pos = [icons[2].defaultpos[0], icons[2].defaultpos[1] + c.width / 4];;
            icons[2].dragable = false;
            icons[2].respawn = true;

        }
        else if ( ttank[0] == 'readyfordeploy' && (!inside && !icons[2].respawn || allies))
        {
            returnToBase(icons[2]);
            ttank[0] = " ";
        }

    }


    lastTime = Date.now();


    // units
    // stats -- status, pos, hp, speed, maxspeed, range, damage, reload, angle, defaultangle , dir, sprite

    var basictank = ['acceleration', [0, 0], 1500, 0, k * 1.5, k * 7, 399, 1.3, - 90, - 90, 1, new Sprite('https://opengameart.org/sites/default/files/tanks_3.png', [55, 76], [194, 135], [c.width / 11, c.height / 21])];

    var lighttank = ['acceleration', [0, 0], 300, 0, k * 5.5, k * 10, 149, 0.9, - 90, - 90, 1, new Sprite("https://opengameart.org/sites/default/files/tanks_3.png", [71, 600], [159, 130], [c.width / 13, c.height / 24])];

    var ttank = ['acceleration', [0, 0], 150, 0, k * 3.5, k * 12.5, 30, 0.05, - 90, - 90, 1, new Sprite("https://opengameart.org/sites/default/files/tanks_3.png", [52, 269], [205, 124], [c.width / 11.6, c.height / 24])];
    //enemy units
    var enemybasic = ['acceleration', [0, 0], 1500, 0, k * 1.5, k * 7, 399, 1.3, - 90, - 90, - 1, new Sprite('https://opengameart.org/sites/default/files/tanks_3.png', [365, 76], [194, 135], [c.width / 11, c.height / 21])];

    var enemylight = ['acceleration', [200, 200], 300, 0, k * 5.5, k * 10, 149, 0.7, - 90, - 90, - 1, new Sprite("https://opengameart.org/sites/default/files/tanks_3.png", [395, 600], [159, 130], [c.width / 13, c.height / 24])];

    var enemyttank = ['acceleration', [0, 0], 150, 0, k * 3.5, k * 12.5, 10, 0.05, - 90, - 90, - 1, new Sprite("https://opengameart.org/sites/default/files/tanks_3.png", [362, 269], [205, 124], [c.width / 11.6, c.height / 24])];



    main()

    // The main game loop



    function main()
    {

      
        var now = Date.now();

        if (!game_paused) {
      
          var dt = (now - lastTime) / 1000;

          update(dt);

          render();
  
        }

        lastTime = now;

    
        if  (!isGameOver) requestAnimFrame(main);

    };

    function update(dt)
    {

            gameTime += dt;
      
            if (nextwave < 0) {
                nextwave = (enemydep * (18 - lvl)-gameTime + 2).toFixed(0)
            } else {
               nextwave -= dt;
            }

        if (Math.floor(gameTime) == 1 && firstwave == false)
        {
      
          if (lvl < 3) {
      
            if (lvl >= 0) {
                deployEnemy(enemybasic, [c.width / 4, c.height / 5]);
                deployEnemy(enemybasic, [c.width - (c.width / 4), c.height / 5]);
            }
      
            if (lvl >= 1) {
                deployEnemy(enemyttank, [c.width / 2, c.height / 20]);
            }
      
            if (lvl >= 2) {
                deployEnemy(enemylight, [c.width / 5, c.height / 18]);
                deployEnemy(enemylight, [c.width - (c.width / 5), c.height / 18]);
            }
          }
    
          if (lvl > 2 && lvl < 6) {
        
             if (lvl >= 3) {
                deployEnemy(enemybasic, [c.width / 2, c.height / 4]);
                deployEnemy(enemylight, [c.width / 2 - c.width / 16, c.height / 7]);
                deployEnemy(enemylight, [c.width / 2 + c.width / 16, c.height / 7]);
                deployEnemy(enemyttank, [c.width / 2, c.height / 14]);
                deployEnemy(enemyttank, [c.width / 2 - c.width / 8, c.height / 14]);
                deployEnemy(enemyttank, [c.width / 2 + c.width / 8, c.height / 14]);
          
                if (lvl == 3) {
                    deployEnemy(enemyttank, [c.width / 2 - c.width / 4, c.height / 14]);
                    deployEnemy(enemyttank, [c.width / 2 + c.width / 4, c.height / 14]);
                }
          
          
            }
      
            if (lvl >= 4) {
                deployEnemy(enemylight, [c.width / 8 - c.width / 11,  - c.height / 4]);
            }
      
            if (lvl >= 5) {
                deployEnemy(enemylight, [c.width + c.width / 64 ,  - c.height / 2]);
            }
        
          }
    
          if (lvl > 5 && lvl < 9) {
        
              if (lvl >= 6) {
                   deployEnemy(enemybasic, [c.width / 2, c.height / 4]);
                   deployEnemy(enemybasic, [c.width / 2 + c.width / 8, c.height / 4]);
                   deployEnemy(enemybasic, [c.width / 2 - c.width / 8, c.height / 4]);
          
                deployEnemy(enemyttank, [c.width / 2, c.height / 7]);
                deployEnemy(enemyttank, [c.width / 2 - c.width / 8, c.height / 7]);
                deployEnemy(enemyttank, [c.width / 2 + c.width / 8, c.height / 7]);
              }
        
              if(lvl >= 7) {
                  deployEnemy(enemylight, [c.width / 8 - c.width / 11, c.height / 14]);
                  deployEnemy(enemylight, [c.width - (c.width / 8 - c.width / 11), c.height / 14]);
              }
        
              if(lvl >= 8) {
                  deployEnemy(enemylight, [c.width / 8 - c.width / 11,  - c.height / 4]);
                  deployEnemy(enemylight, [c.width - (c.width / 8 - c.width / 11),  - c.height / 4]);
              }
        
        
        
          }
    
          if (lvl == 9) {
        
              for (var x = 0; x < 7; x++) {
                  setTimeout(deployEnemy, x* 50, enemybasic, [c.width/8 + x*(c.width/8), c.height / 4])
              }
              for (var x = 0; x < 6; x++) {
                  setTimeout(deployEnemy, x* 50, enemylight, [c.width/8 + x*(c.width/8) + c.width / 16, c.height / 7])
              }
              for (var x = 0; x < 7; x++) {
                  setTimeout(deployEnemy, x* 50, enemyttank, [c.width/8 + x*(c.width/8), c.height / 20])
              }
        
          }
      
      

            firstwave = true;
      
        }

        if (Math.floor(gameTime) == enemydep * (18 - lvl % 17))
        {

            deployEnemy(enemybasic, [getRandom(30, c.width - 30), getRandom(-20, - 40)]);
            deployEnemy(enemylight, [getRandom(30, c.width - 30), getRandom(-20, - 40) - (k * 2)]);
            deployEnemy(enemylight, [getRandom(30, c.width - 30), getRandom(-20, - 40) - (k * 2)]);
            deployEnemy(enemyttank, [getRandom(30, c.width - 30), getRandom(-20, - 40) - (k * 4)]);
            deployEnemy(enemyttank, [getRandom(30, c.width - 30), getRandom(-20, - 40) - (k * 4)]);
            enemydep++;
      
        }

            updateEntities(dt, units);
        updateEntities(dt, enemies);
        updateBullets(dt);
        updateIcons(dt);

          //   checkCollisions();

    };

    function updateIcons(dt)
    {

        for (i = 0; i < icons.length; i++)
        {
            if (icons[i].pos[1] > icons[i].defaultpos[1] && icons[i].respawn == true)
            {
                icons[i].pos[1] -= icons[i].respawnrate * k * dt;
            }
            else
            {
                icons[i].respawn = false;
            }
        }
    };

    function updateEntities(dt, list)
    {

             // Update the tank position




      
        for (var i = 0; i < list.length; i++)
        {

            var u = list[i];
            var u2;

            list == units ? u2 = enemies : u2 = units;


            u.time = u.time + dt || 0;
            u.lastshot = u.lastshot + dt || 0;
            u.avoidCollision(list, i, dt);
            //remove
            if (u.destroyed)
            {
                list.splice(i, 1);
                i--;
                if (list == units)
                {
                    counter++;
                }
                else
                {
                    counter2++;
                }
            }
            else if (list == enemies && u.pos[1] > c.height - (c.width / 4 + 2 * k))
            {

                isGameOver = true;
                gameOver('loss');
                break;

            }
            else if (
            list == units && u.pos[1] < k * 2)
            {
                isGameOver = true;
                gameOver('win');
                break;
            }

            if (u.status == "acceleration" && u.speed < u.maxspeed)
            {

                u.speed += 15 * dt;
                switch (list)
                {
                case units:
                    if (u.angle < u.defaultangle)
                    {
                        u.angle += Math.floor(80 * dt * u.dir);
                    }
                    else if (u.angle > u.defaultangle)
                    {
                        u.angle -= Math.floor(80 * dt * u.dir);
                    }
                    break;
                case enemies:

                    u.cang = u.defaultangle;
                    if (u.cang < -90)
                    {
                        u.cang += 180;
                    }
                    else if (u.cang > -90)
                    {
                        u.cang -= 180;
                    }
                    if (u.cang < u.angle)
                    {
                        u.angle -= Math.floor(75 * dt);
                    }
                    else if (u.cang > u.angle)
                    {
                        u.angle += Math.floor(75 * dt);
                    }



                }
            }



            if (u.time > 1 && !u.target && u.pos[1] > k)
            {
                u.findTarget(u2);
            }

            if (u.target && u.target.destroyed)
            {
                u.status = 'acceleration';
                delete u.target;

            }
            else if (u.status == "targetfound" && !u.target.destroyed)
            {

                if (u.speed > 0)
                {
                    u.speed -= u.maxspeed * 2 * dt;
                }
                else
                {
                    u.speed = 0
                }


          
                    u.cang = Math.floor(u.getAngle(u.target.pos));
              
                    if (list == enemies ) {
                        if (u.cang < -90)
                    {
                        u.cang += 180;
                    }
                    else if (u.cang > -90)
                    {
                        u.cang -= 180;
                    }
                    }
                    if (u.cang > u.angle && u.cang < u.angle + 3)
                    {
                        u.angle = u.cang;
                    } else if (u.cang > u.angle )
                    {
                        u.angle += Math.floor(150 * dt);
                    }
                    else if (u.cang < u.angle && u.cang > u.angle - 3)
                    {
                        u.angle = u.cang;
                    } else if (u.cang < u.angle )
                    {
                        u.angle -= Math.floor(150 * dt);
                    }
                          
              

          


                if (u.lastshot > u.reload && Math.floor(u.angle) == Math.floor(u.cang) && u.getDistance(u.target) < u.range)
                {

                    u.fireOnTarget();

                } else {
                     u.findTarget(u2);
                }

            }

            if (u.time > 0.7 && u.speed > 0)
            {

                u.moveAhead(dt);

            }

        };

    }

    function updateBullets(dt)
    {

        // Update all the explosions

      
        for (var i = 0; i < explosions.length; i++)
        {        explosions[i].sprite.update(dt);

                     // Remove if animation is done
              
            if (explosions[i].sprite.done)
            {            explosions.splice(i, 1);            i--;  
            }
        }

             // Update all the bullets

      
        for (var i = 0; i < bullets.length; i++)
        {

              
            var b = bullets[i];

            var rad = b.angle / (180 / Math.PI);
            b.pos[0] += Math.cos(rad) * b.speed * dt * b.dir;
            b.pos[1] += Math.sin(rad) * b.speed * dt * b.dir;


                            // Remove the bullet

              
            if (b.pos[1] < b.target.pos[1] + k && b.pos[1] > b.target.pos[1] - k && b.pos[0] < b.target.pos[0] + k && b.pos[0] > b.target.pos[0] - k)
            {         bullets.splice(i, 1);         i--;
                if (b.target.hp >= 0 && !b.target.destroyed)
                {
                    b.target.hp -= b.damage;
                }
                if (b.target.hp < 0)
                {
                    b.target.destroyed = true;
                    b.target.hp = 0;  // Add an explosion
                                    explosions.push(
                    {                    pos: b.target.pos,
                                            sprite: new Sprite("https://hsto.org/storage2/aeb/045/378/aeb0453784033c5b9c0a700f5952d84b.png", [0, 117],   [39, 39], [k * 3.2, k * 3.2], 14,   [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],  null,  true)
                    });
                }
            }  
        }

    
    }



    function render()
    {

        if (!isGameOver)
        {

            renderArea(ctx);
            renderEntities(enemies);
            renderEntities(units);
            renderBullets();
            renderEntities(explosions);


        }
    };

    function renderArea(ctx)  {

    ctx.globalAlpha = 0.5;
  
    for (x = 0;x * 102 < c.width;x++) {
        for (y = 0;y * 102 < c.height;y++) { ctx.drawImage(resources.get('https://opengameart.org/sites/default/files/Ground_03.png'), 0, 0, 512, 512, x*102, y*102,102,102);
        }
    }
    ctx.globalAlpha = 1;
   ctx.fillStyle = "rgba(250,250,250,0.19)";
        ctx.fillRect(0, 0, c.width, c.height );
        ctx.fillStyle = "rgba(50,200,50,0.9)";
        ctx.fillRect(0, 0, c.width, c.height / 20);
        ctx.fillStyle = " rgba(200,50,50,0.7)";
        ctx.fillRect(0, c.height - c.width / 4 - c.height / 20, c.width, c.height / 20);
        ctx.font = c.height / 24 + "px Arial";
        ctx.fillStyle = " rgba(250,250,250,0.7)";
  
ctx.fillText("NEXT WAVE IN " + Math.round  (nextwave) , c.width/10, c.height/22); 


        ctx.beginPath();
        for (var x = c.width / 4; x < c.width; x += c.width / 4)
        {

            ctx.moveTo(x + 0.1, c.height - c.width / 4);
            ctx.lineTo(x + 0.1, c.height);
        };

        ctx.moveTo(0, c.height - c.width / 4);
        ctx.lineTo(c.width, c.height - c.width / 4);
        ctx.closePath();
        ctx.strokeStyle = "#eee";
        ctx.stroke();

        if (deployarea === true)
        {
            drawDeployArea();
        }


    };

    function drawDeployArea()
    {
  
        ctx.beginPath();
        ctx.rect(c.width / 100 -2, c.height / 2 -2, c.width - c.width / 100 - 3 +4, c.height / 3.7 +4);
        ctx.strokeStyle = "darkgreen";
         ctx.closePath();
        ctx.stroke();
  
        ctx.beginPath();
        ctx.rect(c.width / 100, c.height / 2, c.width - c.width / 100 - 3, c.height / 3.7);
        ctx.strokeStyle = "white";
        ctx.closePath();
        ctx.stroke();


    }

    function drawTrLights()
    {

        for (i = 0; i < icons.length; i++)
        {

            if (icons[i].respawn == true || !icons[i].active)
            {
                ctx.fillStyle = "red";
            }
            else
            {
                ctx.fillStyle = "green";
            }
            ctx.fillRect(c.width / 4.8 + c.width / 4 * i, c.height - c.width / 4.1, c.width / 30, c.width / 30);
        };
    };


    function renderEntities(list)
    {

      
        for (var i = 0; i < list.length; i++)
        {

                    renderEntity(list[i]);
  
        }
  
        drawTrLights();
        drawIcons(icons);
  
    }

    function renderBullets() {
        for (var i = 0; i < bullets.length; i++)
        {
            
         ctx.save();
  
        ctx.fillStyle = "black";
         ctx.beginPath ();
         ctx.arc(bullets[i].pos[0], bullets[i].pos[1], 1 + bullets[i].damage/300, 0, 2*Math.PI) ;
        ctx.fill();
           ctx.restore();
        }
    
        }


    function drawIcons(list)
    {
        for (var i = 0; i < list.length; i++)
        {

            if (!list[i].dragable)
            {

                   ctx.save();
                ctx.translate(list[i].pos[0] + list[i].sprite.resized[0] / 2, list[i].pos[1] + list[i].sprite.resized[1] / 2);
                ctx.rotate(Math.PI / 180 * (-90));
                ctx.translate(-list[i].sprite.resized[0] / 2, - list[i].sprite.resized[1] / 2);
                if(!list[i].active) ctx.globalAlpha = 0.2;
                list[i].sprite.render(ctx);
          
                ctx.restore();
          
      

            }
            else
            {

                ctx.save();

                if (mouse.down)
                {
                    ctx.translate(mouse.x, mouse.y);
                }
                else
                {
                    ctx.translate(xxx, yyy);
                }
                ctx.rotate(Math.PI / 180 * (-90));
                ctx.translate(-list[i].sprite.resized[0] / 2, - list[i].sprite.resized[1] / 2);
          
      

                list[i].sprite.render(ctx);

                list[i].pos = [xxx, yyy]

                ctx.restore();
            }
        }
    };


    function renderEntity(entity)
    {


        if (!entity.destroyed)
        {    ctx.save();
            ctx.translate(entity.pos[0], entity.pos[1]);

            if (entity.time && entity.time < 0.7)
            {
                ctx.scale(1.9 - entity.time * entity.time * 1.7, 1.9 - entity.time * entity.time * 1.7);
            }

            ctx.rotate(Math.PI / 180 * (entity.angle));

            ctx.translate(-entity.sprite.resized[0] / 2, - entity.sprite.resized[1] / 2);

             entity.sprite.render(ctx);
            renderHP(entity);  ctx.restore();
        }
    }

    function renderHP(entity)
    {

        if (entity.time > 0.8)
        {
            var hp = entity.hp * 100 / entity.maxhp;
            if (hp < 0) hp = 0;
            if (entity.dir < 0)
            {
                var reverse = entity.sprite.resized[0];
            }
            else
            {
                var reverse = 0;
            }

            ctx.beginPath();
            ctx.lineWidth = k / 2.5;
            ctx.lineCap = "round";
            ctx.strokeStyle = "black";
            ctx.moveTo(0 + reverse, 0);
            ctx.lineTo(0 + reverse, entity.sprite.resized[1]);
            ctx.stroke();


            ctx.beginPath();
            ctx.lineWidth = k / 3.2;
            ctx.lineCap = "round";
            ctx.strokeStyle = "lightgrey";
            ctx.moveTo(0 + reverse, 0);
            ctx.lineTo(0 + reverse, entity.sprite.resized[1]);
            ctx.stroke();

            ctx.beginPath();

            ctx.lineWidth = k / 4;

            ctx.lineCap = "round";
            ctx.strokeStyle = "rgb(" + Math.floor(100 - hp * 2.56) + "," + Math.floor(hp * 2.56) + ",0)";
            ctx.moveTo(0 + reverse, 0);
            ctx.lineTo(0 + reverse, hp / 100 * entity.sprite.resized[1]);
            ctx.stroke();
            ctx.lineWidth = 1;
        }
    }

};






/////////////^^^^^^^^^^^^^^////////////

var requestAnimFrame = (function ()
{

  
    return window.requestAnimationFrame ||

            window.webkitRequestAnimationFrame ||

            window.mozRequestAnimationFrame ||

            window.oRequestAnimationFrame ||

            window.msRequestAnimationFrame ||

      
    function (callback)
    {

                    window.setTimeout(callback, 1000 / 60);

          
    };
})();

///^^^^^^^///////////^^^^/////////

function loader()
{

    var maindiv = document.getElementById("main");


    if (lvl < 0 || lvl > 9) {
        lvl = 0;
    }

    maindiv.innerHTML = '<button id="start" onclick="startGame ()">Start Game</button><button id="info" onclick="inf()">Info</button><br/><span class="dif">Difficulty:</span><br/><button id="btn-left" onclick="changeLvl(0)">&lt</button><span class="dif" >' + dif[lvl] + '  </span><button id="btn-right" onclick="changeLvl (1)" >&gt</button>';

    lastTime = Date.now();

};
//////////////////////////////////

(function ()
{
    var resourceCache = {};
    var loading = [];
    var readyCallbacks = [];
    // Load an image url or an array of image urls
    function load(urlOrArr)
    {
        if (urlOrArr instanceof Array)
        {
            urlOrArr.forEach(function (url)
            {
                _load(url);
            });
        }
        else
        {
            _load(urlOrArr);
        }
    }

    function _load(url)
    {
        if (resourceCache[url])
        {
            return resourceCache[url];
        }
        else
        {
            var img = new Image();
            img.onload = function ()
            {
                resourceCache[url] = img;
                if (isReady())
                {
                    readyCallbacks.forEach(function (func)
                    {
                        func();
                    });
                }
            };
            resourceCache[url] = false;
            img.src = url;
        }
    }

    function get(url)
    {
        return resourceCache[url];
    }
    function isReady()
    {
        var ready = true;
        for (var k in resourceCache)
        {
            if (resourceCache.hasOwnProperty(k) && !resourceCache[k])
            {
                ready = false;
            }
        }
        return ready;
    }

    function onReady(func)
    {
        readyCallbacks.push(func);
    }
    window.resources =
    {
        load: load,
        get: get,
        onReady: onReady,
        isReady: isReady
    };
})();

resources.load([

"https://opengameart.org/sites/default/files/tanks_3.png",

"https://hsto.org/storage2/aeb/045/378/aeb0453784033c5b9c0a700f5952d84b.png",

"https://opengameart.org/sites/default/files/Ground_03.png"
]);

resources.onReady(loader);

-----------------------------------------------------------------------------------------------------------------------------
Youtube

Spoiler: Music Player App - html

<!-- Created by Dominik Saftig -->

<!--Created by Dominik Saftig-->

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="author" content="sheikh toufeeq">
<title>Solo Music</title>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
/*

*/
:root {
 --primary:#f33449;
 --white:#fff;
 --grey:#555;
}
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body {
font-family: 'Open Sans', sans-serif;
font-size:1rem;
background:#000;
}
body.dark {
 --white:#000;
 --grey:#fff;
}
a,a:hover {
text-decoration:none;
}
img{
 max-width:100%;
}
p{
 color:var(--grey);
}
.sec {
 background:var(--white);
 width:100%;
 min-height:100vh;
 max-width:460px;
 margin:auto;
 animation:fadeIn 0.5s ease;
}
@keyframes fadeIn{
 0%{
  opacity:0;
 }
 100%{
 opacity:1;
 }
}
button{
 display:inline-block;
 outline:none;
 border:none;
 background:transparent;
}
.sec-1 {
 padding:20px;
 display:flex;
 justify-content: center;
 text-align: center;
 min-height:100vh;
}

.sec-1 svg {
 width:90%;
}
.sec-1 h1 {
  font-size:2.5rem;
}
.sec-1 h1 > span {
 color:#dd5790;
}
.sec-1 p {
 margin:10px 0 25px;
 color:#666;
 font-size:14px;
}
.sec-1 button {
 padding:12px 25px;
 background:#dd5790;
 color:#fff;
 border-radius:30px;
}
.hide {
 display:none;
}
.header {
 margin:0 10px;
 padding:8px 10px;
 display:flex;
 justify-content:space-between;
 border-bottom:2px solid #ccc;
 color:var(--grey);
}
.header button {
 color:var(--white);
 padding:6px 10px;
 font-size:14px;
 cursor:pointer;
 background:#dd5790;
 border-radius:30px;
}
.header button:hover {
 opacity:0.7;
}
body.dark .header button {
 background:#fff;
}
.music-list {
 padding-bottom:70px;
}
.music {
 padding:10px 10px;
 display:flex;
 align-items: center;
 width:100%;
 border-bottom:1px solid #dedede;
 cursor:pointer;
 color:var(--grey);
}
.music.active {
 color:var(--primary);
}
.list-thumbnail {
 height:60px;
 width:60px;
 border-radius:4px;
 overflow:hidden;
}
.list-content {
 flex:1;
 padding:0 15px;
}
.list-btn {
 width:50px;
 height:50px;
}
.list-btn > i {
 font-size:40px;
 color:var(--grey);
}
.music.active .list-btn > i {
 display:none;
}
.music .equalize {
 display:none;
}
.music.active .equalize {
 display:block;
}
.music-list .equalize span {
 display:inline-block;
 height:18px;
 width:3px;
 margin:1px;
 background:var(--primary);
 animation:equalize 1s linear infinite;
 transform-origin: bottom;
}
 .equalize.pause span {
  animation-play-state:paused!important;
}
.equalize span:nth-child(2) {
 animation-delay:.3s;
}
.equalize span:nth-child(3) {
 animation-delay:.6s;
}
@keyframes equalize {
 0%, 100%{
  transform:scaleY(1);
 }
 50%{
  transform:scaleY(0.3);
 }
}

.players {
 position:fixed;
 width:100%;
 max-width:460px;
 left:0;
 bottom:0;
 z-index:5;
 background:var(--white);
 color:#555;
 transition:300ms;
}
.players.active {
 height:100vh;
 top:0;
 text-align:center;
 padding:0 20px;
 overflow-y:scroll;
 animation:fadeIn 0.5s ease;
 animation-fill-mode:both;
}
.bottom {
 display:flex;
 align-items: center;
 height:70px;
 padding:5px 10px;
 border-top:1px solid #ccc;
}
.players.active .bottom {
 display:block;
 border-top:none;
 height:auto;
 padding:0;
 margin-bottom:25px;
}
.thumbnail {
 height:60px;
 width:60px;
 overflow:hidden;
 border-radius:4px;
}
.players.active .thumbnail{
 width:220px;
 margin:40px auto;
 height:220px;
 border-radius:50%;
 background:#000;
 box-shadow:0 4px 10px rgba(0,0,0,0.2);
}

.players.active .thumbnail.spin {
 box-shadow: none;
 animation:spin 4s linear infinite;
}
.players.active .thumbnail.spin:hover {
 animation-play-state:paused;
 transition:200ms;
}
.players.active .thumbnail.spin.pause{
 animation-play-state:paused;
}
@keyframes spin {
 to{
 transform:rotate(360deg);
 }
}
.thumbnail img {
 object-fit:cover;
}

.content {
 flex:1;
 padding:0 15px;
 color:var(--grey);
}
.btn-group .material-icons {
 font-size:40px;
}
.btn-group button {
 color:var(--primary);
 cursor:pointer;
 height:60px;
 width:60px;
 border-radius:50%;
 cursor:pointer;
}
.playBtn {
 z-index:6;
}

.back-btn {
 position:absolute;
 top:10px;
 left:10px;
 height:40px;
 width:40px;
 cursor:pointer;
 border-radius:20px;
}
.dark-mode-btn {
position:absolute;
 top:10px;
 right:10px;
 height:40px;
 width:40px;
 cursor:pointer;
 border-radius:20px;
}

.back-btn:hover {
 background:rgba(255,0,0,0.2);
}
.back-btn .material-icons {
  font-size:40px;
}
body.dark .players .material-icons {
 color:#fff;
}
body.dark .players .material-icons.active  {
 color:var(--primary);
}
.prevBtn, .nextBtn, .tools , .progress-box, .back-btn, .dark-mode-btn {
 display:none;
}
.players.active .nextBtn,
.players.active .prevBtn,
.players.active .back-btn,
.players.active .dark-mode-btn {
 display:inline-block;
}
.players.active .progress-box,
.players.active .tools {
 display:flex;
}
.tools {
 width:100%;
 margin:30px 0;
 justify-content: space-evenly;
}
.tools .material-icons {
 font-size:30px;
 color:#555;
 cursor:pointer;
}
.tools .material-icons.active {
 color:var(--primary);
}
.players.active .playBtn {
 margin:0 25px;
 background:rgba(255,0,0,0.2);
 transition:0.3s;
}
.players.active .playBtn:hover {
 background:var(--primary);
 color:#fff;
}
.players.active .content h3{
 font-size:24px;
 color:var(--primary);
}
.progress-box {
 position:relative;
 margin-bottom:30px;
 display:none;
 width:100%;
 justify-content:space-between;
 font-size:14px;
}
.players.active .progress-box {
 display:flex;
}
.progress-bar {
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    z-index: 4;
    height: 5px;
    background: #ccc;
    width: 100%;
    border-radius: 30px;
    top:-10px;
}
.progress-bar::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 15px;
    width: 15px;
    border: 0;
    background: var(--primary);
    border-radius:50%;
    cursor: pointer;
}
 
.volume-box {
 display:none;
}
.players.active .volume-box {
 transform:translateY(15px);
 display: none;
}
.players.active .volume-box.show {
 display: block;
}

.volume-box .progress-bar {
 position:relative;
 width:60%;
}
.volume-box > span {
 display:inline-block;
 height:30px;
 width:30px;
 margin:0 5px;
 cursor:pointer;
 transition:200ms;
}
.volume-box > span:hover {
 color:var(--primary);
}
#audio {
 display:none;
}
</style>
</head>
<body>
<section class="sec sec-1" id="sec-1">
  <div>
   <svg id="Capa_1" enable-background="new 0 0 512 512" height="350" viewBox="0 0 512 512" width="300" xmlns="http://www.w3.org/2000/svg"><g><g><g><path d="m473.088 266.293h-57.622v-36.494c0-87.93-71.536-159.466-159.466-159.466s-159.465 71.536-159.465 159.465v36.494h-57.623v-36.494c0-119.703 97.385-217.088 217.087-217.088 119.703 0 217.088 97.385 217.088 217.088v36.495z" fill="#407093"/></g></g><g><g><path d="m256 12.711c-5.024 0-10.006.186-14.946.524 112.757 7.705 202.143 101.885 202.143 216.563v36.494h29.892v-36.494c-.001-119.702-97.386-217.087-217.089-217.087z" fill="#2b4d66"/></g></g><g><circle cx="256" cy="411.198" fill="#dd5790" r="88.091"/></g><g><path d="m304.699 337.796c9.275 13.951 14.69 30.69 14.69 48.699 0 48.651-39.44 88.091-88.091 88.091-18.009 0-34.748-5.415-48.699-14.69 15.781 23.739 42.759 39.392 73.402 39.392 48.651 0 88.091-39.44 88.091-88.091-.001-30.642-15.654-57.619-39.393-73.401z" fill="#da387d"/></g><g><path d="m67.12 439.174h-34.12c-18.225 0-33-14.775-33-33v-125.547c0-18.225 14.775-33 33-33h34.12z" fill="#dae7ef"/></g><g><path d="m444.88 247.627h34.12c18.225 0 33 14.775 33 33v125.547c0 18.225-14.775 33-33 33h-34.12z" fill="#dae7ef"/></g><path d="m33 247.627c-2.349 0-4.639.25-6.849.716v148.55c0 8.284-6.716 15-15 15h-10.647c2.709 15.498 16.222 27.281 32.496 27.281h34.12v-191.547z" fill="#c1d5e4"/><path d="m484.291 248.054c.278 1.723.428 3.489.428 5.291v125.547c0 18.225-14.775 33-33 33h-6.839v27.281h34.12c18.225 0 33-14.775 33-33v-125.546c0-16.424-12-30.04-27.709-32.573z" fill="#c1d5e4"/><g><g><path d="m194.242 274.47c-4.263 0-7.717-3.455-7.717-7.717v-62.53c0-4.262 3.455-7.717 7.717-7.717s7.717 3.455 7.717 7.717v62.53c0 4.262-3.455 7.717-7.717 7.717z" fill="#dd5790"/></g><g><path d="m348.638 263.683c-4.263 0-7.717-3.455-7.717-7.717v-40.957c0-4.262 3.455-7.717 7.717-7.717 4.263 0 7.717 3.455 7.717 7.717v40.957c0 4.262-3.454 7.717-7.717 7.717z" fill="#dd5790"/></g><g><path d="m225.121 291.84c-4.263 0-7.717-3.455-7.717-7.717v-97.27c0-4.262 3.455-7.717 7.717-7.717 4.263 0 7.717 3.455 7.717 7.717v97.27c0 4.261-3.455 7.717-7.717 7.717z" fill="#dd5790"/></g><g><path d="m256 283.155c-4.263 0-7.717-3.455-7.717-7.717v-79.9c0-4.262 3.455-7.717 7.717-7.717 4.263 0 7.717 3.455 7.717 7.717v79.9c0 4.261-3.455 7.717-7.717 7.717z" fill="#dd5790"/></g><g><path d="m317.759 291.84c-4.263 0-7.717-3.455-7.717-7.717v-97.27c0-4.262 3.455-7.717 7.717-7.717s7.717 3.455 7.717 7.717v97.27c0 4.261-3.454 7.717-7.717 7.717z" fill="#dd5790"/></g><g><path d="m286.879 252.896c-4.263 0-7.717-3.455-7.717-7.717v-19.383c0-4.262 3.455-7.717 7.717-7.717s7.717 3.455 7.717 7.717v19.383c0 4.262-3.455 7.717-7.717 7.717z" fill="#dd5790"/></g><g><path d="m163.362 252.896c-4.263 0-7.717-3.455-7.717-7.717v-19.383c0-4.262 3.455-7.717 7.717-7.717s7.717 3.455 7.717 7.717v19.383c.001 4.262-3.454 7.717-7.717 7.717z" fill="#dd5790"/></g></g><g><path d="m296.022 406.002-60.913-35.168c-4-2.309-9 .577-9 5.196v70.336c0 4.619 5 7.506 9 5.196l60.913-35.168c4-2.309 4-8.083 0-10.392z" fill="#f6f9f9"/></g><g><path d="m104.487 469.944h-34.504c-8.783 0-15.903-7.12-15.903-15.903v-221.282c0-8.783 7.12-15.903 15.903-15.903h34.504c8.783 0 15.903 7.12 15.903 15.903v221.283c-.001 8.783-7.121 15.902-15.903 15.902z" fill="#dae7ef"/></g><g><path d="m407.513 216.856h34.504c8.783 0 15.903 7.12 15.903 15.903v221.283c0 8.783-7.12 15.903-15.903 15.903h-34.504c-8.783 0-15.903-7.12-15.903-15.903v-221.283c.001-8.783 7.121-15.903 15.903-15.903z" fill="#dae7ef"/></g><g fill="#c1d5e4"><path d="m104.487 216.856h-12.223v209.061c0 8.783-7.12 15.903-15.903 15.903h-22.281v12.222c0 8.783 7.12 15.903 15.903 15.903h34.504c8.783 0 15.903-7.12 15.903-15.903v-221.283c-.001-8.783-7.12-15.903-15.903-15.903z"/><path d="m442.017 216.856h-12.222v209.061c0 8.783-7.12 15.903-15.903 15.903h-22.281v12.222c0 8.783 7.12 15.903 15.903 15.903h34.504c8.783 0 15.903-7.12 15.903-15.903v-221.283c-.001-8.783-7.121-15.903-15.904-15.903z"/></g></g></svg>
<h1>Solo <span>Music</span></h1>
<p>Create by Dominik Saftig</p>
<button onclick="showMusicList()">Let's Start</button>
  </div>
</section>
<section class="sec sec-2 hide" id="sec-2">

<header class="header">
<!-- <button onclick="filterCat('Sad')">Sad</button>
 <button onclick="filterCat('Love')">Love</button>
 <button onclick="filterCat('Dance')">Dance</button>
 <button onclick="filterCat('Romantic')">Romantic</button>
 <button onclick="filterAll()">All</button>
 -->
 <h3>All Songs</h3>
</header>

 <div class="music-list" id="music-list">
 </div>
 <audio src="" id="audio" ></audio>
 <div class="players" id="players">
   <button class="back-btn" onclick="showplayer()"><i class="material-icons" >expand_more</i></button>
   <button class="dark-mode-btn" onclick="darkMood()"><i class="material-icons" >invert_colors</i></button>
  
   <div class="bottom" >
     <div class="thumbnail" >
         <img id="thumbnail" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQRdF1EyT4zeHHIcicA4wA8uMjxoGAblXsTIiXPhdTCzbG1YI18&usqp=CAU" alt="" >
     </div>
     <div class="content" onclick="showplayer()">
       <h3 id="name">Name</h3>
       <small id="category">Category</small>
     </div>
    
     <div class="volume-box">
     <span onclick="volumeDown()"><i class="material-icons">remove</i></span>
    
     <input type="range" class="progress-bar" id="volumeBar" step="1" value="80" min="0" max="100"
      oninput="audio.volume = this.value/100">
      
     <span onclick="volumeUp()"><i class="material-icons">add</i></span>
     </div>
    
     <div class="tools" >
       <button class="equaliser" onclick="equalizerBtn(event)">
       <i class="material-icons">equalizer</i>
       </button>
       <button class="repeat" onclick="repeat(event)">
         <i class="material-icons">repeat</i>
       </button>
       <button class="volume" onclick="volumeBox(event)">
         <i class="material-icons">volume_up</i>
       </button> 
       <button class="favorite" onclick="addFvt(event)">
         <i class="material-icons">favorite</i>
       </button>
     </div>
     <div class="progress-box" >
       <input type="range" class="progress-bar" id="progress" min="0" max="" value="0" onchange="changeProgressBar()"/>
         <div id="ctview" >00:00</div>
         <div id="ttview">00:00</div>
     </div>
     <div class="btn-group" >
       <button class="prevBtn" onclick="prevPlay()">
         <i class="material-icons">skip_previous</i>
       </button>
       <button class="playBtn"  onclick="playPause(event)">
        <i id="playBtn" class="material-icons">play_arrow</i>
       </button>
       <button class="nextBtn" onclick="nextPlay()">
         <i class="material-icons">skip_next</i>
       </button>
     </div>
   </div>
 </div>
</section>
<!-- script  -->
<script>
// amardeep kesharwani
 const playerWindow = document.getElementById("players");
 const audio = document.getElementById("audio");
 const name = document.getElementById("name");
 const category = document.getElementById("category");
 const thumbnail = document.getElementById("thumbnail");
 const playBtn = document.getElementById("playBtn");
 const progress = document.getElementById("progress");
 const ttview = document.getElementById("ttview");
 const tcview = document.getElementById("tcview");
 const volumeBar = document.getElementById("volumeBar");
 
 const musicList = document.getElementById("music-list");
 const body = document.querySelector("body");
 // variable
 let musicData = [
 {
 id:1,
 category:"Dance",
 name:"Faded - Alan Walker",
 src:"https://2u039f-a.akamaihd.net/downloads/ringtones/files/mp3/alan-walker-faded-ringtone-30926.mp3",
 image:"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQoGWmS7kOCnkLAvH9g0_fZMdKW0d-l6P-H3yZaDokzVPZ4Y4bY&usqp=CAU",
 },
 {
 id:2,
 category:"Love",
 name:"Chahun ya - Aashiqui-2",
 src:"https://2u039f-a.akamaihd.net/downloads/ringtones/files/mp3/chahun-main-ya-naa-3448.mp3",
 image:"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQk-rT8uIudDAvN1p7qGBpyuLLF8DWwA_4ta7Oxtw5k6397rn2P&usqp=CAU",
 },
 {
 id:3,
 category:"Sad",
 name:"Dil ka lagana",
 src:"https://2u039f-a.akamaihd.net/downloads/ringtones/files/mp3/kya-rang-laya-dil-ka-lagana-raabta-lambiyaan-si-judaiyaan-arijit-singh-ring-29410.mp3",
 image:"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQuZEhM4JWi0kLeHFQlnineERhaNlvCbjpwoHDTnemesNm5XtSh&usqp=CAU",
 },
 {
 id:4,
 category:"Love",
 name:"Tum hi ho",
 src:"https://quz1yp-a.akamaihd.net/downloads/ringtones/files/mp3/tujhe-zindagi-du-freemaza-1387.mp3",
 image:"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQRdF1EyT4zeHHIcicA4wA8uMjxoGAblXsTIiXPhdTCzbG1YI18&usqp=CAU",
 },
 {
 id:5,
 category:"Love",
 name:"kaho na pyar hai",
 src:"https://quz1yp-a.akamaihd.net/downloads/ringtones/files/mp3/ringtone-kaho-naa-pyaar-hai-50104.mp3",
 image:"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQ91A18HUFoYk2KmejbAnT_ULfxbYI5I-eJtqjsQmvPVghpxac7&usqp=CAU",
 },
 {
 id:6,
 category:"Love",
 name:"Love me like do",
 src:"https://quz1yp-a.akamaihd.net/downloads/ringtones/files/mp3/lovemelikeyoudonotification-9607.mp3",
 image:"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSJhlenOe3XhPmFaVhs7k5LPnTdITSaNgwkJGulEoiZXMn8U5_V&usqp=CAU",
 },
 {
 id:7,
 category:"Dance",
 name:"Stereo Love",
 src:"https://quz1yp-a.akamaihd.net/downloads/ringtones/files/mp3/stereoloveringtone-5231.mp3",
 image:"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSG0JnTUjKBjO-2Kg3cxd3hF5N-4pLe3F7fPGq0Z43D96mTqY0N&usqp=CAU",
 },
 {
 id:8,
 category:"Love",
 name:"Radhakrishn fluit",
 src:"https://quz1yp-a.akamaihd.net/downloads/ringtones/files/mp3/radhakrishnaringtone-43687.mp3",
 image:"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTZgjJ5H3VZ78EkG88xYmNiOmONJnTUwtPRm82re6WOqfiEgMOF&usqp=CAU",
 },
 {
 id:9,
 category:"Love",
 name:"Radhakrishn Love",
 src:"https://quz1yp-a.akamaihd.net/downloads/ringtones/files/mp3/best-ringtone-krishn-70be80cb-1d27-4382-80d0-4972c8679083-45110.mp3",
 image:"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcT-_7hrwqXewwE_ZOCmcf3aWwExxE1SI9HCTDai9qZPkwf7LkIu&usqp=CAU",
 },
 {
 id:10,
 category:"Sad",
 name:"Jab bna uska bna",
 src:"https://2u039f-a.akamaihd.net/downloads/ringtones/files/mp3/uska-17223.mp3",
 image:"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSfJZeLuouw9kuPTZvxXsWvIJNVKWeJWGOHW_xEewWWXLg-85Dl&usqp=CAU",
 },
 {
 id:11,
 category:"Sad",
 name:"khamoshiya Aawaj hai",
 src:"https://quz1yp-a.akamaihd.net/downloads/ringtones/files/mp3/khamoshiyan-aavaj-hai-pagalworld-com-28786.mp3",
 image:"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRq4Gx1TKbTydT1veGl6c2AFYpf4Wras6x-cRCKdX9MOXaZSIZZ&usqp=CAU",
 },
 {
 id:12,
 category:"Dance",
 name:"I am a Rider",
 src:"https://2u039f-a.akamaihd.net/downloads/ringtones/files/mp3/rider-mobile-ringtone-46241.mp3",
 image:"https://avatars.sololearn.com/d447897c-b803-4e6e-bd74-8ab8966ba711.jpg",
 papular:15,
 },
 {
 id:13,
 category:"Dance",
 name:"Otilia Bilioner",
 src:"https://quz1yp-a.akamaihd.net/downloads/ringtones/files/mp3/otiliabilioneraradioeditringtone-27801.mp3",
 image:"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRb2Qec75WQvDv_lrJ1PHIqaWx8Ylyo7Gkpxu_ZbIEcy5yhY6on&usqp=CAU",
 },
 {
 id:14,
 category:"Love",
 name:"Tu meri Dost",
 src:"https://quz1yp-a.akamaihd.net/downloads/ringtones/files/mp3/tumeridosthainsongspkringtone-8802.mp3",
 image:"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcR2X15hbWDrbxuMSJCR5-taAnulozr6FAcaoS0y-3Shjrf95X51&usqp=CAU",
 },
 {
 id:15,
 category:"Sad",
 name:"milne hai mujhe aayi",
 src:"https://quz1yp-a.akamaihd.net/downloads/ringtones/files/mp3/milne-hai-mujhse-aayi-aashiqui-2-ringtone-pagalworld-com-1454.mp3",
 image:"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRyPB-mPN8VBVx98-GDHwiNfiTOsg-T4j4CUsylLfRSIyhZAd6K&usqp=CAU"
 },
 {
 id:16,
 category:"Romantic",
 name:"O Khuda - hero",
 src:"https://2u039f-a.akamaihd.net/downloads/ringtones/files/mp3/o-khuda-hero-ringtone-14026.mp3",
 image:"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTVbAjmIEeDVpuIxdLKwF-e37K-4wx0EU51kIYUvV7XFTJ2P4Oj&usqp=CAU",
 },
 {
 id:17,
 category:"Dance",
 name:"Carryminati - UTuber",
 src:"https://2u039f-a.akamaihd.net/downloads/ringtones/files/mp3/carryminati-50296.mp3",
 image:"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRMq9PEkWr1vaFG8e2rUyiQHeaUlaimA3JAqbOnZeU2SwilniD3&usqp=CAU",
 },
 {
 id:18,
 category:"Horror",
 name:"i am coming",
 src:"https://quz1yp-a.akamaihd.net/downloads/ringtones/files/mp3/witch-laugh-28505.mp3",
 image:"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQpQhKCoX7BNDq3wUcsWEx-uJTmGVYjntpGQWIkpwymAnQKZQW3&usqp=CAU"
 },
 {
id:19,
category:"My Crush ",
name:"Befikra - Disha pathani",
src:"https://quz1yp-a.akamaihd.net/downloads/ringtones/files/mp3/2befikrapagalworldinforingtone-21189.mp3",
image:"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRgBnbu64XmbZ9q27ZFpfuzzoFC0V3uJVXX9Q&usqp=CAU"
 },
 {
 id:20,
 category:"Romantic",
 name:"Aap mujhe achhe lgne",
 src:"https://loverays.com/ringtones/Aap_Mujhe_Achay_Lagne_Lage.mp3",
 image:"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcROp4dF8PpIKNahtjyjhbpmNP8KBYFA7ZDhzILmwNonnFsVY_BK&usqp=CAU",
 },
 {
 id:21,
 category:"Romantic",
 name:"Saanson ko - zid",
 src:"https://quz1yp-a.akamaihd.net/downloads/ringtones/files/mp3/saanson-ko-zid-arijit-singh-ringtone-4555.mp3",
 image:"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRqc_tcDOpYPHeqelLmzH9F8L-O2oLgTfi2g4sCORIDAIK0pPZA&usqp=CAU",
 },
{
id:22,
category:"Dance",
name:"English medium",
src:"https://quz1yp-a.akamaihd.net/downloads/ringtones/files/mp3/tu-chij-lajawab-tera-koi-na-jawab-status-ringtone-sapna-choudhary-39997.mp3",
image:"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRmEd4bLIhrHXQj0dbB0w-5LUoZaPvpbdnC6Q&usqp=CAU"
},
 {
 id:23,
 category:"Love",
 name:"deewana Kar Raha - Raaz ",
 src:"https://d6cp9b00-a.akamaihd.net/downloads/ringtones/files/mp3/deewana-kar-raha-hai-5617.mp3",
 image:"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSrqZ9q-RsTZO7cOgXA0IQe-IT-yclLI9lXUFoqDlIBKWqEnoHn&usqp=CAU",
 },
 {
 id:24,
 category:"Dance",
 name:"Let me love you",
 src:"https://2u039f-a.akamaihd.net/downloads/ringtones/files/mp3/letmeloveyoudjsnakeftjustinbieberdjjohalcomringtoneringtone-38476.mp3",
 image:"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcS2ULdnCNnlxZvQNkduuTVHZjKK1yHOSFZzGZSB__hw6LMJ4XlM&usqp=CAU",
 },
 {
 id:25,
 category:"Sad",
 name:"Bhula Dena",
 src:"https://quz1yp-a.akamaihd.net/downloads/ringtones/files/mp3/bhula-dena-muskurahat-com-7597.mp3",
 image:"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRhCfKXq4F7khZwqD4nsj68JHXLVNo5WUJSq3FgogLcuW5d5-aF&usqp=CAU",
 },
 {
 id:26,
 category:"Dance",
 name:"Sunny Sunny",
 src:"https://2u039f-a.akamaihd.net/downloads/ringtones/files/mp3/sunnysunny-vtaujyk4-2058.mp3",
 image:"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRq1F69qRL2WPJ3j6fTPEyIrhB6W1rVr9t8gQ&usqp=CAU"
 },
 ]
let repeatMusic = false;
let index = 1;
let songs = musicData;

const elc = musicList.getElementsByClassName("equalize")[index-1];

const showMusicList = () => {
 document.querySelector(".sec-1").classList.add("hide");
 document.querySelector(".sec-2").classList.remove("hide");
}
const darkMood = () => {
 body.classList.toggle("dark");
}

const setActive = (i) => {
  setEqualizer()
  let a =  musicList.querySelector(".active");
  if(a !== null) {
   a.classList.remove("active");
  }
  const ele = document.getElementsByClassName("music")[i-1];
  ele.classList.add("active");
}

const setData = data => {
 name.textContent = data.name;
 category.textContent = data.category;
 thumbnail.src = data.image;
}

const playMusic = async (i) => {
  if(i == 18 || i == 10 ) {
   body.classList.toggle("dark");
   setTimeout(() => body.classList.toggle("dark"),7000);
  }
  let data = musicData.find(m => m.id === i) || musicData[1];
  setActive(i)
  setData(data);
  playBtn.textContent = "pause";
  audio.src = data.src;
  await audio.load();
  audio.play();
}
 
 const playPause = e => {
    if(audio.paused) {
    playBtn.textContent = "pause";
    audio.play();
    setEqualizer()
   } else{
   playBtn.textContent = "play_arrow";
    audio.pause();
    setEqualizer(true)
   }
 }
 
 const showplayer = () => {
   playerWindow.classList.toggle("active");
 }
 const equalizerBtn = e => {
  e.target.classList.toggle("active");
  document.querySelector(".thumbnail").classList.toggle("spin");
 }
 const addFvt = e => {
  e.target.classList.toggle("active")
 }
 const repeat = e => {
  e.target.classList.toggle("active")
  repeatMusic = !repeatMusic;
  audio.loop = repeatMusic;
 }
 const volumeBox = e => {
  e.target.classList.toggle("active");
  document.querySelector(".volume-box").classList.toggle("show");
 }
 const nextPlay = () => {
  index++;
  if (index > musicData.length) {
   index = 1;
  }
  playMusic(index);
 }
 const prevPlay = () => {
  index--;
  if (index <= 0) {
  index = musicData.length;
  }
  playMusic(index);
 }
 // eventListners
 audio.addEventListener("ended", () => {
  nextPlay();
 })
 audio.onloadeddata = () =>  {
 progress.max = audio.duration
 const ds = parseInt(audio.duration % 60)
 const dm = parseInt((audio.duration / 60) % 60)
 ttview.textContent = dm + ':' + ds;
 }
 audio.ontimeupdate =  () =>  {
   progress.value = audio.currentTime
 }
 audio.addEventListener('timeupdate', () => {
 //progress.value = audio.currentTime;
 var cs = parseInt(audio.currentTime % 60)
 var cm = parseInt((audio.currentTime / 60) % 60)
  ctview.textContent = cm + ':' + cs;
 }, false);
 
 const changeProgressBar = () => {
   audio.currentTime = progress.value;
 }
 
/* volume control */
 const volumeDown = () => {
  volumeBar.value = Number(volumeBar.value) - 20
  audio.volume = volumeBar.value / 100
 }
 const volumeUp = () => {
  volumeBar.value = Number(volumeBar.value) + 20
  audio.volume = volumeBar.value / 100
 }
 

 const addList = (data) => {
  let div = document.createElement("div");
  div.classList.add('music');
  div.setAttribute("data-id", data.id);
  let html = `
   <div class="list-thumbnail" >
    <img src="${data.image}" alt="" >
   </div>
   <div class="list-content" >
   <h3>${data.name}</h3>
   <small>${data.category}</small>
   </div>
   <button class="list-btn" >
   <i class="material-icons">play_arrow</i>
    <div class="equalize">
    <span></span>
    <span></span>
    <span></span>
   </div>
   </button>`;
   div.innerHTML = html;
   musicList.append(div);
   div.addEventListener('click', () => {
    playMusic(data.id);
    playerWindow.classList.add("active");
    index = data.id;
   });
 }
 
 const setMusicList =  () => {
  songs.forEach(song => addList(song));
 }
 
 const FirstSetUp = () => {
  audio.src = musicData[index -1].src;
  setData(musicData[index -1]);
  setMusicList();
 }
 FirstSetUp()
 
 const filterCat = (cat) => {
  songs = musicData.filter(song => song.category == cat);
  while(musicList.hasChildNodes()){
    musicList.removeChild(musicList.firstChild);
  }
  setMusicList()
 }
 const filterAll = () => {
  songs = musicData;
  while(musicList.hasChildNodes()){
    musicList.removeChild(musicList.firstChild);
  }
  setMusicList()
 }
function setEqualizer(action = false){
 const elc = musicList.getElementsByClassName("equalize")[index-1];
 const thumb =  document.querySelector(".thumbnail");
 if(elc.classList.contains("pause")) {
   elc.classList.remove("pause")
 } else {
  if(action) {
   elc.classList.add("pause")
  }
 }
 if(thumb.classList.contains("spin") && audio.paused && action){
  thumb.classList.add("pause");
 } else if(thumb.classList.contains("spin") &&!audio.paused){
  thumb.classList.remove("pause");
 }
}
</script>
</body>
</html>

 

[Atlasfreak]

Na dann hau ich hier einfach mal mein Github rein. Schaut euch den Code lieber nicht so genau an, ist teilweise ziemlich grauenvoll.
Meine Public Repos:

• Einmal eine Vertretungsplanwebseite, die glaube ich aktuell garnicht mehr geht, den ich im letzten Lockdown aus dem Boden gestampft habe. Das war mein ersten Projekt mit Django (ein Python Web-Framework). Ich könnte euch erklären wie man die zum Laufen bringt aber ehrlich gesagt ist die Code basis ziemlich schlecht und man sollte den eigentlich fast komplett neu schreiben.
• Dann gibts da natürlich meine Webseite, auch wieder in Django geschrieben nur ein halbes Jahr später. Hauptfeature davon ist eine komplett selbst geschriebene Umfragenseite. Das Repository maintain ich noch aktiv. Die Umfragenseite entstand daraus das ich eine Facharbeit schreibe und dazu eine Umfrage machen will und naja mir war etwas langweillig, zweiter Lockdown und ich wollte mal wieder was in Django machen. Schon sind ein paar Monate vergangen. Inzwischen komm ich gut mit Django klar, kann das wirklich nur jedem empfehlen, allerdings für seehr kleine Webseiten eignet es sich glaube ich eher weniger.
• Ansonsten gibts noch eins mit 2 Aufgaben des Bundeswettberwerbs für Informatik Runde 1, ich hab das allerdings nie eingereicht. Hier die erste Aufgabe (hab den GUI-Teil weggelassen der ist nicht so schön):
• Spoiler: Code

  from random import *
  from tkinter import *
  from tkinter import filedialog
  
  def fight(strengthP1, strengthP2):
  ''' 
  strengthP1 = int
  strengthP2 = int
  
  True wenn Spieler 2 gewinnt
  False wenn Spieler 1 gewinnt
  '''
  
  if strengthP1 + strengthP2 == 0:
  return False
  
  rand = randint(1, strengthP1 + strengthP2)
  if rand <= strengthP2:
  # Spieler 2
  return True
  elif rand - strengthP2 <= strengthP1:
  # Spieler 1
  return False
  
  def simulateFights(strengthP1, strengthP2, times):
  '''
  strengthP1 = int
  strengthP2 = int
  times = int
  
  Simuliere times Kämpfe zwischen 2 Spielern.
  '''
  
  winsP1 = 0
  winsP2 = 0
  for i in range(times):
  if fight(strengthP1, strengthP2):
  winsP2 += 1
  else:
  winsP1 += 1
  return (winsP1/winsP2, winsP1, winsP2)
  
  def league(playerStrengthList):
  '''
  playerStrengthList = list
  Simuliert ein Liga in der jeder Spieler gegen jeden anderen Spieler antritt.
  Gibt die ID und Kampfstärke des Gewinners aus.
  '''
  wins = [0] * len(playerStrengthList)
  
  for p1 in range(len(playerStrengthList)-1):
  for p2 in range(p1+1, len(playerStrengthList)):
  if fight(playerStrengthList[p1], playerStrengthList[p2]):
  wins[p2] += 1
  else:
  wins[p1] += 1
  winner = wins.index(max(wins))
  return [winner, playerStrengthList[winner]]
  
  def createPlayerStrength2DList(playerStrengthList):
  '''
  playerStrengthList = list
  Erstellt eine 2D Liste nach dem Schema [[indexUrpsrung1, WertUrsprung1], [indexUrpsrung2, WertUrsprung2], ...]
  Dies wird benötigt um am Ende eines Tuniers zu ermitteln welcher Spieler gewonnen hat und
  nicht nur die Kampfstärke zu erhalten.
  '''
  playerStrength2DList = []
  for i in range(len(playerStrengthList)):
  playerStrength2DList.append([i, playerStrengthList[i]])
  return playerStrength2DList
  
  def k_o_round(playerStrength2DList, count):
  '''
  playerStrength2DList = list # Schema [[indexUrpsrung1, WertUrsprung1], [indexUrpsrung2, WertUrsprung2], ...]
  count = int # muss ungerade sein
  Simuliert eine K.O. Runde mit beliebiger Anzahl an Kämpfen
  und gibt eine 2D Liste mit allen verbleibenden Spielern zurück.
  '''
  remainingPlayerStrength2DList = []
  for p in range(0,len(playerStrength2DList),2):
  p1 = playerStrength2DList[p]
  winsP1 = 0
  p2 = playerStrength2DList[p+1]
  winsP2 = 0
  counter = count
  while counter > 0:
  if fight(p1[1], p2[1]):
  winsP2 += 1
  else:
  winsP1 += 1
  counter -= 1
  if winsP1 > winsP2:
  remainingPlayerStrength2DList.append(p1)
  elif winsP2 > winsP1:
  remainingPlayerStrength2DList.append(p2)
  
  return remainingPlayerStrength2DList
  
  def k_o_tournament(playerStrengthList, fightCount):
  '''
  playerStrengthList = list
  fightCount = int # muss ungerade sein
  Simuliert ein K.O. Tunier.
  Gibt die ID und Kampfstärke des Gewinners aus.
  '''
  playerStrength2DList = createPlayerStrength2DList(playerStrengthList)
  while len(playerStrength2DList) > 1:
  playerStrength2DList = k_o_round(playerStrength2DList, fightCount)
  winner = playerStrength2DList[0]
  return winner
  
  def generatePlayerStrengthList(playerCount):
  playerStrengthList = []
  for _ in range(playerCount):
  playerStrengthList.append(randint(0,100))
  return playerStrengthList
  
  def readFile(fileName):
  f = open(fileName)
  players = int(f.readline())
  playerStrengthList = []
  for _ in range(players):
  playerStrengthList.append(int(f.readline()))
      return playerStrengthList

  Der Code ist mehr oder weniger gut dokumentiert (werdet ihr vermutlich nicht bei meinem anderen Code finden.

Mein Privates Repo:

• Ein Discordbot geschrieben in Python. Hauptaufgabe ist es die Rollen auf dem Discordserver meiner Stufe zu managen. Den hab ich letzten Monat in 1 Woche aus dem Boden gestampft.

Wie man sieht hab ich im letzten Jahr Webdevelopment für mich entdeckt. Dabei hab ich auch Javascript hassen gelernt...

 

[Gabscap]

Wie man sieht hab ich im letzten Jahr Webdevelopment für mich entdeckt. Dabei hab ich auch Javascript hassen gelernt...

Dann schau dir mal lieber TypeScript an. Das ist JavaScript in benutzbar.

 

[RikuShadowclaw]

Wie ich hier ja schonmal geschrieben hab, nutze ich R zum Auswerten von Daten. Da gibt es jetzt kein großes Repository zu, aber für "publication ready" Diagramme und so ist das sog. Tidyverse schon eine großartige Erweiterung zu Base R.

 

[MrTob]

Hab den Großteil meiner Projekte auf "Privat", da es zum großen Teil unfertige und unschön geschriebene Programme enthält.
Nutze für Projekte mit mehreren Personen eigentlich nur mehr einen privaten Server mit GitLab, da die meiner Meinung nach, ein hervorragendes CI-System haben.

 

[Ikuragiku]

Das ist mein Github https://github.com/BeBaxxter. Ich habe da einmal eine Vorlage für ein MC-Plugin drin was nicht fertig ist. Zum anderen ein Lernprojekt weil ich gerade Javascript lerne und eine App die ich gerade in der Uni mit ein paar Leuten programmiere. Bisher nicht so spannend und alles halb fertig .

 

[xSnoopLion420x]

Update: Videos zu den Scripts Uploaded

Falls ihr Programmiert zeigt doch mal her eure Projekte Werde nach und nach hier meine Veröffentlichen können gerne frei Genutzt werden.

Youtube

Spoiler: Name Generator - Python

ime = input("Enter your name: \n\n")

for c in ime:

    c = c.upper()
    if (c == "A"):
        print("..######..\n..#....#..\n..######..\n..#....#..\n..#....#..\n\n")
    elif (c == "B"):
        print("..######..\n..#....#..\n..#####...\n..#....#..\n..######..\n\n")
    elif (c == "C"):
        print("..######..\n..#.......\n..#.......\n..#.......\n..######..\n\n")
    elif (c == "D"):
        print("..#####...\n..#....#..\n..#....#..\n..#....#..\n..#####...\n\n")
    elif (c == "E"):
        print("..######..\n..#.......\n..#####...\n..#.......\n..######..\n\n")
    elif (c == "F"):
        print("..######..\n..#.......\n..#####...\n..#.......\n..#.......\n\n")
    elif (c == "G"):
        print("..######..\n..#.......\n..#####...\n..#....#..\n..#####...\n\n")
    elif (c == "H"):
        print("..#....#..\n..#....#..\n..######..\n..#....#..\n..#....#..\n\n")
    elif (c == "I"):
        print("..######..\n....##....\n....##....\n....##....\n..######..\n\n")
    elif (c == "J"):
        print("..######..\n....##....\n....##....\n..#.##....\n..####....\n\n")
    elif (c == "K"):
        print("..#...#...\n..#..#....\n..##......\n..#..#....\n..#...#...\n\n")
    elif (c == "L"):
        print("..#.......\n..#.......\n..#.......\n..#.......\n..######..\n\n")
    elif (c == "M"):
        print("..#....#..\n..##..##..\n..#.##.#..\n..#....#..\n..#....#..\n\n")
    elif (c == "N"):
        print("..#....#..\n..##...#..\n..#.#..#..\n..#..#.#..\n..#...##..\n\n")
    elif (c == "O"):
        print("..######..\n..#....#..\n..#....#..\n..#....#..\n..######..\n\n")
    elif (c == "P"):
        print("..######..\n..#....#..\n..######..\n..#.......\n..#.......\n\n")
    elif (c == "Q"):
        print("..######..\n..#....#..\n..#.#..#..\n..#..#.#..\n..######..\n\n")
    elif (c == "R"):
        print("..######..\n..#....#..\n..#.##...\n..#...#...\n..#....#..\n\n")
    elif (c == "S"):
        print("..######..\n..#.......\n..######..\n.......#..\n..######..\n\n")
    elif (c == "T"):
        print("..######..\n....##....\n....##....\n....##....\n....##....\n\n")
    elif (c == "U"):
        print("..#....#..\n..#....#..\n..#....#..\n..#....#..\n..######..\n\n")
    elif (c == "V"):
        print("..#....#..\n..#....#..\n..#....#..\n...#..#...\n....##....\n\n")
    elif (c == "W"):
        print("..#....#..\n..#....#..\n..#.##.#..\n..##..##..\n..#....#..\n\n")
    elif (c == "X"):
        print("..#....#..\n...#..#...\n....##....\n...#..#...\n..#....#..\n\n")
    elif (c == "Y"):
        print("..#....#..\n...#..#...\n....##....\n....##....\n....##....\n\n")
    elif (c == "Z"):
        print("..######..\n......#...\n.....#....\n....#.....\n..######..\n\n")
    elif (c == " "):
        print("..........\n..........\n..........\n..........\n\n")
    elif (c == "."):
        print("----..----\n\n")

-----------------------------------------------------------------------------------------------------------------------------
Youtube

Spoiler: Password Generator - Java

import java.util.Random;

public class PasswordGenerator
{
    public static void main(String[] args)
    {
        int length = 10; // password length
        System.out.println(generatePswd(length));
    }
    static char[] generatePswd(int len)
    {
        System.out.println("Your Password:");
        String charsCaps = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
        String chars = "abcdefghijklmnopqrstuvwxyz";
        String nums = "0123456789";
        String symbols = "!@#$%^&*_=+-/€.?<>)";

        String passSymbols = charsCaps + chars + nums + symbols;
        Random rnd = new Random();
 
        char[] password = new char[len];
        int index = 0;
        for (int i = 0; i < len; i++)
        {
            password[i] = passSymbols.charAt(rnd.nextInt(passSymbols.length()));
     
        }
        return password;
    }
}

-----------------------------------------------------------------------------------------------------------------------------
Youtube

Spoiler: Clash of Tanks [game] - html,css,js

Spoiler: HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        </head>
    <body>
       <div id="main">
          <p>Loading...</p>
       </div>
       <div id="infdiv">Drag available units into the deployment area.<br/><br/>You win, when one of  your units gets to the green line at the top of the field.<br/><br/>Don't let enemies to reach your base.<br/><br/>Good luck, commander! May the force be with you!</div>
       <div id="log"></div>

       <div id="myModal" class="modal">
            <div class="modal-content">
                 <span class="close">&times;</span>
                 <p class="modal-text"></p>
            </div>

</div>

    </body>
</html>

Spoiler: CSS

body {
margin: 0;
padding-top: 50%;
position: relative;
}

#main {
 
    padding: 20px;
    box-shadow: 0 0 100px 80px  lightblue;
    background: lightblue;
    text-align: center;

}

.dif {
    display: inline-block ;
    margin-top: 8px;
    font-weight: bold;
    font-size: 1em;
    width: 120px;
}


#log {
   display:none;
   position: relative;
   font-weight: bolder;
   font-size: 0.8em;
   text-align: center;
}

canvas {
    position: fixed;
    display: block;
    border: 3px solid #eee;
    margin: auto;
    border-radius: 7px;
    box-shadow: 0 0 15px;
}

#info {
    margin-left: 40px;
    color: red;
}
button {
    border:1px solid white;
    border-radius: 7px;
    box-shadow: 0 0 5px, inset 0 0 25px;
    padding: 10px 40px;
    background-color: #f3f3f3;
    font-weight: bold;
    outline-style: none;
}

#btn-left, #btn-right {
    border-radius: 50%;
    padding: 0 20px ;
    font-size: 2em;
}

#infdiv {
    display:none;
    position: relative;
    margin-auto
    width: 80%;
    border: 3px solid lightblue;
    background-color: white;
    padding: 10px;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0 0 20px;
    font-weight: bolder;
    font-size: 0.9em;
}

.modal {
  border-radius: 10px;
  display: none;
  position: relative;
  z-index: 99;
  overflow: auto;
  background-color: rgba(0,100,0,0.5);
}


.modal-content {
  color: white;
  background-color: rgba(0,100,0,0.4);
  margin: 15% auto;
  padding: 20px;
  border: 2px solid white;
  border-radius: 10px;
  width: 80%;
  text-align: center;
}


.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

Spoiler: Javascript

var w, h, k, xo, yo,
units = [],
    icons = [],
    bullets = [],
    enemies = [],
    explosions = [],
    dif = [' practice', ' easy', ' medium', ' hard', ' harder', ' hardcore', ' pro', ' deathmatch', ' godlike', ' impossible'],
    gameTime = 0,
    isGameOver,
    nextwave = 0,
    enemydep = 1,
    firstwave = false,
    deployarea = false,
    counter = 0,
    counter2 = 0,
    gameNum = 0,
    game_paused = false,
    lvl = 0,     // 0...9
    inf = function ()
    {
        var popup = document.getElementById('infdiv');
        var btn = document.getElementById('info');
        if (popup.style.display !== 'block')
        {
            popup.style.display = 'block';
            info.style.color = 'white';
            info.style.backgroundColor = 'red';
        }
        else
        {
            popup.style.display = 'none';
            info.style.color = 'red';
            info.style.backgroundColor = '#f3f3f3';
        }
    },
    changeLvl = function (op) {
        if (op == 1 && lvl < 9) {
            lvl++;
        }
        if (op == 0 && lvl > 0) {    
            lvl--;
        }
 
        var _dif = document.getElementsByClassName("dif");
            _dif[1].innerHTML = dif[lvl];
    };



(function ()
{
    function Sprite(url, pos, size, resized, animspeed, frames, _index, once)
    {
        this.pos = pos;
        this.size = size;
        this.resized = resized;
        this.url = url;
        this.animspeed = animspeed;
        this.frames = frames;
        this._index = _index;
        this.once = once;
    }

    Sprite.prototype =
    {

        update: function (dt)
        {

                        this._index += this.animspeed * dt;

             
        },



                 render: function (ctx)
        {

            var frame;


                 
            if (this.animspeed > 0)
            {         
                var max = this.frames.length;         
                var idx = Math.floor(this._index);                frame = this.frames[idx % max];        
                if (this.once && idx >= max)
                {                    this.done = true;             
                    return;         
                }     
            }     
            else
            {                frame = 0;     
            }

                    
            var x = this.pos[0];
            var y = this.pos[1];

             x += frame * this.size[0];   ctx.drawImage(resources.get(this.url),  x, y,  this.size[0], this.size[1],  0, 0,  this.resized[0], this.resized[1]);

             
        }

     
    };

        window.Sprite = Sprite;
})();

(function ()
{
    function Unit(status, pos, hp, speed, maxspeed, range, damage, reload, angle, defaultangle, dir, sprite)
    {
        this.status = status;
        this.pos = pos;
        this.hp = hp;
        this.maxhp = hp;
        this.speed = speed;
        this.maxspeed = maxspeed;
        this.range = range;
        this.damage = damage;
        this.reload = reload;
        this.angle = angle;
        this.defaultangle = defaultangle;
        this.dir = dir;
        this.sprite = sprite
    }

    Unit.prototype =
    {

                 getAngle: function (target)
        {

            var x = this.pos[0] - target[0];
            var y = this.pos[1] - target[1];
            if (x < 0)
            {
                return Math.floor(Math.atan(y / x) * (180 / Math.PI));
            }
            else
            {
                return Math.floor(Math.atan(y / x) * (180 / Math.PI) - 180);
            }
        },

        moveAhead: function (dt)
        {
            var rad = this.angle / (180 / Math.PI);
            this.pos[0] += Math.cos(rad) * this.speed * dt * this.dir;
            this.pos[1] += Math.sin(rad) * this.speed * dt * this.dir;
     
        },

        findTarget: function (t)
        {
            for (i = 0; i < t.length; i++)
            {

                var dis = this.getDistance(t[i]);
                if (dis < this.range && !t[i].destroyed && t[i].time > 0.7 && t[i].pos[1] > k)
                {
                    this.target = t[i];
                    this.status = "targetfound";
                    return;
                }
            }

        },

        avoidCollision: function (list, ownindx, dt)
        {

            var l = list;

            for (i = 0; i < l.length; i++)
            {
                if (i == ownindx) continue;
                if (this.getDistance(l[i]) < k * 8)
                {
                  for (var sec = 2; sec > 0; sec--) {

                    var ownfuturepos = [this.pos[0] + (Math.cos(this.angle / (180 / Math.PI)) * this.speed * sec * this.dir), this.pos[1] + (Math.sin(this.angle / (180 / Math.PI)) * this.speed * sec * this.dir)];

                    var allyfuturepos = [l[i].pos[0] + (Math.cos(l[i].angle / (180 / Math.PI)) * l[i].speed * sec * this.dir), l[i].pos[1] + (Math.sin(l[i].angle / (180 / Math.PI)) * l[i].speed * sec * this.dir)];
                    if (getDistance(ownfuturepos, allyfuturepos) < k * 3 && this.pos[1] * this.dir > l[i].pos[1] * l[i].dir && Math.abs(ownfuturepos[0] - allyfuturepos[0]) < this.sprite.resized[0])
                    {
                        this.speed -= 160/Math.pow(sec, 4) * dt;
                    }
                 }

                }
            }


        },

        getDistance: function (t)
        {

            return Math.floor(Math.sqrt(Math.pow(this.pos[0] - t.pos[0], 2) + Math.pow(this.pos[1] - t.pos[1], 2)));
        },

        fireOnTarget: function ()
        {

            var x = Math.floor(this.pos[0] + ((this.sprite.resized[1] / 2 * this.dir) * Math.cos(this.angle / (180 / Math.PI))));
            var y = Math.floor(this.pos[1] + ((this.sprite.resized[0] / 2 * this.dir) * Math.sin(this.angle / (180 / Math.PI))));
            bullets.push(
            {
                pos: [x, y],
                target: this.target,
                speed: k * 12,
                damage: this.damage,
                angle: this.angle + getRandom (-5,3),
                dir: this.dir,

            });

            this.lastshot = 0;

        }
    };

        window.Unit = Unit;
})();

var getRandom = function (min, max)
{
    return Math.floor(Math.random() * (max - min + 1)) + min;
};

var getDistance = function (own, ally)
{

    return Math.floor(Math.sqrt(Math.pow(own[0] - ally[0], 2) + Math.pow(own[1] - ally[1], 2)));
};



var deployUnit = function (unit, pos)
{
    var u = unit;
    units.push(new Unit(u[0], u[1], u[2], u[3], u[4], u[5], u[6], u[7], u[8], u[9], u[10], u[11], u[12], u[13]));
    units[units.length - 1].pos = pos;
    deployarea = false;
};

var deployEnemy = function (unit, pos)
{
    var u = unit;
    enemies.push(new Unit(u[0], u[1], u[2], u[3], u[4], u[5], u[6], u[7], u[8], u[9], u[10], u[11], u[12], u[13]));
    enemies[enemies.length - 1].pos = pos;

};



var returnToBase = function (icon)
{
    icon.pos = icon.defaultpos;
    icon.dragable = false;
};

var gameOver = function (a)
{

    var _min = Math.floor(gameTime / 60);
    var _sec = ('0' + Math.floor(gameTime % 60)).slice(-2);


    switch (a)
    {

    case 'win':

        alert("Mission completed! Your time is " + _min + ':' + _sec + '\n\nLosses: ' + counter + ' units.\n\nEnemies destroyed: ' + counter2 + '.');

        var log_item = "<p>Game " + ++gameNum + ":  Win ⏲" + _min + ':' + _sec + ' /' + dif[lvl] + ' /' + "</p>";
        if (lvl < dif.length - 1) lvl++;
        var log = document.getElementById('log');
        log.innerHTML += log_item;
        document.body.style.paddingTop = 50 - (gameNum * 3) + "%";
        log.style.display = "block";
        loader();
        break;

    case 'loss':
        alert("Mission failed!" + '\n\nLosses: ' + counter + ' units.\n\nEnemies destroyed: ' + counter2 + '.');

        var log_item = "<p>Game " + ++gameNum + ":  Fail ⏲" + _min + ':' + _sec + ' /' + dif[lvl] + ' /' + "</p>";
        if (lvl > 0) lvl--;
        var log = document.getElementById('log');
        log.innerHTML += log_item;
        document.body.style.paddingTop = 50 - (gameNum * 3)+ "%";
        log.style.display = "block";
        loader();
        break;

    }
}

var reset = function ()
{

    units = [];
    icons = [];
    bullets = [];
    enemies = [];
    explosions = [];
    isGameOver = false;
    gameTime = 0;
    enemydep = 1;
    firstwave = false;
    nextwave = 0;
    deployarea = false;
    counter = 0;
    counter2 = 0;
}

var xxx = 0,
    yyy = 0;
var mouse =
{
    x: 0,
    y: 0,
    down: false
}

/////////////////////////////

var startGame = function ()
{

    reset();

    var modal = document.getElementById("myModal");
    var span = document.getElementsByClassName("close")[0];
    var p = document.getElementsByClassName("modal-text")[0];
    span.onclick = function() {
         modal.style.display = "none";
         game_paused = !game_paused;
    }

    var log = document.getElementById('log');
    var popup = document.getElementById('infdiv');


    log.style.display = "none";
    popup.style.display = 'none';
    document.body.style.paddingTop = 0;
 
    var maindiv = document.getElementById("main");

    maindiv.innerHTML = '<canvas id="c"></canvas>';

    var c = document.getElementById("c");

    var ctx = c.getContext("2d");

    w = window.innerWidth;
    h = window.innerHeight;


    if (w < h) {
        c.width = w - 46;
        c.height = c.width/0.7;
    } else {
        c.height = h - 46;
        c.width = c.height * 0.7;
    }

    k = c.width / 26;

    xo = c.offsetLeft;
    yo = c.offsetTop;


    ////

    icons = [
    {
        active: true,
        pos: [c.width / 28, c.height - c.height / 8],
        defaultpos: [c.width / 28, c.height - c.height / 8],
        respawn: false,
        respawnrate: 1,
        sprite: new Sprite('https://opengameart.org/sites/default/files/tanks_3.png', [55, 76], [194, 134], [c.width / 5.5, c.height / 10.5])
    },
    {
        active: true,
        pos: [c.width / 3.4, c.height - c.height / 8.5],
        defaultpos: [c.width / 3.4, c.height - c.height / 8.5],
        respawn: false,
        respawnrate: 3,
        sprite: new Sprite('https://opengameart.org/sites/default/files/tanks_3.png', [71, 600], [159, 130], [c.width / 6.5, c.height / 12])
    },
    {
        active: true,
        pos: [c.width / 1.85, c.height - c.height / 8.2],
        defaultpos: [c.width / 1.85, c.height - c.height / 8.2],
        respawn: false,
        respawnrate: 0.5,
        sprite: new Sprite('https://opengameart.org/sites/default/files/tanks_3.png', [52, 269], [205, 124], [c.width / 5.8, c.height / 12])
    },
    {
        active: false,
        pos: [c.width / 1.27, c.height - c.height / 8.2],
        defaultpos: [c.width / 1.27, c.height - c.height / 8.2],
        respawn: false,
        respawnrate: 0.5,
        sprite: new Sprite('https://opengameart.org/sites/default/files/tanks_3.png', [68, 434], [230 - 68, 565 - 434], [c.width / 5.8, c.height / 12])
    }];

    ///

    c.addEventListener("touchmove", function (event)
    {

        var touch = event.touches[0];
        xxx = touch.pageX - xo - 3;
        yyy = touch.pageY - yo - 3;

        checkIcons(xxx, yyy);

        event.preventDefault();
    }, false);

    c.addEventListener("touchend", function (event)
    {

        checkDeployment(xxx, yyy);

    }, false);

    c.addEventListener("mousemove", function (event)
    {
        mouse.x = event.pageX - xo - 3;
        mouse.y = event.pageY - yo - 3;
    }, false);

    c.addEventListener("mousedown", function ()
    {
        mouse.down = true;
        checkIcons(mouse.x, mouse.y);

    }, false);

    c.addEventListener("mouseup", function ()
    {
        mouse.down = false;
        checkDeployment(mouse.x, mouse.y);
    }, false);

    function checkIcons(xx, yy)
    {

        if (xx > icons[0].pos[0] && xx < icons[0].pos[0] + (k * 5) && yy > icons[0].pos[1] - (k * 3) && yy < icons[0].pos[1] + (k * 3) && !icons[0].respawn  && !game_paused)
        {
            if (!icons[1].dragable && !icons[2].dragable)
            {
                icons[0].dragable = true;
                basictank[0] = 'readyfordeploy';
                deployarea = true;
            }
        }

        if (xx > icons[1].pos[0] && xx < icons[1].pos[0] + (k * 5) && yy > icons[1].pos[1] - (k * 3) && yy < icons[1].pos[1] + (k * 3) && !icons[1].respawn  && !game_paused)
        {
            if (!icons[0].dragable && !icons[2].dragable)
            {
                icons[1].dragable = true;
                lighttank[0] = 'readyfordeploy';
                deployarea = true;

            }
        }

        if (xx > icons[2].pos[0] && xx < icons[2].pos[0] + (k * 5) && yy > icons[2].pos[1] - (k * 3) && yy < icons[2].pos[1] + (k * 3) && !icons[2].respawn  && !game_paused)
        {
            if (!icons[0].dragable && !icons[1].dragable)
            {
                icons[2].dragable = true;
                ttank[0] = 'readyfordeploy';
                deployarea = true;

            }
        }
 
        if (xx > icons[3].pos[0] && xx < icons[3].pos[0] + (k * 5) && yy > icons[3].pos[1] - (k * 3) && yy < icons[3].pos[1] + (k * 3))
        {
           game_paused = !game_paused;
   
           if(modal.style.display == "block") {
                modal.style.display = "none";
           } else {
       
                p.innerHTML = 'Please, donate 100500 bucks to obtain this fabulous, innovative, wirelessly rechargeable, eco/vegan/gay friendly machine of death! <br/>Thank you!';
                modal.style.width = c.width*0.8 + "px";
                modal.style.marginLeft = c.width*0.1 + xo + "px";
                modal.style.display = "block";
           }
   
   
   
        }
    }

    function checkDeployment(xx, yy)
    {

        var inside = false;

        if (xx > c.width / 100 && yy > c.height / 2 && xx < c.width - c.width / 100 - 3 && yy < c.height / 2 + c.height / 3.7)
        {
            inside = true;
        }
         
        var allies = false;
        for(var i = 0; i < units.length; i++) {
            if (getDistance([xx,yy], units[i].pos) <  2*k) allies = true;
        }
 
        if (basictank[0] == 'readyfordeploy' && inside && !allies)
        {
            basictank[0] = ' ';
            deployUnit(basictank, [xx, yy]);
            units[units.length - 1].status = 'acceleration';
            icons[0].pos = [icons[0].defaultpos[0], icons[0].defaultpos[1] + c.width / 4];
            icons[0].dragable = false;
            icons[0].respawn = true;
            deployarea = false;
        }
        else if ( basictank[0] == 'readyfordeploy' && (!inside && !icons[0].respawn || allies))
        {
            returnToBase(icons[0]);
            basictank[0] = ' '
        }

        if (lighttank[0] == 'readyfordeploy' && inside && !allies)
        {
            lighttank[0] = ' ';
            deployUnit(lighttank, [xx, yy]);
            units[units.length - 1].status = 'acceleration';
            icons[1].pos = [icons[1].defaultpos[0], icons[1].defaultpos[1] + c.width / 4];;
            icons[1].dragable = false;
            icons[1].respawn = true;

        }
        else if ( lighttank[0] == 'readyfordeploy' && (!inside && !icons[1].respawn || allies))
        {
            returnToBase(icons[1]);
            lighttank[0] = " ";
        }

        if (ttank[0] == 'readyfordeploy' && inside && !allies)
        {
            ttank[0] = ' ';
            deployUnit(ttank, [xx, yy]);
            units[units.length - 1].status = 'acceleration';
            icons[2].pos = [icons[2].defaultpos[0], icons[2].defaultpos[1] + c.width / 4];;
            icons[2].dragable = false;
            icons[2].respawn = true;

        }
        else if ( ttank[0] == 'readyfordeploy' && (!inside && !icons[2].respawn || allies))
        {
            returnToBase(icons[2]);
            ttank[0] = " ";
        }

    }


    lastTime = Date.now();


    // units
    // stats -- status, pos, hp, speed, maxspeed, range, damage, reload, angle, defaultangle , dir, sprite

    var basictank = ['acceleration', [0, 0], 1500, 0, k * 1.5, k * 7, 399, 1.3, - 90, - 90, 1, new Sprite('https://opengameart.org/sites/default/files/tanks_3.png', [55, 76], [194, 135], [c.width / 11, c.height / 21])];

    var lighttank = ['acceleration', [0, 0], 300, 0, k * 5.5, k * 10, 149, 0.9, - 90, - 90, 1, new Sprite("https://opengameart.org/sites/default/files/tanks_3.png", [71, 600], [159, 130], [c.width / 13, c.height / 24])];

    var ttank = ['acceleration', [0, 0], 150, 0, k * 3.5, k * 12.5, 30, 0.05, - 90, - 90, 1, new Sprite("https://opengameart.org/sites/default/files/tanks_3.png", [52, 269], [205, 124], [c.width / 11.6, c.height / 24])];
    //enemy units
    var enemybasic = ['acceleration', [0, 0], 1500, 0, k * 1.5, k * 7, 399, 1.3, - 90, - 90, - 1, new Sprite('https://opengameart.org/sites/default/files/tanks_3.png', [365, 76], [194, 135], [c.width / 11, c.height / 21])];

    var enemylight = ['acceleration', [200, 200], 300, 0, k * 5.5, k * 10, 149, 0.7, - 90, - 90, - 1, new Sprite("https://opengameart.org/sites/default/files/tanks_3.png", [395, 600], [159, 130], [c.width / 13, c.height / 24])];

    var enemyttank = ['acceleration', [0, 0], 150, 0, k * 3.5, k * 12.5, 10, 0.05, - 90, - 90, - 1, new Sprite("https://opengameart.org/sites/default/files/tanks_3.png", [362, 269], [205, 124], [c.width / 11.6, c.height / 24])];



    main()

    // The main game loop



    function main()
    {

     
        var now = Date.now();

        if (!game_paused) {
     
          var dt = (now - lastTime) / 1000;

          update(dt);

          render();
 
        }

        lastTime = now;

   
        if  (!isGameOver) requestAnimFrame(main);

    };

    function update(dt)
    {

            gameTime += dt;
     
            if (nextwave < 0) {
                nextwave = (enemydep * (18 - lvl)-gameTime + 2).toFixed(0)
            } else {
               nextwave -= dt;
            }

        if (Math.floor(gameTime) == 1 && firstwave == false)
        {
     
          if (lvl < 3) {
     
            if (lvl >= 0) {
                deployEnemy(enemybasic, [c.width / 4, c.height / 5]);
                deployEnemy(enemybasic, [c.width - (c.width / 4), c.height / 5]);
            }
     
            if (lvl >= 1) {
                deployEnemy(enemyttank, [c.width / 2, c.height / 20]);
            }
     
            if (lvl >= 2) {
                deployEnemy(enemylight, [c.width / 5, c.height / 18]);
                deployEnemy(enemylight, [c.width - (c.width / 5), c.height / 18]);
            }
          }
   
          if (lvl > 2 && lvl < 6) {
       
             if (lvl >= 3) {
                deployEnemy(enemybasic, [c.width / 2, c.height / 4]);
                deployEnemy(enemylight, [c.width / 2 - c.width / 16, c.height / 7]);
                deployEnemy(enemylight, [c.width / 2 + c.width / 16, c.height / 7]);
                deployEnemy(enemyttank, [c.width / 2, c.height / 14]);
                deployEnemy(enemyttank, [c.width / 2 - c.width / 8, c.height / 14]);
                deployEnemy(enemyttank, [c.width / 2 + c.width / 8, c.height / 14]);
         
                if (lvl == 3) {
                    deployEnemy(enemyttank, [c.width / 2 - c.width / 4, c.height / 14]);
                    deployEnemy(enemyttank, [c.width / 2 + c.width / 4, c.height / 14]);
                }
         
         
            }
     
            if (lvl >= 4) {
                deployEnemy(enemylight, [c.width / 8 - c.width / 11,  - c.height / 4]);
            }
     
            if (lvl >= 5) {
                deployEnemy(enemylight, [c.width + c.width / 64 ,  - c.height / 2]);
            }
       
          }
   
          if (lvl > 5 && lvl < 9) {
       
              if (lvl >= 6) {
                   deployEnemy(enemybasic, [c.width / 2, c.height / 4]);
                   deployEnemy(enemybasic, [c.width / 2 + c.width / 8, c.height / 4]);
                   deployEnemy(enemybasic, [c.width / 2 - c.width / 8, c.height / 4]);
         
                deployEnemy(enemyttank, [c.width / 2, c.height / 7]);
                deployEnemy(enemyttank, [c.width / 2 - c.width / 8, c.height / 7]);
                deployEnemy(enemyttank, [c.width / 2 + c.width / 8, c.height / 7]);
              }
       
              if(lvl >= 7) {
                  deployEnemy(enemylight, [c.width / 8 - c.width / 11, c.height / 14]);
                  deployEnemy(enemylight, [c.width - (c.width / 8 - c.width / 11), c.height / 14]);
              }
       
              if(lvl >= 8) {
                  deployEnemy(enemylight, [c.width / 8 - c.width / 11,  - c.height / 4]);
                  deployEnemy(enemylight, [c.width - (c.width / 8 - c.width / 11),  - c.height / 4]);
              }
       
       
       
          }
   
          if (lvl == 9) {
       
              for (var x = 0; x < 7; x++) {
                  setTimeout(deployEnemy, x* 50, enemybasic, [c.width/8 + x*(c.width/8), c.height / 4])
              }
              for (var x = 0; x < 6; x++) {
                  setTimeout(deployEnemy, x* 50, enemylight, [c.width/8 + x*(c.width/8) + c.width / 16, c.height / 7])
              }
              for (var x = 0; x < 7; x++) {
                  setTimeout(deployEnemy, x* 50, enemyttank, [c.width/8 + x*(c.width/8), c.height / 20])
              }
       
          }
     
     

            firstwave = true;
     
        }

        if (Math.floor(gameTime) == enemydep * (18 - lvl % 17))
        {

            deployEnemy(enemybasic, [getRandom(30, c.width - 30), getRandom(-20, - 40)]);
            deployEnemy(enemylight, [getRandom(30, c.width - 30), getRandom(-20, - 40) - (k * 2)]);
            deployEnemy(enemylight, [getRandom(30, c.width - 30), getRandom(-20, - 40) - (k * 2)]);
            deployEnemy(enemyttank, [getRandom(30, c.width - 30), getRandom(-20, - 40) - (k * 4)]);
            deployEnemy(enemyttank, [getRandom(30, c.width - 30), getRandom(-20, - 40) - (k * 4)]);
            enemydep++;
     
        }

            updateEntities(dt, units);
        updateEntities(dt, enemies);
        updateBullets(dt);
        updateIcons(dt);

          //   checkCollisions();

    };

    function updateIcons(dt)
    {

        for (i = 0; i < icons.length; i++)
        {
            if (icons[i].pos[1] > icons[i].defaultpos[1] && icons[i].respawn == true)
            {
                icons[i].pos[1] -= icons[i].respawnrate * k * dt;
            }
            else
            {
                icons[i].respawn = false;
            }
        }
    };

    function updateEntities(dt, list)
    {

             // Update the tank position




     
        for (var i = 0; i < list.length; i++)
        {

            var u = list[i];
            var u2;

            list == units ? u2 = enemies : u2 = units;


            u.time = u.time + dt || 0;
            u.lastshot = u.lastshot + dt || 0;
            u.avoidCollision(list, i, dt);
            //remove
            if (u.destroyed)
            {
                list.splice(i, 1);
                i--;
                if (list == units)
                {
                    counter++;
                }
                else
                {
                    counter2++;
                }
            }
            else if (list == enemies && u.pos[1] > c.height - (c.width / 4 + 2 * k))
            {

                isGameOver = true;
                gameOver('loss');
                break;

            }
            else if (
            list == units && u.pos[1] < k * 2)
            {
                isGameOver = true;
                gameOver('win');
                break;
            }

            if (u.status == "acceleration" && u.speed < u.maxspeed)
            {

                u.speed += 15 * dt;
                switch (list)
                {
                case units:
                    if (u.angle < u.defaultangle)
                    {
                        u.angle += Math.floor(80 * dt * u.dir);
                    }
                    else if (u.angle > u.defaultangle)
                    {
                        u.angle -= Math.floor(80 * dt * u.dir);
                    }
                    break;
                case enemies:

                    u.cang = u.defaultangle;
                    if (u.cang < -90)
                    {
                        u.cang += 180;
                    }
                    else if (u.cang > -90)
                    {
                        u.cang -= 180;
                    }
                    if (u.cang < u.angle)
                    {
                        u.angle -= Math.floor(75 * dt);
                    }
                    else if (u.cang > u.angle)
                    {
                        u.angle += Math.floor(75 * dt);
                    }



                }
            }



            if (u.time > 1 && !u.target && u.pos[1] > k)
            {
                u.findTarget(u2);
            }

            if (u.target && u.target.destroyed)
            {
                u.status = 'acceleration';
                delete u.target;

            }
            else if (u.status == "targetfound" && !u.target.destroyed)
            {

                if (u.speed > 0)
                {
                    u.speed -= u.maxspeed * 2 * dt;
                }
                else
                {
                    u.speed = 0
                }


         
                    u.cang = Math.floor(u.getAngle(u.target.pos));
             
                    if (list == enemies ) {
                        if (u.cang < -90)
                    {
                        u.cang += 180;
                    }
                    else if (u.cang > -90)
                    {
                        u.cang -= 180;
                    }
                    }
                    if (u.cang > u.angle && u.cang < u.angle + 3)
                    {
                        u.angle = u.cang;
                    } else if (u.cang > u.angle )
                    {
                        u.angle += Math.floor(150 * dt);
                    }
                    else if (u.cang < u.angle && u.cang > u.angle - 3)
                    {
                        u.angle = u.cang;
                    } else if (u.cang < u.angle )
                    {
                        u.angle -= Math.floor(150 * dt);
                    }
                         
             

         


                if (u.lastshot > u.reload && Math.floor(u.angle) == Math.floor(u.cang) && u.getDistance(u.target) < u.range)
                {

                    u.fireOnTarget();

                } else {
                     u.findTarget(u2);
                }

            }

            if (u.time > 0.7 && u.speed > 0)
            {

                u.moveAhead(dt);

            }

        };

    }

    function updateBullets(dt)
    {

        // Update all the explosions

     
        for (var i = 0; i < explosions.length; i++)
        {        explosions[i].sprite.update(dt);

                     // Remove if animation is done
             
            if (explosions[i].sprite.done)
            {            explosions.splice(i, 1);            i--; 
            }
        }

             // Update all the bullets

     
        for (var i = 0; i < bullets.length; i++)
        {

             
            var b = bullets[i];

            var rad = b.angle / (180 / Math.PI);
            b.pos[0] += Math.cos(rad) * b.speed * dt * b.dir;
            b.pos[1] += Math.sin(rad) * b.speed * dt * b.dir;


                            // Remove the bullet

             
            if (b.pos[1] < b.target.pos[1] + k && b.pos[1] > b.target.pos[1] - k && b.pos[0] < b.target.pos[0] + k && b.pos[0] > b.target.pos[0] - k)
            {         bullets.splice(i, 1);         i--;
                if (b.target.hp >= 0 && !b.target.destroyed)
                {
                    b.target.hp -= b.damage;
                }
                if (b.target.hp < 0)
                {
                    b.target.destroyed = true;
                    b.target.hp = 0;  // Add an explosion
                                    explosions.push(
                    {                    pos: b.target.pos,
                                            sprite: new Sprite("https://hsto.org/storage2/aeb/045/378/aeb0453784033c5b9c0a700f5952d84b.png", [0, 117],   [39, 39], [k * 3.2, k * 3.2], 14,   [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],  null,  true)
                    });
                }
            } 
        }

   
    }



    function render()
    {

        if (!isGameOver)
        {

            renderArea(ctx);
            renderEntities(enemies);
            renderEntities(units);
            renderBullets();
            renderEntities(explosions);


        }
    };

    function renderArea(ctx)  {

    ctx.globalAlpha = 0.5;
 
    for (x = 0;x * 102 < c.width;x++) {
        for (y = 0;y * 102 < c.height;y++) { ctx.drawImage(resources.get('https://opengameart.org/sites/default/files/Ground_03.png'), 0, 0, 512, 512, x*102, y*102,102,102);
        }
    }
    ctx.globalAlpha = 1;
   ctx.fillStyle = "rgba(250,250,250,0.19)";
        ctx.fillRect(0, 0, c.width, c.height );
        ctx.fillStyle = "rgba(50,200,50,0.9)";
        ctx.fillRect(0, 0, c.width, c.height / 20);
        ctx.fillStyle = " rgba(200,50,50,0.7)";
        ctx.fillRect(0, c.height - c.width / 4 - c.height / 20, c.width, c.height / 20);
        ctx.font = c.height / 24 + "px Arial";
        ctx.fillStyle = " rgba(250,250,250,0.7)";
 
ctx.fillText("NEXT WAVE IN " + Math.round  (nextwave) , c.width/10, c.height/22);


        ctx.beginPath();
        for (var x = c.width / 4; x < c.width; x += c.width / 4)
        {

            ctx.moveTo(x + 0.1, c.height - c.width / 4);
            ctx.lineTo(x + 0.1, c.height);
        };

        ctx.moveTo(0, c.height - c.width / 4);
        ctx.lineTo(c.width, c.height - c.width / 4);
        ctx.closePath();
        ctx.strokeStyle = "#eee";
        ctx.stroke();

        if (deployarea === true)
        {
            drawDeployArea();
        }


    };

    function drawDeployArea()
    {
 
        ctx.beginPath();
        ctx.rect(c.width / 100 -2, c.height / 2 -2, c.width - c.width / 100 - 3 +4, c.height / 3.7 +4);
        ctx.strokeStyle = "darkgreen";
         ctx.closePath();
        ctx.stroke();
 
        ctx.beginPath();
        ctx.rect(c.width / 100, c.height / 2, c.width - c.width / 100 - 3, c.height / 3.7);
        ctx.strokeStyle = "white";
        ctx.closePath();
        ctx.stroke();


    }

    function drawTrLights()
    {

        for (i = 0; i < icons.length; i++)
        {

            if (icons[i].respawn == true || !icons[i].active)
            {
                ctx.fillStyle = "red";
            }
            else
            {
                ctx.fillStyle = "green";
            }
            ctx.fillRect(c.width / 4.8 + c.width / 4 * i, c.height - c.width / 4.1, c.width / 30, c.width / 30);
        };
    };


    function renderEntities(list)
    {

     
        for (var i = 0; i < list.length; i++)
        {

                    renderEntity(list[i]);
 
        }
 
        drawTrLights();
        drawIcons(icons);
 
    }

    function renderBullets() {
        for (var i = 0; i < bullets.length; i++)
        {
           
         ctx.save();
 
        ctx.fillStyle = "black";
         ctx.beginPath ();
         ctx.arc(bullets[i].pos[0], bullets[i].pos[1], 1 + bullets[i].damage/300, 0, 2*Math.PI) ;
        ctx.fill();
           ctx.restore();
        }
   
        }


    function drawIcons(list)
    {
        for (var i = 0; i < list.length; i++)
        {

            if (!list[i].dragable)
            {

                   ctx.save();
                ctx.translate(list[i].pos[0] + list[i].sprite.resized[0] / 2, list[i].pos[1] + list[i].sprite.resized[1] / 2);
                ctx.rotate(Math.PI / 180 * (-90));
                ctx.translate(-list[i].sprite.resized[0] / 2, - list[i].sprite.resized[1] / 2);
                if(!list[i].active) ctx.globalAlpha = 0.2;
                list[i].sprite.render(ctx);
         
                ctx.restore();
         
     

            }
            else
            {

                ctx.save();

                if (mouse.down)
                {
                    ctx.translate(mouse.x, mouse.y);
                }
                else
                {
                    ctx.translate(xxx, yyy);
                }
                ctx.rotate(Math.PI / 180 * (-90));
                ctx.translate(-list[i].sprite.resized[0] / 2, - list[i].sprite.resized[1] / 2);
         
     

                list[i].sprite.render(ctx);

                list[i].pos = [xxx, yyy]

                ctx.restore();
            }
        }
    };


    function renderEntity(entity)
    {


        if (!entity.destroyed)
        {    ctx.save();
            ctx.translate(entity.pos[0], entity.pos[1]);

            if (entity.time && entity.time < 0.7)
            {
                ctx.scale(1.9 - entity.time * entity.time * 1.7, 1.9 - entity.time * entity.time * 1.7);
            }

            ctx.rotate(Math.PI / 180 * (entity.angle));

            ctx.translate(-entity.sprite.resized[0] / 2, - entity.sprite.resized[1] / 2);

             entity.sprite.render(ctx);
            renderHP(entity);  ctx.restore();
        }
    }

    function renderHP(entity)
    {

        if (entity.time > 0.8)
        {
            var hp = entity.hp * 100 / entity.maxhp;
            if (hp < 0) hp = 0;
            if (entity.dir < 0)
            {
                var reverse = entity.sprite.resized[0];
            }
            else
            {
                var reverse = 0;
            }

            ctx.beginPath();
            ctx.lineWidth = k / 2.5;
            ctx.lineCap = "round";
            ctx.strokeStyle = "black";
            ctx.moveTo(0 + reverse, 0);
            ctx.lineTo(0 + reverse, entity.sprite.resized[1]);
            ctx.stroke();


            ctx.beginPath();
            ctx.lineWidth = k / 3.2;
            ctx.lineCap = "round";
            ctx.strokeStyle = "lightgrey";
            ctx.moveTo(0 + reverse, 0);
            ctx.lineTo(0 + reverse, entity.sprite.resized[1]);
            ctx.stroke();

            ctx.beginPath();

            ctx.lineWidth = k / 4;

            ctx.lineCap = "round";
            ctx.strokeStyle = "rgb(" + Math.floor(100 - hp * 2.56) + "," + Math.floor(hp * 2.56) + ",0)";
            ctx.moveTo(0 + reverse, 0);
            ctx.lineTo(0 + reverse, hp / 100 * entity.sprite.resized[1]);
            ctx.stroke();
            ctx.lineWidth = 1;
        }
    }

};






/////////////^^^^^^^^^^^^^^////////////

var requestAnimFrame = (function ()
{

 
    return window.requestAnimationFrame ||

            window.webkitRequestAnimationFrame ||

            window.mozRequestAnimationFrame ||

            window.oRequestAnimationFrame ||

            window.msRequestAnimationFrame ||

     
    function (callback)
    {

                    window.setTimeout(callback, 1000 / 60);

         
    };
})();

///^^^^^^^///////////^^^^/////////

function loader()
{

    var maindiv = document.getElementById("main");


    if (lvl < 0 || lvl > 9) {
        lvl = 0;
    }

    maindiv.innerHTML = '<button id="start" onclick="startGame ()">Start Game</button><button id="info" onclick="inf()">Info</button><br/><span class="dif">Difficulty:</span><br/><button id="btn-left" onclick="changeLvl(0)">&lt</button><span class="dif" >' + dif[lvl] + '  </span><button id="btn-right" onclick="changeLvl (1)" >&gt</button>';

    lastTime = Date.now();

};
//////////////////////////////////

(function ()
{
    var resourceCache = {};
    var loading = [];
    var readyCallbacks = [];
    // Load an image url or an array of image urls
    function load(urlOrArr)
    {
        if (urlOrArr instanceof Array)
        {
            urlOrArr.forEach(function (url)
            {
                _load(url);
            });
        }
        else
        {
            _load(urlOrArr);
        }
    }

    function _load(url)
    {
        if (resourceCache[url])
        {
            return resourceCache[url];
        }
        else
        {
            var img = new Image();
            img.onload = function ()
            {
                resourceCache[url] = img;
                if (isReady())
                {
                    readyCallbacks.forEach(function (func)
                    {
                        func();
                    });
                }
            };
            resourceCache[url] = false;
            img.src = url;
        }
    }

    function get(url)
    {
        return resourceCache[url];
    }
    function isReady()
    {
        var ready = true;
        for (var k in resourceCache)
        {
            if (resourceCache.hasOwnProperty(k) && !resourceCache[k])
            {
                ready = false;
            }
        }
        return ready;
    }

    function onReady(func)
    {
        readyCallbacks.push(func);
    }
    window.resources =
    {
        load: load,
        get: get,
        onReady: onReady,
        isReady: isReady
    };
})();

resources.load([

"https://opengameart.org/sites/default/files/tanks_3.png",

"https://hsto.org/storage2/aeb/045/378/aeb0453784033c5b9c0a700f5952d84b.png",

"https://opengameart.org/sites/default/files/Ground_03.png"
]);

resources.onReady(loader);

-----------------------------------------------------------------------------------------------------------------------------
Youtube

Spoiler: Music Player App - html

<!-- Created by Dominik Saftig -->

<!--Created by Dominik Saftig-->

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="author" content="sheikh toufeeq">
<title>Solo Music</title>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
/*

*/
:root {
--primary:#f33449;
--white:#fff;
--grey:#555;
}
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body {
font-family: 'Open Sans', sans-serif;
font-size:1rem;
background:#000;
}
body.dark {
--white:#000;
--grey:#fff;
}
a,a:hover {
text-decoration:none;
}
img{
max-width:100%;
}
p{
color:var(--grey);
}
.sec {
background:var(--white);
width:100%;
min-height:100vh;
max-width:460px;
margin:auto;
animation:fadeIn 0.5s ease;
}
@keyframes fadeIn{
0%{
  opacity:0;
}
100%{
opacity:1;
}
}
button{
display:inline-block;
outline:none;
border:none;
background:transparent;
}
.sec-1 {
padding:20px;
display:flex;
justify-content: center;
text-align: center;
min-height:100vh;
}

.sec-1 svg {
width:90%;
}
.sec-1 h1 {
  font-size:2.5rem;
}
.sec-1 h1 > span {
color:#dd5790;
}
.sec-1 p {
margin:10px 0 25px;
color:#666;
font-size:14px;
}
.sec-1 button {
padding:12px 25px;
background:#dd5790;
color:#fff;
border-radius:30px;
}
.hide {
display:none;
}
.header {
margin:0 10px;
padding:8px 10px;
display:flex;
justify-content:space-between;
border-bottom:2px solid #ccc;
color:var(--grey);
}
.header button {
color:var(--white);
padding:6px 10px;
font-size:14px;
cursor:pointer;
background:#dd5790;
border-radius:30px;
}
.header button:hover {
opacity:0.7;
}
body.dark .header button {
background:#fff;
}
.music-list {
padding-bottom:70px;
}
.music {
padding:10px 10px;
display:flex;
align-items: center;
width:100%;
border-bottom:1px solid #dedede;
cursor:pointer;
color:var(--grey);
}
.music.active {
color:var(--primary);
}
.list-thumbnail {
height:60px;
width:60px;
border-radius:4px;
overflow:hidden;
}
.list-content {
flex:1;
padding:0 15px;
}
.list-btn {
width:50px;
height:50px;
}
.list-btn > i {
font-size:40px;
color:var(--grey);
}
.music.active .list-btn > i {
display:none;
}
.music .equalize {
display:none;
}
.music.active .equalize {
display:block;
}
.music-list .equalize span {
display:inline-block;
height:18px;
width:3px;
margin:1px;
background:var(--primary);
animation:equalize 1s linear infinite;
transform-origin: bottom;
}
.equalize.pause span {
  animation-play-state:paused!important;
}
.equalize span:nth-child(2) {
animation-delay:.3s;
}
.equalize span:nth-child(3) {
animation-delay:.6s;
}
@keyframes equalize {
0%, 100%{
  transform:scaleY(1);
}
50%{
  transform:scaleY(0.3);
}
}

.players {
position:fixed;
width:100%;
max-width:460px;
left:0;
bottom:0;
z-index:5;
background:var(--white);
color:#555;
transition:300ms;
}
.players.active {
height:100vh;
top:0;
text-align:center;
padding:0 20px;
overflow-y:scroll;
animation:fadeIn 0.5s ease;
animation-fill-mode:both;
}
.bottom {
display:flex;
align-items: center;
height:70px;
padding:5px 10px;
border-top:1px solid #ccc;
}
.players.active .bottom {
display:block;
border-top:none;
height:auto;
padding:0;
margin-bottom:25px;
}
.thumbnail {
height:60px;
width:60px;
overflow:hidden;
border-radius:4px;
}
.players.active .thumbnail{
width:220px;
margin:40px auto;
height:220px;
border-radius:50%;
background:#000;
box-shadow:0 4px 10px rgba(0,0,0,0.2);
}

.players.active .thumbnail.spin {
box-shadow: none;
animation:spin 4s linear infinite;
}
.players.active .thumbnail.spin:hover {
animation-play-state:paused;
transition:200ms;
}
.players.active .thumbnail.spin.pause{
animation-play-state:paused;
}
@keyframes spin {
to{
transform:rotate(360deg);
}
}
.thumbnail img {
object-fit:cover;
}

.content {
flex:1;
padding:0 15px;
color:var(--grey);
}
.btn-group .material-icons {
font-size:40px;
}
.btn-group button {
color:var(--primary);
cursor:pointer;
height:60px;
width:60px;
border-radius:50%;
cursor:pointer;
}
.playBtn {
z-index:6;
}

.back-btn {
position:absolute;
top:10px;
left:10px;
height:40px;
width:40px;
cursor:pointer;
border-radius:20px;
}
.dark-mode-btn {
position:absolute;
top:10px;
right:10px;
height:40px;
width:40px;
cursor:pointer;
border-radius:20px;
}

.back-btn:hover {
background:rgba(255,0,0,0.2);
}
.back-btn .material-icons {
  font-size:40px;
}
body.dark .players .material-icons {
color:#fff;
}
body.dark .players .material-icons.active  {
color:var(--primary);
}
.prevBtn, .nextBtn, .tools , .progress-box, .back-btn, .dark-mode-btn {
display:none;
}
.players.active .nextBtn,
.players.active .prevBtn,
.players.active .back-btn,
.players.active .dark-mode-btn {
display:inline-block;
}
.players.active .progress-box,
.players.active .tools {
display:flex;
}
.tools {
width:100%;
margin:30px 0;
justify-content: space-evenly;
}
.tools .material-icons {
font-size:30px;
color:#555;
cursor:pointer;
}
.tools .material-icons.active {
color:var(--primary);
}
.players.active .playBtn {
margin:0 25px;
background:rgba(255,0,0,0.2);
transition:0.3s;
}
.players.active .playBtn:hover {
background:var(--primary);
color:#fff;
}
.players.active .content h3{
font-size:24px;
color:var(--primary);
}
.progress-box {
position:relative;
margin-bottom:30px;
display:none;
width:100%;
justify-content:space-between;
font-size:14px;
}
.players.active .progress-box {
display:flex;
}
.progress-bar {
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    z-index: 4;
    height: 5px;
    background: #ccc;
    width: 100%;
    border-radius: 30px;
    top:-10px;
}
.progress-bar::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 15px;
    width: 15px;
    border: 0;
    background: var(--primary);
    border-radius:50%;
    cursor: pointer;
}

.volume-box {
display:none;
}
.players.active .volume-box {
transform:translateY(15px);
display: none;
}
.players.active .volume-box.show {
display: block;
}

.volume-box .progress-bar {
position:relative;
width:60%;
}
.volume-box > span {
display:inline-block;
height:30px;
width:30px;
margin:0 5px;
cursor:pointer;
transition:200ms;
}
.volume-box > span:hover {
color:var(--primary);
}
#audio {
display:none;
}
</style>
</head>
<body>
<section class="sec sec-1" id="sec-1">
  <div>
   <svg id="Capa_1" enable-background="new 0 0 512 512" height="350" viewBox="0 0 512 512" width="300" xmlns="http://www.w3.org/2000/svg"><g><g><g><path d="m473.088 266.293h-57.622v-36.494c0-87.93-71.536-159.466-159.466-159.466s-159.465 71.536-159.465 159.465v36.494h-57.623v-36.494c0-119.703 97.385-217.088 217.087-217.088 119.703 0 217.088 97.385 217.088 217.088v36.495z" fill="#407093"/></g></g><g><g><path d="m256 12.711c-5.024 0-10.006.186-14.946.524 112.757 7.705 202.143 101.885 202.143 216.563v36.494h29.892v-36.494c-.001-119.702-97.386-217.087-217.089-217.087z" fill="#2b4d66"/></g></g><g><circle cx="256" cy="411.198" fill="#dd5790" r="88.091"/></g><g><path d="m304.699 337.796c9.275 13.951 14.69 30.69 14.69 48.699 0 48.651-39.44 88.091-88.091 88.091-18.009 0-34.748-5.415-48.699-14.69 15.781 23.739 42.759 39.392 73.402 39.392 48.651 0 88.091-39.44 88.091-88.091-.001-30.642-15.654-57.619-39.393-73.401z" fill="#da387d"/></g><g><path d="m67.12 439.174h-34.12c-18.225 0-33-14.775-33-33v-125.547c0-18.225 14.775-33 33-33h34.12z" fill="#dae7ef"/></g><g><path d="m444.88 247.627h34.12c18.225 0 33 14.775 33 33v125.547c0 18.225-14.775 33-33 33h-34.12z" fill="#dae7ef"/></g><path d="m33 247.627c-2.349 0-4.639.25-6.849.716v148.55c0 8.284-6.716 15-15 15h-10.647c2.709 15.498 16.222 27.281 32.496 27.281h34.12v-191.547z" fill="#c1d5e4"/><path d="m484.291 248.054c.278 1.723.428 3.489.428 5.291v125.547c0 18.225-14.775 33-33 33h-6.839v27.281h34.12c18.225 0 33-14.775 33-33v-125.546c0-16.424-12-30.04-27.709-32.573z" fill="#c1d5e4"/><g><g><path d="m194.242 274.47c-4.263 0-7.717-3.455-7.717-7.717v-62.53c0-4.262 3.455-7.717 7.717-7.717s7.717 3.455 7.717 7.717v62.53c0 4.262-3.455 7.717-7.717 7.717z" fill="#dd5790"/></g><g><path d="m348.638 263.683c-4.263 0-7.717-3.455-7.717-7.717v-40.957c0-4.262 3.455-7.717 7.717-7.717 4.263 0 7.717 3.455 7.717 7.717v40.957c0 4.262-3.454 7.717-7.717 7.717z" fill="#dd5790"/></g><g><path d="m225.121 291.84c-4.263 0-7.717-3.455-7.717-7.717v-97.27c0-4.262 3.455-7.717 7.717-7.717 4.263 0 7.717 3.455 7.717 7.717v97.27c0 4.261-3.455 7.717-7.717 7.717z" fill="#dd5790"/></g><g><path d="m256 283.155c-4.263 0-7.717-3.455-7.717-7.717v-79.9c0-4.262 3.455-7.717 7.717-7.717 4.263 0 7.717 3.455 7.717 7.717v79.9c0 4.261-3.455 7.717-7.717 7.717z" fill="#dd5790"/></g><g><path d="m317.759 291.84c-4.263 0-7.717-3.455-7.717-7.717v-97.27c0-4.262 3.455-7.717 7.717-7.717s7.717 3.455 7.717 7.717v97.27c0 4.261-3.454 7.717-7.717 7.717z" fill="#dd5790"/></g><g><path d="m286.879 252.896c-4.263 0-7.717-3.455-7.717-7.717v-19.383c0-4.262 3.455-7.717 7.717-7.717s7.717 3.455 7.717 7.717v19.383c0 4.262-3.455 7.717-7.717 7.717z" fill="#dd5790"/></g><g><path d="m163.362 252.896c-4.263 0-7.717-3.455-7.717-7.717v-19.383c0-4.262 3.455-7.717 7.717-7.717s7.717 3.455 7.717 7.717v19.383c.001 4.262-3.454 7.717-7.717 7.717z" fill="#dd5790"/></g></g><g><path d="m296.022 406.002-60.913-35.168c-4-2.309-9 .577-9 5.196v70.336c0 4.619 5 7.506 9 5.196l60.913-35.168c4-2.309 4-8.083 0-10.392z" fill="#f6f9f9"/></g><g><path d="m104.487 469.944h-34.504c-8.783 0-15.903-7.12-15.903-15.903v-221.282c0-8.783 7.12-15.903 15.903-15.903h34.504c8.783 0 15.903 7.12 15.903 15.903v221.283c-.001 8.783-7.121 15.902-15.903 15.902z" fill="#dae7ef"/></g><g><path d="m407.513 216.856h34.504c8.783 0 15.903 7.12 15.903 15.903v221.283c0 8.783-7.12 15.903-15.903 15.903h-34.504c-8.783 0-15.903-7.12-15.903-15.903v-221.283c.001-8.783 7.121-15.903 15.903-15.903z" fill="#dae7ef"/></g><g fill="#c1d5e4"><path d="m104.487 216.856h-12.223v209.061c0 8.783-7.12 15.903-15.903 15.903h-22.281v12.222c0 8.783 7.12 15.903 15.903 15.903h34.504c8.783 0 15.903-7.12 15.903-15.903v-221.283c-.001-8.783-7.12-15.903-15.903-15.903z"/><path d="m442.017 216.856h-12.222v209.061c0 8.783-7.12 15.903-15.903 15.903h-22.281v12.222c0 8.783 7.12 15.903 15.903 15.903h34.504c8.783 0 15.903-7.12 15.903-15.903v-221.283c-.001-8.783-7.121-15.903-15.904-15.903z"/></g></g></svg>
<h1>Solo <span>Music</span></h1>
<p>Create by Dominik Saftig</p>
<button onclick="showMusicList()">Let's Start</button>
  </div>
</section>
<section class="sec sec-2 hide" id="sec-2">

<header class="header">
<!-- <button onclick="filterCat('Sad')">Sad</button>
<button onclick="filterCat('Love')">Love</button>
<button onclick="filterCat('Dance')">Dance</button>
<button onclick="filterCat('Romantic')">Romantic</button>
<button onclick="filterAll()">All</button>
-->
<h3>All Songs</h3>
</header>

<div class="music-list" id="music-list">
</div>
<audio src="" id="audio" ></audio>
<div class="players" id="players">
   <button class="back-btn" onclick="showplayer()"><i class="material-icons" >expand_more</i></button>
   <button class="dark-mode-btn" onclick="darkMood()"><i class="material-icons" >invert_colors</i></button>
 
   <div class="bottom" >
     <div class="thumbnail" >
         <img id="thumbnail" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQRdF1EyT4zeHHIcicA4wA8uMjxoGAblXsTIiXPhdTCzbG1YI18&usqp=CAU" alt="" >
     </div>
     <div class="content" onclick="showplayer()">
       <h3 id="name">Name</h3>
       <small id="category">Category</small>
     </div>
   
     <div class="volume-box">
     <span onclick="volumeDown()"><i class="material-icons">remove</i></span>
   
     <input type="range" class="progress-bar" id="volumeBar" step="1" value="80" min="0" max="100"
      oninput="audio.volume = this.value/100">
     
     <span onclick="volumeUp()"><i class="material-icons">add</i></span>
     </div>
   
     <div class="tools" >
       <button class="equaliser" onclick="equalizerBtn(event)">
       <i class="material-icons">equalizer</i>
       </button>
       <button class="repeat" onclick="repeat(event)">
         <i class="material-icons">repeat</i>
       </button>
       <button class="volume" onclick="volumeBox(event)">
         <i class="material-icons">volume_up</i>
       </button>
       <button class="favorite" onclick="addFvt(event)">
         <i class="material-icons">favorite</i>
       </button>
     </div>
     <div class="progress-box" >
       <input type="range" class="progress-bar" id="progress" min="0" max="" value="0" onchange="changeProgressBar()"/>
         <div id="ctview" >00:00</div>
         <div id="ttview">00:00</div>
     </div>
     <div class="btn-group" >
       <button class="prevBtn" onclick="prevPlay()">
         <i class="material-icons">skip_previous</i>
       </button>
       <button class="playBtn"  onclick="playPause(event)">
        <i id="playBtn" class="material-icons">play_arrow</i>
       </button>
       <button class="nextBtn" onclick="nextPlay()">
         <i class="material-icons">skip_next</i>
       </button>
     </div>
   </div>
</div>
</section>
<!-- script  -->
<script>
// amardeep kesharwani
const playerWindow = document.getElementById("players");
const audio = document.getElementById("audio");
const name = document.getElementById("name");
const category = document.getElementById("category");
const thumbnail = document.getElementById("thumbnail");
const playBtn = document.getElementById("playBtn");
const progress = document.getElementById("progress");
const ttview = document.getElementById("ttview");
const tcview = document.getElementById("tcview");
const volumeBar = document.getElementById("volumeBar");

const musicList = document.getElementById("music-list");
const body = document.querySelector("body");
// variable
let musicData = [
{
id:1,
category:"Dance",
name:"Faded - Alan Walker",
src:"https://2u039f-a.akamaihd.net/downloads/ringtones/files/mp3/alan-walker-faded-ringtone-30926.mp3",
image:"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQoGWmS7kOCnkLAvH9g0_fZMdKW0d-l6P-H3yZaDokzVPZ4Y4bY&usqp=CAU",
},
{
id:2,
category:"Love",
name:"Chahun ya - Aashiqui-2",
src:"https://2u039f-a.akamaihd.net/downloads/ringtones/files/mp3/chahun-main-ya-naa-3448.mp3",
image:"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQk-rT8uIudDAvN1p7qGBpyuLLF8DWwA_4ta7Oxtw5k6397rn2P&usqp=CAU",
},
{
id:3,
category:"Sad",
name:"Dil ka lagana",
src:"https://2u039f-a.akamaihd.net/downloads/ringtones/files/mp3/kya-rang-laya-dil-ka-lagana-raabta-lambiyaan-si-judaiyaan-arijit-singh-ring-29410.mp3",
image:"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQuZEhM4JWi0kLeHFQlnineERhaNlvCbjpwoHDTnemesNm5XtSh&usqp=CAU",
},
{
id:4,
category:"Love",
name:"Tum hi ho",
src:"https://quz1yp-a.akamaihd.net/downloads/ringtones/files/mp3/tujhe-zindagi-du-freemaza-1387.mp3",
image:"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQRdF1EyT4zeHHIcicA4wA8uMjxoGAblXsTIiXPhdTCzbG1YI18&usqp=CAU",
},
{
id:5,
category:"Love",
name:"kaho na pyar hai",
src:"https://quz1yp-a.akamaihd.net/downloads/ringtones/files/mp3/ringtone-kaho-naa-pyaar-hai-50104.mp3",
image:"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQ91A18HUFoYk2KmejbAnT_ULfxbYI5I-eJtqjsQmvPVghpxac7&usqp=CAU",
},
{
id:6,
category:"Love",
name:"Love me like do",
src:"https://quz1yp-a.akamaihd.net/downloads/ringtones/files/mp3/lovemelikeyoudonotification-9607.mp3",
image:"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSJhlenOe3XhPmFaVhs7k5LPnTdITSaNgwkJGulEoiZXMn8U5_V&usqp=CAU",
},
{
id:7,
category:"Dance",
name:"Stereo Love",
src:"https://quz1yp-a.akamaihd.net/downloads/ringtones/files/mp3/stereoloveringtone-5231.mp3",
image:"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSG0JnTUjKBjO-2Kg3cxd3hF5N-4pLe3F7fPGq0Z43D96mTqY0N&usqp=CAU",
},
{
id:8,
category:"Love",
name:"Radhakrishn fluit",
src:"https://quz1yp-a.akamaihd.net/downloads/ringtones/files/mp3/radhakrishnaringtone-43687.mp3",
image:"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTZgjJ5H3VZ78EkG88xYmNiOmONJnTUwtPRm82re6WOqfiEgMOF&usqp=CAU",
},
{
id:9,
category:"Love",
name:"Radhakrishn Love",
src:"https://quz1yp-a.akamaihd.net/downloads/ringtones/files/mp3/best-ringtone-krishn-70be80cb-1d27-4382-80d0-4972c8679083-45110.mp3",
image:"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcT-_7hrwqXewwE_ZOCmcf3aWwExxE1SI9HCTDai9qZPkwf7LkIu&usqp=CAU",
},
{
id:10,
category:"Sad",
name:"Jab bna uska bna",
src:"https://2u039f-a.akamaihd.net/downloads/ringtones/files/mp3/uska-17223.mp3",
image:"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSfJZeLuouw9kuPTZvxXsWvIJNVKWeJWGOHW_xEewWWXLg-85Dl&usqp=CAU",
},
{
id:11,
category:"Sad",
name:"khamoshiya Aawaj hai",
src:"https://quz1yp-a.akamaihd.net/downloads/ringtones/files/mp3/khamoshiyan-aavaj-hai-pagalworld-com-28786.mp3",
image:"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRq4Gx1TKbTydT1veGl6c2AFYpf4Wras6x-cRCKdX9MOXaZSIZZ&usqp=CAU",
},
{
id:12,
category:"Dance",
name:"I am a Rider",
src:"https://2u039f-a.akamaihd.net/downloads/ringtones/files/mp3/rider-mobile-ringtone-46241.mp3",
image:"https://avatars.sololearn.com/d447897c-b803-4e6e-bd74-8ab8966ba711.jpg",
papular:15,
},
{
id:13,
category:"Dance",
name:"Otilia Bilioner",
src:"https://quz1yp-a.akamaihd.net/downloads/ringtones/files/mp3/otiliabilioneraradioeditringtone-27801.mp3",
image:"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRb2Qec75WQvDv_lrJ1PHIqaWx8Ylyo7Gkpxu_ZbIEcy5yhY6on&usqp=CAU",
},
{
id:14,
category:"Love",
name:"Tu meri Dost",
src:"https://quz1yp-a.akamaihd.net/downloads/ringtones/files/mp3/tumeridosthainsongspkringtone-8802.mp3",
image:"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcR2X15hbWDrbxuMSJCR5-taAnulozr6FAcaoS0y-3Shjrf95X51&usqp=CAU",
},
{
id:15,
category:"Sad",
name:"milne hai mujhe aayi",
src:"https://quz1yp-a.akamaihd.net/downloads/ringtones/files/mp3/milne-hai-mujhse-aayi-aashiqui-2-ringtone-pagalworld-com-1454.mp3",
image:"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRyPB-mPN8VBVx98-GDHwiNfiTOsg-T4j4CUsylLfRSIyhZAd6K&usqp=CAU"
},
{
id:16,
category:"Romantic",
name:"O Khuda - hero",
src:"https://2u039f-a.akamaihd.net/downloads/ringtones/files/mp3/o-khuda-hero-ringtone-14026.mp3",
image:"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTVbAjmIEeDVpuIxdLKwF-e37K-4wx0EU51kIYUvV7XFTJ2P4Oj&usqp=CAU",
},
{
id:17,
category:"Dance",
name:"Carryminati - UTuber",
src:"https://2u039f-a.akamaihd.net/downloads/ringtones/files/mp3/carryminati-50296.mp3",
image:"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRMq9PEkWr1vaFG8e2rUyiQHeaUlaimA3JAqbOnZeU2SwilniD3&usqp=CAU",
},
{
id:18,
category:"Horror",
name:"i am coming",
src:"https://quz1yp-a.akamaihd.net/downloads/ringtones/files/mp3/witch-laugh-28505.mp3",
image:"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQpQhKCoX7BNDq3wUcsWEx-uJTmGVYjntpGQWIkpwymAnQKZQW3&usqp=CAU"
},
{
id:19,
category:"My Crush ",
name:"Befikra - Disha pathani",
src:"https://quz1yp-a.akamaihd.net/downloads/ringtones/files/mp3/2befikrapagalworldinforingtone-21189.mp3",
image:"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRgBnbu64XmbZ9q27ZFpfuzzoFC0V3uJVXX9Q&usqp=CAU"
},
{
id:20,
category:"Romantic",
name:"Aap mujhe achhe lgne",
src:"https://loverays.com/ringtones/Aap_Mujhe_Achay_Lagne_Lage.mp3",
image:"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcROp4dF8PpIKNahtjyjhbpmNP8KBYFA7ZDhzILmwNonnFsVY_BK&usqp=CAU",
},
{
id:21,
category:"Romantic",
name:"Saanson ko - zid",
src:"https://quz1yp-a.akamaihd.net/downloads/ringtones/files/mp3/saanson-ko-zid-arijit-singh-ringtone-4555.mp3",
image:"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRqc_tcDOpYPHeqelLmzH9F8L-O2oLgTfi2g4sCORIDAIK0pPZA&usqp=CAU",
},
{
id:22,
category:"Dance",
name:"English medium",
src:"https://quz1yp-a.akamaihd.net/downloads/ringtones/files/mp3/tu-chij-lajawab-tera-koi-na-jawab-status-ringtone-sapna-choudhary-39997.mp3",
image:"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRmEd4bLIhrHXQj0dbB0w-5LUoZaPvpbdnC6Q&usqp=CAU"
},
{
id:23,
category:"Love",
name:"deewana Kar Raha - Raaz ",
src:"https://d6cp9b00-a.akamaihd.net/downloads/ringtones/files/mp3/deewana-kar-raha-hai-5617.mp3",
image:"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSrqZ9q-RsTZO7cOgXA0IQe-IT-yclLI9lXUFoqDlIBKWqEnoHn&usqp=CAU",
},
{
id:24,
category:"Dance",
name:"Let me love you",
src:"https://2u039f-a.akamaihd.net/downloads/ringtones/files/mp3/letmeloveyoudjsnakeftjustinbieberdjjohalcomringtoneringtone-38476.mp3",
image:"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcS2ULdnCNnlxZvQNkduuTVHZjKK1yHOSFZzGZSB__hw6LMJ4XlM&usqp=CAU",
},
{
id:25,
category:"Sad",
name:"Bhula Dena",
src:"https://quz1yp-a.akamaihd.net/downloads/ringtones/files/mp3/bhula-dena-muskurahat-com-7597.mp3",
image:"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRhCfKXq4F7khZwqD4nsj68JHXLVNo5WUJSq3FgogLcuW5d5-aF&usqp=CAU",
},
{
id:26,
category:"Dance",
name:"Sunny Sunny",
src:"https://2u039f-a.akamaihd.net/downloads/ringtones/files/mp3/sunnysunny-vtaujyk4-2058.mp3",
image:"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRq1F69qRL2WPJ3j6fTPEyIrhB6W1rVr9t8gQ&usqp=CAU"
},
]
let repeatMusic = false;
let index = 1;
let songs = musicData;

const elc = musicList.getElementsByClassName("equalize")[index-1];

const showMusicList = () => {
document.querySelector(".sec-1").classList.add("hide");
document.querySelector(".sec-2").classList.remove("hide");
}
const darkMood = () => {
body.classList.toggle("dark");
}

const setActive = (i) => {
  setEqualizer()
  let a =  musicList.querySelector(".active");
  if(a !== null) {
   a.classList.remove("active");
  }
  const ele = document.getElementsByClassName("music")[i-1];
  ele.classList.add("active");
}

const setData = data => {
name.textContent = data.name;
category.textContent = data.category;
thumbnail.src = data.image;
}

const playMusic = async (i) => {
  if(i == 18 || i == 10 ) {
   body.classList.toggle("dark");
   setTimeout(() => body.classList.toggle("dark"),7000);
  }
  let data = musicData.find(m => m.id === i) || musicData[1];
  setActive(i)
  setData(data);
  playBtn.textContent = "pause";
  audio.src = data.src;
  await audio.load();
  audio.play();
}

const playPause = e => {
    if(audio.paused) {
    playBtn.textContent = "pause";
    audio.play();
    setEqualizer()
   } else{
   playBtn.textContent = "play_arrow";
    audio.pause();
    setEqualizer(true)
   }
}

const showplayer = () => {
   playerWindow.classList.toggle("active");
}
const equalizerBtn = e => {
  e.target.classList.toggle("active");
  document.querySelector(".thumbnail").classList.toggle("spin");
}
const addFvt = e => {
  e.target.classList.toggle("active")
}
const repeat = e => {
  e.target.classList.toggle("active")
  repeatMusic = !repeatMusic;
  audio.loop = repeatMusic;
}
const volumeBox = e => {
  e.target.classList.toggle("active");
  document.querySelector(".volume-box").classList.toggle("show");
}
const nextPlay = () => {
  index++;
  if (index > musicData.length) {
   index = 1;
  }
  playMusic(index);
}
const prevPlay = () => {
  index--;
  if (index <= 0) {
  index = musicData.length;
  }
  playMusic(index);
}
// eventListners
audio.addEventListener("ended", () => {
  nextPlay();
})
audio.onloadeddata = () =>  {
progress.max = audio.duration
const ds = parseInt(audio.duration % 60)
const dm = parseInt((audio.duration / 60) % 60)
ttview.textContent = dm + ':' + ds;
}
audio.ontimeupdate =  () =>  {
   progress.value = audio.currentTime
}
audio.addEventListener('timeupdate', () => {
//progress.value = audio.currentTime;
var cs = parseInt(audio.currentTime % 60)
var cm = parseInt((audio.currentTime / 60) % 60)
  ctview.textContent = cm + ':' + cs;
}, false);

const changeProgressBar = () => {
   audio.currentTime = progress.value;
}

/* volume control */
const volumeDown = () => {
  volumeBar.value = Number(volumeBar.value) - 20
  audio.volume = volumeBar.value / 100
}
const volumeUp = () => {
  volumeBar.value = Number(volumeBar.value) + 20
  audio.volume = volumeBar.value / 100
}


const addList = (data) => {
  let div = document.createElement("div");
  div.classList.add('music');
  div.setAttribute("data-id", data.id);
  let html = `
   <div class="list-thumbnail" >
    <img src="${data.image}" alt="" >
   </div>
   <div class="list-content" >
   <h3>${data.name}</h3>
   <small>${data.category}</small>
   </div>
   <button class="list-btn" >
   <i class="material-icons">play_arrow</i>
    <div class="equalize">
    <span></span>
    <span></span>
    <span></span>
   </div>
   </button>`;
   div.innerHTML = html;
   musicList.append(div);
   div.addEventListener('click', () => {
    playMusic(data.id);
    playerWindow.classList.add("active");
    index = data.id;
   });
}

const setMusicList =  () => {
  songs.forEach(song => addList(song));
}

const FirstSetUp = () => {
  audio.src = musicData[index -1].src;
  setData(musicData[index -1]);
  setMusicList();
}
FirstSetUp()

const filterCat = (cat) => {
  songs = musicData.filter(song => song.category == cat);
  while(musicList.hasChildNodes()){
    musicList.removeChild(musicList.firstChild);
  }
  setMusicList()
}
const filterAll = () => {
  songs = musicData;
  while(musicList.hasChildNodes()){
    musicList.removeChild(musicList.firstChild);
  }
  setMusicList()
}
function setEqualizer(action = false){
const elc = musicList.getElementsByClassName("equalize")[index-1];
const thumb =  document.querySelector(".thumbnail");
if(elc.classList.contains("pause")) {
   elc.classList.remove("pause")
} else {
  if(action) {
   elc.classList.add("pause")
  }
}
if(thumb.classList.contains("spin") && audio.paused && action){
  thumb.classList.add("pause");
} else if(thumb.classList.contains("spin") &&!audio.paused){
  thumb.classList.remove("pause");
}
}
</script>
</body>
</html>

 

[joestr]

Hat jemand PowerShell gesagt? Nein?
Naja, ich lass das mal hier.

 

[RikuShadowclaw]

Hat jemand PowerShell gesagt? Nein?
Naja, ich lass das mal hier.

Fancy. War dir langweilig oder ist dir der Bildschirm deines Computers abhanden gekommen und du verbindest derzeit per Telnet/SSH auf deinen Rechner? =P

 

[joestr]

Fancy. War dir langweilig oder ist dir der Bildschirm deines Computers abhanden gekommen und du verbindest derzeit per Telnet/SSH auf deinen Rechner? =P

Ersteres, weil ich die PowerShell mittlerweile als festen Bestandteil in meinem beruflichen Administrations-Alltag habe. Ich benutze die PowerShell auch privat häufiger um Aktionen zu automatisieren.