API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Mar 22nd, 2023
84
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 21.01 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         html,body{
  10.             height:100%;
  11.             width:100%;
  12.             display: flex;
  13.             flex-direction: column;
  14.             align-items: center;
  15.             justify-content: center;
  16.             padding:0px;
  17.             margin:0px;
  18.             background-color: #000000;
  19.             color: lime;
  20.         }
  21.         .display{
  22.             height:50%;
  23.             aspect-ratio: 1/1;
  24.             display: flex;
  25.             flex-wrap: wrap;
  26.             padding:0px;
  27.             margin:0px;
  28.             border:2px solid lime;
  29.         }
  30.         .part{
  31.             padding:0px;
  32.             margin:0px;
  33.         }
  34.         .mainMenu{
  35.             padding:0px;
  36.             margin:0px;
  37.             height: 100%;
  38.             width: 100%;
  39.             display: flex;
  40.             flex-direction: column;
  41.             align-items: center;
  42.             justify-content: center;
  43.         }
  44.         .mobile_controller{
  45.             height:50%;
  46.             aspect-ratio: 1/1;
  47.             display: flex;
  48.             flex-wrap: wrap;
  49.             padding:0px;
  50.             margin:0px;
  51.             border:2px solid lime;
  52.         }
  53.         .CPartb{
  54.             padding:0px;
  55.             margin:0px;
  56.             height: 33.33333333%;
  57.             width: 33.33333333%;
  58.             display: flex;
  59.             align-items: center;
  60.             justify-content: center;
  61.             background-color: lime;
  62.             color:#000000;
  63.             border:none;
  64.         }
  65.         .CPartv{
  66.             padding:0px;
  67.             margin:0px;
  68.             height: 33.33333333%;
  69.             width: 33.33333333%;
  70.             display: flex;
  71.             align-items: center;
  72.             justify-content: center;
  73.         }
  74.         .C1{
  75.             padding:0px;
  76.             margin:0px;
  77.             height: 100%;
  78.             width:100%;
  79.             display: flex;
  80.             flex-wrap: wrap;
  81.             flex-direction: column;
  82.             align-items:flex-start;
  83.             justify-content:flex-start;
  84.         }
  85.         .C2{
  86.             padding:0px;
  87.             margin:0px;
  88.             height: 100%;
  89.             width:100%;
  90.             display: flex;
  91.             flex-wrap: wrap;
  92.             flex-direction: row;
  93.             align-items:flex-start;
  94.             justify-content:flex-start;
  95.         }
  96.         .B1{
  97.             height:20%;
  98.             width:20%;
  99.             background-color:#000000;
  100.         }
  101.         .G10{
  102.             height:20%;
  103.             width:20%;
  104.             background-color:lime;
  105.         }
  106.         .G20{
  107.             height:100%;
  108.             width:60%;
  109.             background-color:lime;
  110.         }
  111.         .G30{
  112.             height:60%;
  113.             width:100%;
  114.             background-color:lime;
  115.         }
  116.         .G40{
  117.             height:80%;
  118.             width:60%;
  119.             background-color:lime;
  120.         }
  121.         .G11{
  122.             height:20%;
  123.             width:20%;
  124.             background-color:green;
  125.         }
  126.         .G21{
  127.             height:100%;
  128.             width:60%;
  129.             background-color:green;
  130.         }
  131.         .G31{
  132.             height:60%;
  133.             width:100%;
  134.             background-color:green;
  135.         }
  136.         .G41{
  137.             height:80%;
  138.             width:60%;
  139.             background-color:green;
  140.         }
  141.         .BoT{
  142.             height:20%;
  143.             width:60%;
  144.             display: flex;
  145.             flex-wrap: wrap;
  146.             flex-direction: row;
  147.             align-items:flex-start;
  148.             justify-content:flex-start;
  149.         }
  150.         .B2{
  151.             height:100%;
  152.             width:33.33333333%;
  153.             background-color:#000000;
  154.         }
  155.         .G5{
  156.             height:100%;
  157.             width:33.33333333%;
  158.             background-color:lime;
  159.         }
  160.     </style>
  161. </head>
  162. <body>
  163.     <div id="score">0</div>
  164.     <div class="display" id="display"></div>
  165.     <div class="mobile_controller" id="mobile_controller">
  166.         <div class="CPartv"></div><button class="CPartb" type="button" onclick="buttonPressed(0)">up</button>
  167.         <div class="CPartv"></div><button class="CPartb" type="button" onclick="buttonPressed(2)">left</button>
  168.         <div class="CPartv"></div><button class="CPartb" type="button" onclick="buttonPressed(3)">right</button>
  169.         <div class="CPartv"></div><button class="CPartb" type="button" onclick="buttonPressed(1)">down</button>
  170.         <div class="CPartv"></div>
  171.     </div>
  172.     <div style="height:10%;width:100%;display: flex;justify-content: space-around;"id="spriteContainer">
  173.         <div style="height:100%;aspect-ratio:1/1;"id="0"><div class="C1"><div class="B1"></div><div class="B1"></div><div class="B1"></div><div class="B1"></div><div class="B1"></div><div class="G20"></div><div class="B1"></div><div class="B1"></div><div class="B1"></div><div class="B1"></div><div class="B1"></div></div></div>
  174.         <div style="height:100%;aspect-ratio:1/1;"id="1"><div class="C2"><div class="B1"></div><div class="B1"></div><div class="B1"></div><div class="B1"></div><div class="B1"></div><div class="G30"></div><div class="B1"></div><div class="B1"></div><div class="B1"></div><div class="B1"></div><div class="B1"></div></div></div>
  175.         <div style="height:100%;aspect-ratio:1/1;"id="2"><div class="C1"><div class="B1"></div><div class="B1"></div><div class="B1"></div><div class="B1"></div><div class="B1"></div><div class="G40"></div><div class="BoT"><div class="B2"></div><div class="B2"></div><div class="B2"></div></div><div class="B1"></div><div class="G10"></div><div class="G10"></div><div class="G10"></div><div class="B1"></div></div></div>
  176.         <div style="height:100%;aspect-ratio:1/1;"id="3"><div class="C1"><div class="B1"></div><div class="G10"></div><div class="G10"></div><div class="G10"></div><div class="B1"></div><div class="G40"></div><div class="BoT"><div class="B2"></div><div class="B2"></div><div class="B2"></div></div><div class="B1"></div><div class="B1"></div><div class="B1"></div><div class="B1"></div><div class="B1"></div></div></div>
  177.         <div style="height:100%;aspect-ratio:1/1;"id="4"><div class="C1"><div class="B1"></div><div class="B1"></div><div class="B1"></div><div class="B1"></div><div class="B1"></div><div class="BoT"><div class="B2"></div><div class="B2"></div><div class="B2"></div></div><div class="G40"></div><div class="B1"></div><div class="G10"></div><div class="G10"></div><div class="G10"></div><div class="B1"></div></div></div>
  178.         <div style="height:100%;aspect-ratio:1/1;"id="5"><div class="C1"><div class="B1"></div><div class="G10"></div><div class="G10"></div><div class="G10"></div><div class="B1"></div><div class="BoT"><div class="B2"></div><div class="B2"></div><div class="B2"></div></div><div class="G40"></div><div class="B1"></div><div class="B1"></div><div class="B1"></div><div class="B1"></div><div class="B1"></div></div></div>
  179.         <div style="height:100%;aspect-ratio:1/1;"id="6"><div class="C1"><div class="B1"></div><div class="B1"></div><div class="B1"></div><div class="B1"></div><div class="B1"></div><div class="G21"></div><div class="B1"></div><div class="B1"></div><div class="B1"></div><div class="B1"></div><div class="B1"></div></div></div>
  180.         <div style="height:100%;aspect-ratio:1/1;"id="7"><div class="C2"><div class="B1"></div><div class="B1"></div><div class="B1"></div><div class="B1"></div><div class="B1"></div><div class="G31"></div><div class="B1"></div><div class="B1"></div><div class="B1"></div><div class="B1"></div><div class="B1"></div></div></div>
  181.         <div style="height:100%;aspect-ratio:1/1;"id="8"><div class="C1"><div class="B1"></div><div class="B1"></div><div class="B1"></div><div class="B1"></div><div class="B1"></div><div class="G41"></div><div class="BoT"><div class="B2"></div><div class="B2"></div><div class="B2"></div></div><div class="B1"></div><div class="G11"></div><div class="G11"></div><div class="G11"></div><div class="B1"></div></div></div>
  182.         <div style="height:100%;aspect-ratio:1/1;"id="9"><div class="C1"><div class="B1"></div><div class="G11"></div><div class="G11"></div><div class="G11"></div><div class="B1"></div><div class="G41"></div><div class="BoT"><div class="B2"></div><div class="B2"></div><div class="B2"></div></div><div class="B1"></div><div class="B1"></div><div class="B1"></div><div class="B1"></div><div class="B1"></div></div></div>
  183.         <div style="height:100%;aspect-ratio:1/1;"id="10"><div class="C1"><div class="B1"></div><div class="B1"></div><div class="B1"></div><div class="B1"></div><div class="B1"></div><div class="BoT"><div class="B2"></div><div class="B2"></div><div class="B2"></div></div><div class="G41"></div><div class="B1"></div><div class="G11"></div><div class="G11"></div><div class="G11"></div><div class="B1"></div></div></div>
  184.         <div style="height:100%;aspect-ratio:1/1;"id="11"><div class="C1"><div class="B1"></div><div class="G11"></div><div class="G11"></div><div class="G11"></div><div class="B1"></div><div class="BoT"><div class="B2"></div><div class="B2"></div><div class="B2"></div></div><div class="G41"></div><div class="B1"></div><div class="B1"></div><div class="B1"></div><div class="B1"></div><div class="B1"></div></div></div>
  185.     </div>
  186.     <script>
  187.         window.mobileAndTabletCheck = function() {
  188.             let check = false;
  189.             (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
  190.             return check;
  191.         };
  192.         if (!window.mobileAndTabletCheck()){
  193.             document.getElementById("mobile_controller").style.height ="0px";
  194.             document.getElementById("mobile_controller").style.visibility = "hidden";
  195.         }
  196.         document.getElementById("spriteContainer").style.visibility = "hidden";
  197.         let SP = [];
  198.         for (i=0;i<11;i++){
  199.            SP[i] = document.getElementById(i).innerHTML;
  200.        }
  201.        let directionChanged = true;
  202.        let pastDirection = [0,-1,1];
  203.        let direction = [0,-1,0];
  204.        let snake = [];
  205.        const verticalfov = 10;
  206.        const horisontalfov = 10;
  207.        let score = 0;
  208.        const interval = 100;
  209.        let foodPosition = [-1,-1];
  210.        let intervalStatus = "beggining";
  211.        backToSquareOne();
  212.        function backToSquareOne(){
  213.            var el = document.getElementById('display');
  214.            while ( el.firstChild ) el.removeChild( el.firstChild );
  215.            var div = document.createElement('div');
  216.            div.setAttribute('class', 'mainMenu');
  217.            div.setAttribute('id', 'mainMenu');
  218.            document.getElementById("display").appendChild(div);
  219.            var button = document.createElement('button');
  220.            button.setAttribute('type', 'button');
  221.            button.setAttribute('onclick', 'start()');
  222.            button.innerHTML = "start";
  223.            document.getElementById("mainMenu").appendChild(button);
  224.        }
  225.        function start(){
  226.            var el = document.getElementById('display');
  227.            while ( el.firstChild ) el.removeChild( el.firstChild );
  228.            for (y = 0 ; y < 1+2*verticalfov ; y++){
  229.                for (x = 0 ; x < 1+2*horisontalfov ; x++){
  230.                    var div = document.createElement('div');
  231.                    div.id = "partNo"+x+"/"+y;div.className = "part";
  232.                    document.getElementById("display").appendChild(div);
  233.                    document.getElementById("partNo"+x+"/"+y).style.height = 100/(1+2*verticalfov)+"%";
  234.                    document.getElementById("partNo"+x+"/"+y).style.width = 100/(1+2*horisontalfov)+"%";
  235.                }
  236.            }
  237.            direction = [0,-1,0];
  238.            score = 0;
  239.            document.getElementById("score").innerHTML=score;
  240.            foodPosition = [-1,-1];
  241.            snake = [];
  242.            snake.push([horisontalfov,verticalfov,0,0]);
  243.            for ( y = 1 ; y < 4 ; y++ ){
  244.                snake.push([horisontalfov,verticalfov+y,0,0]);
  245.            }
  246.            setSnakeValuesAndRender(true);
  247.            var loop = setInterval(function(){
  248.                directionChanged = true;
  249.                intervalStatus = "beggining";
  250.                pastDirection = [0,0,1];
  251.                pastDirection[0] = Number(direction[0]);
  252.                pastDirection[1] = Number(direction[1]);
  253.                pastDirection[2] = 1;
  254.                document.addEventListener("keydown", function(event){
  255.                    if (intervalStatus == "beggining"){
  256.                        if (event.keyCode == 38){//up
  257.                            buttonPressed(0);
  258.                        }
  259.                        if (event.keyCode == 40){//down
  260.                            buttonPressed(1);
  261.                        }
  262.                        if (event.keyCode == 37){//left
  263.                            buttonPressed(2);
  264.                        }
  265.                        if (event.keyCode == 39){//right
  266.                            buttonPressed(3);
  267.                        }
  268.                    }
  269.                });
  270.                if (directionChanged){
  271.                    if (pastDirection[0] == 0){
  272.                        snake[0][3] = 0;
  273.                    } else {
  274.                        snake[0][3] = 1;
  275.                    }
  276.                }
  277.                snake[0][0]=snake[1][0]+direction[0];snake[0][1]=snake[1][1]+direction[1];snake[0][2]=0;
  278.                if (IsNotBorder() && IsNotSnake()){
  279.                    setSnakeValuesAndRender(false);
  280.                } else {
  281.                    backToSquareOne();
  282.                    clearInterval(loop);
  283.                }
  284.            },interval);
  285.        }
  286.        function setSnakeValuesAndRender(SnakeGrowth){
  287.            if (snake[0][0] == foodPosition[0] && snake[0][1] == foodPosition[1]){
  288.                snake[0][2] = 1;
  289.                foodPosition = [-1,-1];
  290.                score++;
  291.                document.getElementById("score").innerHTML=score;
  292.            }
  293.            if ( snake[Number(snake.length)-1][2] == 1 ){
  294.                snake[Number(snake.length)-1][2] = 0;
  295.                snake.push([snake[Number(snake.length)-1][0],snake[Number(snake.length)-1][1],0]);
  296.                SnakeGrowth = true;
  297.            }
  298.            let snakeTemplate = [];
  299.            for (i = 0 ; i < snake.length ; i ++){
  300.                snakeTemplate.push(snake[i]);
  301.            }
  302.            snake [0] = [0,0,0,0];
  303.            for( let currentlyUpdatedSnakePart = 1 ; currentlyUpdatedSnakePart < snake.length ; currentlyUpdatedSnakePart++){
  304.                snake[currentlyUpdatedSnakePart] = snakeTemplate[currentlyUpdatedSnakePart - 1];
  305.                if (snake[currentlyUpdatedSnakePart][2] == 0){
  306.                    document.getElementById("partNo"+snake[currentlyUpdatedSnakePart][0]+"/"+snake[currentlyUpdatedSnakePart][1]).innerHTML = SP[snake[currentlyUpdatedSnakePart][3]];
  307.                } else {
  308.                    document.getElementById("partNo"+snake[currentlyUpdatedSnakePart][0]+"/"+snake[currentlyUpdatedSnakePart][1]).innerHTML = SP[snake[currentlyUpdatedSnakePart][3]+6];
  309.                }
  310.            }
  311.            if (!SnakeGrowth){
  312.                document.getElementById("partNo"+snakeTemplate[Number(snake.length)-1][0]+"/"+snakeTemplate[Number(snake.length)-1][1]).innerHTML = "";
  313.                document.getElementById("partNo"+snakeTemplate[Number(snake.length)-1][0]+"/"+snakeTemplate[Number(snake.length)-1][1]).style.backgroundColor = "black";
  314.            }
  315.            if (foodPosition[0] == -1){
  316.                randomizeFoodLocation();
  317.            }
  318.        }
  319.        function randomizeFoodLocation(){
  320.            let x = 0,y = 0;
  321.            for (i=0;i==0;){
  322.                x =Math.floor(Math.random() * (1+2*horisontalfov));
  323.                y =Math.floor(Math.random() * (1+2*verticalfov));
  324.                snake[0][0] = x;
  325.                snake[0][1] = y;
  326.                snake[0][2] = 0;
  327.                if (IsNotSnake()){
  328.                    break;
  329.                }
  330.            }
  331.            foodPosition[0] = x;
  332.            foodPosition[1] = y;
  333.            document.getElementById("partNo"+(foodPosition[0])+"/"+(foodPosition[1])).style.backgroundColor = "red";
  334.        }
  335.        function IsNotSnake(){
  336.            for (let i = 1; i < snake.length; i++){
  337.                if (snake[0][0] == snake[i][0] && snake[0][1] == snake[i][1]){
  338.                    return false;
  339.                }
  340.            }
  341.            return true;
  342.        }
  343.        function IsNotBorder(){
  344.            if (snake[0][0] == -1 || snake[0][1] == -1 || snake[0][0] == 1+2*horisontalfov || snake[0][1] == 1+2*verticalfov){
  345.                return false;
  346.            }
  347.            return true;
  348.        }
  349.        function buttonPressed(button){
  350.            if (intervalStatus == "beggining"){
  351.                pastDirectionX = direction[0];
  352.                pastDirectionY = direction[1];
  353.                DirectionX = direction[0];
  354.                DirectionY = direction[1];
  355.                if (button == 0 && direction[1] != 1){//up
  356.                    direction[0] = 0;
  357.                    direction[1] = -1;
  358.                }
  359.                if (button == 1 && direction[1] != -1){//down
  360.                    direction[0] = 0;
  361.                    direction[1] = 1;
  362.                }
  363.                if (button == 2 && direction[0] != 1){//left
  364.                    direction[0] = -1;
  365.                    direction[1] = 0;
  366.                }
  367.                if (button == 3 && direction[0] != -1){//right
  368.                    direction[0] = 1;
  369.                    direction[1] = 0;
  370.                }
  371.                DirectionX = direction[0];
  372.                DirectionY = direction[1];
  373.                intervalStatus = "waiting";
  374.                if (pastDirectionY == 0 && DirectionX == 0){
  375.                    if (pastDirectionX == -1){
  376.                        if (DirectionY == -1){
  377.                            snake[1][3] = 2;
  378.                        } else {
  379.                            snake[1][3] = 4;
  380.                        }
  381.                    } else {
  382.                        if (DirectionY == -1){
  383.                            snake[1][3] = 3;
  384.                        } else {
  385.                            snake[1][3] = 5;
  386.                        }
  387.                    }
  388.                    directionChanged = false;
  389.                } else if (pastDirectionX == 0 && DirectionY == 0){
  390.                    if (pastDirectionY == -1){
  391.                        if (DirectionX == -1){
  392.                            snake[1][3] = 5;
  393.                        } else {
  394.                            snake[1][3] = 4;
  395.                        }
  396.                    } else {
  397.                        if (DirectionX == -1){
  398.                            snake[1][3] = 3;
  399.                        } else {
  400.                            snake[1][3] = 2;
  401.                        }
  402.                    }
  403.                    directionChanged = false;
  404.                }
  405.            }
  406.        }
  407.    </script>
  408. </body>
  409. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!