Fruit Ninja

HTML

<!doctype html>
<html lang="en">
  <head>
    <base
      href="https://cdn.jsdelivr.net/gh/bubblfan/UGS-Assets@main/fruit%20ninja/"
    />
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

<title>Fruit Ninja</title>
    <style>
      @font-face {
        font-family: gangofchinese;
        src: url("assets/font/gangofchinese.ttf");
      }

html,
      body {
        height: 100%;
        width: 100% !important;
        margin: 0;
        background-color: #000000 !important;
      }

.fontLoader {
        position: absolute;
        left: -1000px;
        visibility: hidden;
      }

#phaser-canvas {
        margin: 0 auto;
        background-color: #000000;
      }

body,
      #content {
        height: 100vh !important;
        max-height: 100vh !important;
      }

#divAds,
      #tempads {
        display: none;
      }

/* canvas{
          width: 100%;
          height: 100%;
          display: grid !important;
          grid-area: 1/1;
          margin-top: 0 !important;
          margin-bottom: 0 !important;
          padding: 0 !important;
          max-width: 100% !important;
          max-height: 100vh !important;
      } */

#enable3d-three-canvas,
      #enable3d-phaser-canvas {
        min-width: 100%;
        max-width: 100%;
        max-width: -webkit-fill-available;
        max-width: -moz-available;
        max-width: -webkit-fill-available;
        max-width: fill-available;
        margin: 0 auto;
      }

/* @media screen and (max-width: 768px) {
        #enable3d-three-canvas, #enable3d-phaser-canvas {
          min-width: auto !important;
          max-width: auto;
          width: 960px;
          height: auto;
          margin: 0 auto;
        }
      } */

@media (min-aspect-ratio: 1.85) {
        #enable3d-three-canvas,
        #enable3d-phaser-canvas {
          width: 960px;
          min-width: 640px;
        }
      }

@media (min-aspect-ratio: 8/4) {
        #enable3d-three-canvas,
        #enable3d-phaser-canvas {
          min-width: 640px;
          /* background-color: aquamarine; */
        }
      }
    </style>

</head>

<body>
    <div class="fontLoader" style="font-family: gangofchinese">-</div>
    <div class="fontLoader" style="font-family: gangofchinese">-</div>
    <div id="content">
      <div id="phaser-canvas"></div>
    </div>
    
    <style id="injectStyles">
      html,
      body {
        background: none !important;
      }
    </style>
    <script type="text/javascript" src="vendors.bundle.js"></script>
    <script type="text/javascript" src="main.bundle.js"></script>
  </body>
</html>

CSS

JS

Comments 0