Heim > Artikel > Web-Frontend > Bringen Sie Ihnen bei, wie Sie mit HTML/CSS und Three.js ein feuerspeiendes Drachenspiel erstellen (Code-Sharing)
Bringen Sie Ihnen bei, wie Sie mit HTML/CSS und Three.js ein feuerspeiendes Drachenspiel erstellen (Code-Sharing)
- 奋力向前nach vorne
- 2021-09-15 10:31:562338Durchsuche
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.
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)
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>CSS-Code
Legen Sie den Stil des Gesamtbildes fest div，world
#world {
background: #652e37;
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}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;
}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;
}
}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>
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;
//*/
}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!