HTML/CSS 및 Three.js를 사용하여 불을 뿜는 드래곤 게임을 만드는 방법을 알려주는 한 가지 요령(코드 공유)-JS 튜토리얼-php.cn

HTML/CSS 및 Three.js를 사용하여 불을 뿜는 드래곤 게임을 만드는 방법을 알려주는 한 가지 요령(코드 공유)

奋力向前

풀어 주다： 2021-09-15 10:32:20

앞으로

2469명이 탐색했습니다.

이전 기사 "HTML, CSS 및 JS를 사용하여 반응형 및 필터링 가능한 게임 만들기(코드 포함) "에서 JS를 사용하여 반응형 및 필터링 가능한 게임을 만드는 방법을 소개했습니다. 다음 글에서는 Three.js의 불뿜는 드래곤 게임을 활용하는 방법을 소개하겠습니다.

HTML/CSS 및 Three.js를 사용하여 불을 뿜는 드래곤 게임을 만드는 방법을 알려주는 한 가지 요령(코드 공유)

Charizard Game

Live Demo

이 Charizard 게임이 어떻게 작동하는지 알고 싶다면 아래 데모를 시도해 볼 수 있습니다. 여기서는 코드를 복사하여 본인의 공부(출국), 업무(낚시)에 활용할 수 있도록 필요한 소스코드를 제공합니다.

데모 주소: http://haiyong.site/penhuolong (브라우저로 열기)

HTML/CSS 및 Three.js를 사용하여 불을 뿜는 드래곤 게임을 만드는 방법을 알려주는 한 가지 요령(코드 공유)

위 그림에서 볼 수 있듯이 여기서는 HTML, CSS 및 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

전체 스타일 설정 div，world

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

로그인 후 복사

표시 텍스트 설정:

길게 클릭할수록 재채기가 더 힘들어집니다
뒤로 돌리려면 누르고 드래그하세요. -

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

로그인 후 복사

작은 화면에 적응할 수 있도록 글꼴도 너무 작지 않게 하고, 작은 화면에서는 요소들이 따로 배치되도록 미디어 쿼리를 여기에 설정해두었습니다.

@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

Three.js에는 장면, 카메라, 렌더러의 세 가지 요소가 있습니다. 위 세 가지 요소의 조합만이 눈에 보이는 콘텐츠를 렌더링할 수 있습니다. 물론, 이 전에 Three.js 파일을 다운로드 받아야 하는데, 바이두에서 Three.js를 검색해서 공식 홈페이지에 가서 다운로드하면 됩니다. 다운로드가 완료된 후 새로운 html 파일을 만들어 Three.js를 소개하면 됩니다. 여기서는 다른 사람들의 말을 직접 인용합니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>

로그인 후 복사

3개의 JS, 화면 및 마우스 이벤트 초기화

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

로그인 후 복사

JS 코드가 너무 길어서 여기서는 하나씩 보여주지 않겠습니다. 전체 코드는 GitHub에 올리거나, F12를 직접 사용해도 됩니다.

추천 학습: HTML/CSS 비디오 튜토리얼, JS 비디오 튜토리얼

위 내용은 HTML/CSS 및 Three.js를 사용하여 불을 뿜는 드래곤 게임을 만드는 방법을 알려주는 한 가지 요령(코드 공유)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!