Home > Article > Web Front-end > Teach you how to use HTML/CSS and Three.js to create a fire-breathing dragon game (code sharing)
Teach you how to use HTML/CSS and Three.js to create a fire-breathing dragon game (code sharing)
- 奋力向前forward
- 2021-09-15 10:31:562394browse
In the previous article "Teach you to use HTML, CSS and JS to create a responsive and filterable game (with code)", I introduced you how to use JS to create a responsive and filterable game. game. The following article will introduce to you how to use Three.js's fire-breathing dragon game. Let's take a look.
Charizard Mini Game
Live Demonstration
If you want to know how this Charizard Mini Game works, Then you can try the demo below. Here, I provide the required source code so that you can copy the code and use it in your own study (departure), work (fishing).
Demo address: http://haiyong.site/penhuolong (open with browser)
Just like you As you can see in the image above, here I've made a simple Charizard mini-game using HTML, CSS, and JavaScript.
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
Set the style of the overall div, world
#world {
background: #652e37;
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}Set display text:
The longer you click, the harder it sneeze
Hold 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 make it adapt 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 a media query here.
@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
First establish a basic scene. There are three elements in Three.js: scene, camera and renderer. Only the combination of the above three can render visible content. Of course, you need to download the Three.js file before this. Just search Three.js on Baidu and go to the official website to download it. After the download is complete, create a new html file and introduce Three.js. Here I quote directly from others.
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
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;
//*/
}The JS code is too long, so I won’t show it one by one here. I will put the complete code on GitHub, or you can directly download it on my website Haiyong can go to F12 and then CV
Recommended learning: HTML/CSS video tutorial, JS video tutorial
The above is the detailed content of Teach you how to use HTML/CSS and Three.js to create a fire-breathing dragon game (code sharing). For more information, please follow other related articles on the PHP Chinese website!