Это 31-й день моего участия в августовском испытании обновлений. Узнайте подробности события:Испытание августовского обновления
Моя домашняя страница Наггетс:Хай Йонг
Самая большая мотивация для изучения языка — это интерес, за которым следует стигматизация.
❤️ Мини-игры с огнедышащим драконом на основе HTML, CSS и JS ❤️
Раньше я делал больше типов апплетов HTML. Вы можете проверить эти проекты, если хотите.
Создание аналоговых часов с помощью HTML, CSS и JavaScript (учебник для начинающих)
JavaScript создает цифровые часы в стиле неоморфизма
Генератор случайных паролей, созданный с помощью HTML, CSS и JavaScript
Создайте отличное веб-приложение о погоде, используя HTML, CSS, JS и API.
Мини-игра с огнедышащим драконом [живая демоверсия]
Если вы хотите узнать, как работает эта игра спрей дракона, вы можете попробовать следующую демонстрацию. Здесь я предоставляю исходный код необходим, чтобы вы могли скопировать код и использовать его в своем собственном обучении (в небольшом разнице), работают (коснитесь рыбы).
Демонстрационный адрес:haiyong.site/penhuolong(открыть в браузере)
Как вы можете видеть на изображении выше, здесь я сделал простую игру с огнедышащим драконом, используя HTML, CSS и JavaScript.
HTML-код
<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-код
Установите стиль общего 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-код
Во-первых, создайте базовую сцену. В Three.js есть три элемента: сцена, камера и средство визуализации. Только их комбинация может отображать видимый контент. Конечно, перед этим вам нужно сначала загрузить файл Three.js, выполнить поиск Three.js напрямую на Baidu и загрузить его с официального сайта.После завершения загрузки создайте новый html-файл и импортируйте Three.js. Здесь я прямо цитирую чужое
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
Инициализировать ТРИ 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, а затем CV
🛬 Уху! Взлетайте!
Надеюсь, вы узнали из этого урока, как я создал эту маленькую игру про огнедышащего дракона, используя HTML, CSS и Three.js. Если хотите, вы можете ответить на код в моем официальном аккаунте, чтобы получить полный исходный код.
Раньше я делал гаджеты других типов с использованием HTML, CSS и JavaScript. Если хотите, ознакомьтесь с дизайном.
Front-end качественная колонка проекта на основе HTML, CSS, JS
Генератор случайных паролей, созданный с помощью HTML, CSS и JavaScript
🏆 с использованием HTML, CSS и JavaScript аналоговых часов крутая черная тема
Создайте отличное веб-приложение о погоде, используя HTML, CSS, JS и API.
Я давно веду блог о технологиях, в основном через Nuggets, мой небольшой учебник по веб-играм. Я люблю делиться технологиями и радостью через статьи. Вы можете посетить мой блог:Талант /user/204034…Чтобы получить больше информации. Надеюсь, вам это понравится! 😊
💌 Все желающие могут оставлять комментарии и предложения в комментариях! 💌
Если вы действительно узнали что-то новое из этой статьи, ставьте лайк, добавляйте в закладки и делитесь с друзьями. 🤗Наконец, не забудьте поставить ❤ или 📑 в поддержку.