HTML/CSS 및 Three.js를 사용하여 불을 뿜는 드래곤 게임을 만드는 방법을 알려주는 한 가지 요령(코드 공유)
- 奋力向前앞으로
- 2021-09-15 10:31:562418검색
이전 기사 "HTML, CSS 및 JS를 사용하여 반응형 및 필터링 가능한 게임 만들기(코드 포함) "에서 JS를 사용하여 반응형 및 필터링 가능한 게임을 만드는 방법을 소개했습니다. 다음 글에서는 Three.js의 불뿜는 드래곤 게임을 활용하는 방법을 소개하겠습니다.
Charizard Game
Live Demo
이 Charizard 게임이 어떻게 작동하는지 알고 싶다면 아래 데모를 시도해 볼 수 있습니다. 여기서는 코드를 복사하여 본인의 공부(출국), 업무(낚시)에 활용할 수 있도록 필요한 소스코드를 제공합니다.
데모 주소: http://haiyong.site/penhuolong (브라우저로 열기)
위 그림에서 볼 수 있듯이 여기서는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!