Shulou(Shulou.com)06/03 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.