Teach you how to use HTML/CSS and Three.js to create a fire-breathing dragon game (code sharing)-JS Tutorial-php.cn

Teach you how to use HTML/CSS and Three.js to create a fire-breathing dragon game (code sharing)

奋力向前

Release： 2021-09-15 10:32:20

forward

2469 people have browsed it

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.

Teach you how to use HTML/CSS and Three.js to create a fire-breathing dragon game (code sharing)

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)

Teach you how to use HTML/CSS and Three.js to create a fire-breathing dragon game (code sharing)

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>

Copy after login

CSS code

Set the style of the overall div, world

#world {
  background: #652e37;
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

Copy after login

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;
}

Copy after login

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;
  }
}

Copy after login

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>

Copy after login

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;
    //*/
}

Copy after login

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!