How to use HTML/CSS and Three.js to realize Fire Dragon Mini Game
This article mainly introduces how to use HTML/CSS and Three.js to achieve fire dragon Mini Game, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.
Fire Dragon Mini Game
If you want to understand how this fire-breathing dragon Mini Game works, you can try the following demonstration. Here, I provide the required source code so that you can copy the code and use it in your own study (desertion) and work (fishing).
Demo address: http://haiyong.site/penhuolong (open with browser)
As you can see in the image above, here I made a simple fire-breathing dragon Mini Game using HTML, CSS and JavaScript.
HTML code
The longer you click, the more it sneezes-press and drag to turn around-
Prints on haiyong | Game | haiyong.site
00
CSS code
Set the style of the overall div,world
# world {background: # 652e37; position: absolute; width: 100%; height: 100%; overflow: hidden;}
Set the display text:
The longer you click, the more it sneezes.
Press and drag to turn around-
# 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;}
In order to adapt it to the small screen, the font will not be so small, and the elements will be laid out separately in the small screen, I set up the media query here.
@ media screen and (max-width:600px) {# instructions {top: 50%;} .lightInstructions {font-size: 1.5eme;} @ media screen and (max-width:470px) {# instructions {top: 60%;} .lightInstructions {font-size: 1.3em;}}
JS code
First of all, establish the basic scene, there are three elements in Three.js: scene, camera and renderer, only the combination of the above three can render the visible content. Of course, before this you need to download the Three.js file, Baidu search Three.js directly to the official website to download, after the download is completed, create a new html file and introduce Three.js. Here I directly quote someone else's.
Initialize THREE JS, screen and mouse events
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 / / * /} Thank you for reading this article carefully. I hope the article "how to use HTML/CSS and Three.js to achieve Fire Dragon Mini Game" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!
