Bringen Sie Ihnen bei, wie Sie mit HTML/CSS und Three.js ein feuerspeiendes Drachenspiel erstellen (Code-Sharing)-js-Tutorial-php.cn

Bringen Sie Ihnen bei, wie Sie mit HTML/CSS und Three.js ein feuerspeiendes Drachenspiel erstellen (Code-Sharing)

奋力向前

Freigeben： 2021-09-15 10:32:20

nach vorne

2469 Leute haben es durchsucht

Im vorherigen Artikel „Lernen Sie, HTML, CSS und JS zu verwenden, um ein reaktionsfähiges und filterbares Spiel (mit Code) zu erstellen “ habe ich Ihnen vorgestellt, wie Sie JS verwenden, um ein reaktionsfähiges und filterbares Spiel zu erstellen. Im folgenden Artikel erfahren Sie, wie Sie das feuerspeiende Drachenspiel von Three.js verwenden.

Bringen Sie Ihnen bei, wie Sie mit HTML/CSS und Three.js ein feuerspeiendes Drachenspiel erstellen (Code-Sharing)

Charizard-Spiel

Live-Demo

Wenn Sie wissen möchten, wie dieses Charizard-Spiel funktioniert, können Sie die Demo unten ausprobieren. Hier stelle ich den erforderlichen Quellcode zur Verfügung, damit Sie den Code kopieren und in Ihrem eigenen Studium (Abreise) oder Ihrer Arbeit (Angeln) verwenden können.

Demo-Adresse: http://haiyong.site/penhuolong (mit Browser öffnen)

Bringen Sie Ihnen bei, wie Sie mit HTML/CSS und Three.js ein feuerspeiendes Drachenspiel erstellen (Code-Sharing)

Wie Sie im Bild oben sehen können, habe ich hier eines mit HTML, CSS und JavaScript erstellt. Simple Charizard Mini- Spiel.

HTML-Code

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

Nach dem Login kopieren

CSS-Code

Legen Sie den Stil des Gesamtbildes fest div，world

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

Nach dem Login kopieren

Legen Sie den Anzeigetext fest:

Je länger Sie klicken, desto stärker wird das Niesen
Drücken und ziehen, um sich umzudrehen -

#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;
}

Nach dem Login kopieren

Damit es sich an den kleinen Bildschirm anpasst, die Schriftart nicht so klein ist und die Elemente separat auf dem kleinen Bildschirm angeordnet werden, habe ich hier Medienabfragen eingerichtet.

@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;
  }
}

Nach dem Login kopieren

JS-Code

Erstellen Sie zunächst eine grundlegende Szene. Es gibt drei Elemente in Three.js: Szene, Kamera und Renderer. Nur die Kombination der oben genannten drei kann sichtbaren Inhalt rendern. Natürlich müssen Sie zuvor die Three.js-Datei herunterladen. Suchen Sie einfach nach Three.js auf Baidu und rufen Sie die offizielle Website auf, um sie herunterzuladen. Erstellen Sie nach Abschluss des Downloads eine neue HTML-Datei und führen Sie Three.js ein. Hier zitiere ich direkt von anderen.

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

Nach dem Login kopieren

DREI JS-, Bildschirm- und Mausereignisse initialisieren

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;
    //*/
}

Nach dem Login kopieren

Der JS-Code ist zu lang, daher werde ich ihn hier nicht einzeln zeigen. Ich werde den vollständigen Code auf GitHub veröffentlichen, oder Sie können F12 direkt auf meinem verwenden Website und dann Lebenslauf.

Empfohlenes Lernen: HTML/CSS-Video-Tutorial, JS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonBringen Sie Ihnen bei, wie Sie mit HTML/CSS und Three.js ein feuerspeiendes Drachenspiel erstellen (Code-Sharing). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!