Cleanup

2025-07-16 17:52:02 -07:00
parent 8d69328712
commit 352268148c
5 changed files with 0 additions and 192 deletions
@@ -1,192 +0,0 @@
 <html>
    <head>
        <title>HTML_Snake</title>
    </head>
    <body onkeydown='return keyDown(event)'; style="background-color: #333;">
        <h1 id="Score" style="width: 100%; text-align: center; color:#fff;">Score : 0</h1>
        <div id="BODY" style="position: relative; margin-bottom: 5px; margin-left: 50%; right: 300px; background-color: #666; width: 600px; height: 600px;">
        <script>
            var snake = [];
            var score = 0;
            var posX = 12;
            var posY = 15;
            var colX, colY;
            var saves = "";
            var paused = false;
            var direction = 2;
            var wasCollected = false;
            var body = document.getElementById("BODY");
            function set(name,value) {
                var expires = "";
                var date = new Date();
                date.setTime(date.getTime() + (9999*24*60*60*1000));
                expires = "; expires=" + date.toUTCString();
                document.cookie = name + "=" + (value || "")  + expires + "; path=/";
            }
            function get(name) {
                var nameEQ = name + "=";
                var ca = document.cookie.split(';');
                for(var i=0;i < ca.length;i++) {
                    var c = ca[i];
                    while (c.charAt(0)==' ') c = c.substring(1,c.length);
                    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
                }
                return null;
            }
            function hsl2rgb(h,s,l) {
              let a=s*Math.min(l,1-l);
              let f= (n,k=(n+h/30)%12) => l - a*Math.max(Math.min(k-3,9-k,1),-1);                
              return [f(0),f(8),f(4)];
            }
            var degree = 0;
            function newTail(x, y){
                degree += 5;
                if(degree > 359){
                    degree = 0;
                }
                var color = hsl2rgb(degree, .6, .5);
                var r = Math.floor(color[0] * 255).toString(16);
                var g = Math.floor(color[1] * 255).toString(16);
                var b = Math.floor(color[2] * 255).toString(16);
                var nX = (10*x)-10;
                var nY = (10*y)-10;
                var id = x + "," + y;
                if (x == colX){
                    if (y == colY){
                        var item = document.getElementById("collectable");
                        item.parentNode.removeChild(item);
                        wasCollected = true;
                        newCollectable();
                        score += 1;
                        document.getElementById("Score").innerHTML = "Score : " + score;
                    }
                }
                body.innerHTML = body.innerHTML + "<div id='" + id + "'; style='position: absolute; left: " + nX + "px; top:" + nY + "px; width: 10px; height: 10px; background-color: #" + r+g+b + "; border: 0; padding: 0; margin: 0;'></div>";
                return id;
            }
            function randInt(min, max) {
              min = Math.ceil(min);
              max = Math.floor(max);
              return Math.floor(Math.random() * (max - min + 1)) + min;
            }
            function newCollectable(){
            colX = randInt(1, 59);
            colY = randInt(1, 59);
            body.innerHTML = body.innerHTML + "<div id='collectable'; style='position: absolute; left: " + (colX*10-10) + "px; top:" + (colY*10-10) + "px; width: 10px; height: 10px; background-color: #f00; border: 0; padding: 0; margin: 0;'></div>";
            }
            function isBound(x, y){
            if (x > 0 && x < 61){
            if (y > 0 && y < 61){
            return true;
            }
            }
            return false;
            }
            function die(){
            set("data", saves + "|" + score );
            location.reload();
            }
            function update(){
                if (paused == false){
                    if (direction == 1){
                        posY -= 1;
                    }else if(direction == 2){
                        posX += 1;
                    }else if(direction == 3){
                        posY += 1;
                    }else if(direction == 4){
                        posX -= 1;
                    }
                    if (isBound(posX, posY)){
                        function func(item, index, arr){
                            var x = item.split(",")[0];
                            var y = item.split(",")[1];
                            if(posX == x){
                                if(posY == y){
                                    die();
                                }
                            }
                        }
                        snake.forEach(func);
                        snake.push(newTail(posX, posY));
                        if(wasCollected == false){
                            var rem = snake.shift();
                            var remObj = document.getElementById(rem);
                            remObj.parentNode.removeChild(remObj);
                        }else{
                            wasCollected = false;
                        }
                    }else{
                        die();
                    }
                }
            }
            function keyDown(event){
            if (event.key == "w"){
            direction = 1;
            }else if(event.key == "d"){
            direction = 2;
            }else if(event.key == "s"){
            direction = 3;
            }else if(event.key == "a"){
            direction = 4;
            }else if(event.key == "p"){
            if (paused == true){
            paused = false;
            document.getElementById("PauseScreen").style.display = "none";
            }else{
            paused = true;
            document.getElementById("PauseScreen").style.display = "";
            }
            }
            }
            function loadLeaderboard(){
            if (get("data") != null){
            saves = get("data");
            function func(item, index, arr){
            document.getElementById("Scoreboard").innerHTML += '<div><h2 id="' + item + '"; style="text-align: center; font-size: 20px; padding: 0; margin: 0; border: 0;">' + item.toString() + '</h2></div>';
            }
            saves.split("|").forEach(func);
            }
            }
            function start(){
                newCollectable();
                snake.push(newTail(10, 15));
                snake.push(newTail(11, 15));
                snake.push(newTail(12, 15));
                setTimeout(loadLeaderboard, 100);
                setInterval(update, 100);
            }
            start();
        </script>
    </div>
    <div id="PauseScreen"style="position: relative; display: none; width: 500px; margin-left: 50%; right: 250px;">
        <h2 style="text-align: center; color: #f00; ">Game Paused</h2>
    </div>
    <div style="margin: 0 40px; width: calc(100% - 80px); background-color: #777;">
        <h3 style="text-align: center; font-size: 25px; color: #0f0; padding: 0; margin: 0; border: 0;">LEADERBOARD</h3>
    </div>
    <hr style="margin: 0px; width:calc(100% - 82px);" />
    <div id="Scoreboard" style="margin: 0 40px; width: calc(100% - 80px); background-color: #777;"></div>
    <h3 style="position: absolute; right: 10px; bottom: 3px; color: #fff;">Designed by Derek in California</h3>
    </body>
 </html>