Maison > Article > interface Web > Une astuce pour vous apprendre à utiliser HTML/CSS et Three.js pour créer un jeu de dragon cracheur de feu (partage de code)
Une astuce pour vous apprendre à utiliser HTML/CSS et Three.js pour créer un jeu de dragon cracheur de feu (partage de code)
- 奋力向前avant
- 2021-09-15 10:31:562406parcourir
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.
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)
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>Code CSS
Définissez le style de l'ensemble div，world
#world {
background: #652e37;
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}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;
}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;
}
}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>
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;
//*/
}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!