Codice sorgente HTML5 del gioco Fruit Ninja

17 mrshaikhcoder

Apri nell'Editor Pubblica il Tuo Codice

Codice sorgente HTML5 del gioco Fruit Ninja

Consigliato

23 August 2025

Esempio di animazione della griglia CSS

6 June 2025

Un codice del testo

10 December 2025

Codice sorgente JavaScript del gioco HTML Canvas Snake

HTML

<!DOCTYPE html>

<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>

Consigliato

Esempio di animazione della griglia CSS

Un codice del testo

Codice sorgente JavaScript del gioco HTML Canvas Snake

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS