Une astuce pour vous apprendre à utiliser HTML/CSS et Three.js pour créer un jeu de dragon cracheur de feu (partage de code)-js tutoriel-php.cn

Une astuce pour vous apprendre à utiliser HTML/CSS et Three.js pour créer un jeu de dragon cracheur de feu (partage de code)

奋力向前

Libérer： 2021-09-15 10:32:20

avant

2457 Les gens l'ont consulté

Dans l'article précédent "Vous apprendre à utiliser HTML, CSS et JS pour créer un jeu réactif et filtrable (avec code) ", je vous ai présenté comment utiliser JS pour créer un jeu réactif et filtrable. L'article suivant vous présentera comment utiliser le jeu de dragon cracheur de feu de Three.js.

Une astuce pour vous apprendre à utiliser HTML/CSS et Three.js pour créer un jeu de dragon cracheur de feu (partage de code)

Charizard Game

Live Demo

Si vous voulez savoir comment fonctionne ce jeu Charizard, vous pouvez essayer la démo ci-dessous. Ici, je fournis le code source requis afin que vous puissiez copier le code et l'utiliser dans votre propre étude (départ), travail (pêche).

Adresse de démonstration : http://haiyong.site/penhuolong (ouvrir avec un navigateur)

Une astuce pour vous apprendre à utiliser HTML/CSS et Three.js pour créer un jeu de dragon cracheur de feu (partage de code)

Comme vous pouvez le voir sur l'image ci-dessus, ici j'en ai créé une en utilisant HTML, CSS et JavaScript Simple Charizard mini- jeu.

Code HTML

<body>
    <div id="world"></div>
    <div id="instructions">
        <span class="lightInstructions">你点击的时间越长，它打喷嚏的力度越大</span><br />
        <span class="lightInstructions">- 按住并拖动可转身 -</span></div>
    <div id="credits">
        <p>Prints on <a class="society6" href="https://juejin.cn/user/2040341402229751" target="blank">haiyong</a>
            | <a href="http://haiyong.site/game" target="blank">Game</a>
            | <a href="http://haiyong.site" target="blank">haiyong.site</a>
        </p>
    </div>
    <div id="power">00</div>
</body>

Copier après la connexion

Code CSS

Définissez le style de l'ensemble div，world

#world {
  background: #652e37;
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

Copier après la connexion

Définissez le texte affiché :

Plus vous cliquez longtemps, plus il éternue fort
Appuyez et faites glisser pour faire demi-tour -

#instructions {
  position: absolute;
  width: 100%;
  top: 50%;
  margin: auto;
  margin-top: 120px;
  font-family: "Open Sans", sans-serif;
  color: #fdde8c;
  font-size: 0.8em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.5;
  user-select: none;
}
.lightInstructions {
  color: #f89a78;
  font-size: 1.6em;
}

Copier après la connexion

Pour l'adapter au petit écran, la police ne sera pas si petite, et les éléments seront disposés séparément dans le petit écran, j'ai mis en place des media queries ici.

@media screen and (max-width:600px) {
  #instructions {
    top: 50%;
  }
  .lightInstructions {
    font-size: 1.5em;
  }
}

@media screen and (max-width:470px) {
  #instructions {
    top: 60%;
  }
  .lightInstructions {
    font-size: 1.3em;
  }
}

Copier après la connexion

Code JS

Créez d'abord une scène de base. Il y a trois éléments dans Three.js : la scène, la caméra et le moteur de rendu. Seule la combinaison des trois ci-dessus peut rendre le contenu visible. Bien sûr, vous devez télécharger le fichier Three.js avant cela. Recherchez simplement Three.js sur Baidu et accédez au site officiel pour le télécharger. Une fois le téléchargement terminé, créez un nouveau fichier html et introduisez Three.js. Ici, je cite directement les autres.

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>

Copier après la connexion

Initialisez TROIS événements JS, écran et souris

function init() {
    powerField = document.getElementById("power");

    scene = new THREE.Scene();
    scene.fog = new THREE.Fog(0x652e37, 350, 500);

    HEIGHT = window.innerHeight;
    WIDTH = window.innerWidth;
    aspectRatio = WIDTH / HEIGHT;
    fieldOfView = 60;
    nearPlane = 1;
    farPlane = 2000;
    camera = new THREE.PerspectiveCamera(
    fieldOfView,
    aspectRatio,
    nearPlane,
    farPlane
    );
    camera.position.x = -300;
    camera.position.z = 300;
    camera.position.y = 100;
    camera.lookAt(new THREE.Vector3(0, 0, 0));
    renderer = new THREE.WebGLRenderer({
    alpha: true,
    antialias: true
    });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(WIDTH, HEIGHT);
    renderer.shadowMapEnabled = true;
    container = document.getElementById("world");
    container.appendChild(renderer.domElement);
    windowHalfX = WIDTH / 2;
    windowHalfY = HEIGHT / 2;
    window.addEventListener("resize", onWindowResize, false);
    document.addEventListener("mouseup", handleMouseUp, false);
    document.addEventListener("touchend", handleTouchEnd, false);
    //*
    controls = new THREE.OrbitControls(camera, renderer.domElement);
    controls.minPolarAngle = -Math.PI / 2;
    controls.maxPolarAngle = Math.PI / 2;
    controls.noZoom = true;
    controls.noPan = true;
    //*/
}

Copier après la connexion

Le code JS est trop long, donc je ne le montrerai pas un par un ici, je mettrai le code complet sur GitHub, ou vous pouvez directement utiliser F12 sur mon. site web puis CV

Apprentissage recommandé : Tutoriel vidéo HTML/CSS, Tutoriel vidéo JS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!