Jadual Kandungan
Permainan Mini Charizard
Rumah hujung hadapan web tutorial js Ajar anda cara menggunakan HTML/CSS dan Three.js untuk mencipta permainan naga bernafas api (perkongsian kod)

Ajar anda cara menggunakan HTML/CSS dan Three.js untuk mencipta permainan naga bernafas api (perkongsian kod)

Sep 15, 2021 am 10:31 AM
css html js

Dalam artikel sebelumnya "Ajar anda menggunakan HTML, CSS dan JS untuk mencipta permainan responsif dan boleh ditapis (dengan kod) ", saya memperkenalkan anda cara menggunakan JS untuk mencipta responsif dan permainan boleh ditapis. Artikel berikut akan memperkenalkan kepada anda cara menggunakan permainan naga bernafas api Three.js Mari kita lihat.

Ajar anda cara menggunakan HTML/CSS dan Three.js untuk mencipta permainan naga bernafas api (perkongsian kod)

Permainan Mini Charizard

Demonstrasi Langsung

Jika anda ingin tahu bagaimana Permainan Mini Charizard ini berfungsi, Kemudian anda boleh cuba demo di bawah. Di sini, saya menyediakan kod sumber yang diperlukan supaya anda boleh menyalin kod dan menggunakannya dalam kajian anda sendiri (berlepas), bekerja (memancing).

Alamat demo: http://haiyong.site/penhuolong (buka dengan penyemak imbas)

Ajar anda cara menggunakan HTML/CSS dan Three.js untuk mencipta permainan naga bernafas api (perkongsian kod)

Sama seperti anda Seperti yang anda lihat dalam imej di atas, di sini saya telah membuat permainan mini Charizard yang mudah menggunakan HTML, CSS dan JavaScript.

Kod 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>
Salin selepas log masuk

Kod CSS

Tetapkan keseluruhan div, world gaya

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

Tetapkan teks paparan:

Semakin lama anda mengklik, semakin kuat ia bersin

Tahan dan seret untuk membelok -

#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;
}
Salin selepas log masuk

Untuk buat ia menyesuaikan diri dengan skrin kecil, fon tidak akan begitu kecil, dan unsur-unsur akan dibentangkan secara berasingan dalam skrin kecil, saya menetapkan pertanyaan media di sini.

@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;
  }
}
Salin selepas log masuk

Kod JS

Mula-mula buat adegan asas Terdapat tiga elemen dalam Three.js: adegan, kamera dan pemapar hanya gabungan tiga di atas kandungan yang boleh dilihat. Sudah tentu, anda perlu memuat turun fail Three.js sebelum ini. Cuma cari Three.js di Baidu dan pergi ke tapak web rasmi untuk memuat turunnya. Selepas muat turun selesai, buat fail html baharu dan perkenalkan Three.js. Di sini saya petik terus dari orang lain.

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

Mulakan TIGA JS, acara skrin dan tetikus

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;
    //*/
}
Salin selepas log masuk

Kod JS terlalu panjang, jadi saya tidak akan tunjukkan satu persatu di sini kod pada GitHub, atau anda boleh terus melancarkan F12 di tapak web saya dan kemudian CV

Pembelajaran yang disyorkan: Tutorial video HTML/CSS, Tutorial video JS

Atas ialah kandungan terperinci Ajar anda cara menggunakan HTML/CSS dan Three.js untuk mencipta permainan naga bernafas api (perkongsian kod). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Jadual Bersarang dalam HTML Jadual Bersarang dalam HTML Sep 04, 2024 pm 04:49 PM

Jadual Bersarang dalam HTML

Sempadan Jadual dalam HTML Sempadan Jadual dalam HTML Sep 04, 2024 pm 04:49 PM

Sempadan Jadual dalam HTML

HTML jidar-kiri HTML jidar-kiri Sep 04, 2024 pm 04:48 PM

HTML jidar-kiri

Susun Atur Jadual HTML Susun Atur Jadual HTML Sep 04, 2024 pm 04:54 PM

Susun Atur Jadual HTML

Memindahkan Teks dalam HTML Memindahkan Teks dalam HTML Sep 04, 2024 pm 04:45 PM

Memindahkan Teks dalam HTML

Senarai Tertib HTML Senarai Tertib HTML Sep 04, 2024 pm 04:43 PM

Senarai Tertib HTML

Butang onclick HTML Butang onclick HTML Sep 04, 2024 pm 04:49 PM

Butang onclick HTML

Bagaimana anda menghuraikan dan memproses HTML/XML dalam PHP? Bagaimana anda menghuraikan dan memproses HTML/XML dalam PHP? Feb 07, 2025 am 11:57 AM

Bagaimana anda menghuraikan dan memproses HTML/XML dalam PHP?

See all articles