Bagaimana untuk melaksanakan antara muka permainan seperti Dragon Nest dalam Vue?

Dragon Nest ialah permainan main peranan yang sangat popular. Antara muka permainannya direka dengan cantik dan telah meninggalkan kesan mendalam kepada pemain. Ramai pembangun berharap untuk belajar daripada gaya reka bentuk ini dalam projek mereka sendiri, jadi bagaimana untuk melaksanakan antara muka permainan seperti Dragon Nest dalam Vue?

1. Buat projek menggunakan Vue CLI

Pertama, kita perlu mencipta projek baharu menggunakan Vue CLI. Kita boleh memilih untuk mengkonfigurasi secara manual atau menggunakan konfigurasi lalai untuk mencipta projek Konfigurasi lalai digunakan di sini untuk kemudahan. Masukkan kod berikut dalam baris arahan untuk mencipta projek:

vue create dragon_project

Selepas projek berjaya dibuat, kita boleh memasuki direktori akar projek dan memulakan pelayan tempatan:

cd dragon_project
npm run serve

Seterusnya kita mula membuat antara muka permainan.

2. Buat halaman log masuk

Pertama, kita perlu membuat halaman log masuk yang mudah. Kami boleh mencipta fail Login.vue baharu dalam direktori src dan menambah kod berikut pada fail:

<template>
  <div>
    <h1>龙之谷</h1>
    <input type="text" placeholder="请输入账号">
    <input type="password" placeholder="请输入密码">
    <button>登录</button>
  </div>
</template>

<style>
  h1 {
    text-align: center;
    font-size: 48px;
    color: #00CED1;
  }
  input {
    display: block;
    margin: 20px auto;
    font-size: 24px;
    padding: 10px;
    border-radius: 10px;
    border: 2px solid #ddd;
    width: 300px;
  }
  button {
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
    background-color: #00CED1;
    color: #fff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 24px;
  }
</style>

Kami menggunakan beberapa gaya CSS untuk mencapai kesan yang serupa dengan Dragon Nest, menggunakan input, butang dan elemen lain untuk mencipta borang Log Masuk. Antaranya, elemen h1 menggunakan warna tema biru dalam permainan Dragon Nest.

3. Buat antara muka permainan

Seterusnya, kami mula membuat antara muka permainan. Kami boleh mencipta fail Game.vue baharu dalam direktori src dan menambah kod berikut pada fail:

<template>
  <div class="game">
    <div class="header">
      <div class="logo">
        <img src="./assets/logo.png" alt="">
      </div>
      <div class="nav">
        <ul>
          <li>首页</li>
          <li>社区</li>
          <li>商城</li>
          <li>排行榜</li>
        </ul>
      </div>
      <div class="user">
        <img src="./assets/avatar.png" alt="">
        <div class="info">
          <span>欢迎，{{ username }}</span>
          <span>等级：{{ level }}</span>
          <span>经验值：{{ exp }}</span>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="left-panel"></div>
      <div class="middle-panel"></div>
      <div class="right-panel"></div>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        username: '小明',
        level: 20,
        exp: 3500
      }
    }
  }
</script>

<style>
  .game {
    width: 1200px;
    margin: 0 auto;
    font-size: 20px;
  }
  .header {
    height: 70px;
    display: flex;
    align-items: center;
    background-color: #000;
    color: #fff;
  }
  .logo {
    flex: 1;
    text-align: center;
    height: 100%;
  }
  .logo img {
    height: 100%;
  }
  .nav {
    flex: 2;
    display: flex;
    justify-content: space-around;
    height: 100%;
  }
  .nav ul {
    list-style: none;
    display: flex;
    align-items: center;
    height: 100%;
  }
  .nav ul li {
    cursor: pointer;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 20px;
  }
  .user {
    flex: 1;
    display: flex;
    align-items: center;
    height: 100%;
  }
  .user img {
    height: 50%;
    border-radius: 50%;
    margin-right: 20px;
  }
  .info {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    color: #ccc;
  }
  .info span {
    margin: 5px 0;
  }
  .content {
    display: flex;
    margin-top: 50px;
  }
  .left-panel {
    flex: 2;
    height: 800px;
    background-color: #ddd;
  }
  .middle-panel {
    flex: 5;
    height: 800px;
    background-color: #fff;
  }
  .right-panel {
    flex: 2;
    height: 800px;
    background-color: #ddd;
  }
</style>

Kami telah mentakrifkan semula beberapa gaya CSS untuk menjadikan reka letak dan gaya antara muka permainan lebih dekat dengan permainan Dragon Nest. Kami menggunakan reka letak flex dan elemen img untuk membahagikan pengepala kepada tiga bahagian: Logo, Nav dan Pengguna. Dalam bahagian Pengguna, kami menggunakan tiga pembolehubah: nama pengguna, tahap dan exp untuk memberikan maklumat pengguna Pembolehubah ini boleh diperoleh daripada pelayan. Dalam bahagian Kandungan, kami membahagikan keseluruhan tetingkap kepada tiga kawasan, kiri, tengah dan kanan, di mana kami boleh menambah kandungan permainan.

4. Tambahkan komponen setempat

Antara muka permainan harus mengandungi beberapa komponen setempat, seperti maklumat pemain, inventori, peta, kotak sembang, dsb. Kita boleh mencipta direktori komponen baharu dan menambah komponen ini dalam direktori ini. Mengambil komponen maklumat pemain sebagai contoh, buat fail PlayerInfo.vue baharu dalam direktori komponen dan tambahkan kod berikut pada fail:

<template>
  <div class="player-info">
    <img src="./assets/avatar.png" alt="">
    <div class="info">
      <div class="name">小明</div>
      <div class="level">等级：20</div>
      <div class="exp">经验值：3500</div>
      <div class="gold">金币：1000</div>
    </div>
  </div>
</template>

<style>
  .player-info {
    display: flex;
    align-items: center;
    height: 70px;
    background-color: #eee;
    padding: 0 20px;
  }
  .player-info img {
    height: 100%;
    border-radius: 50%;
    margin-right: 20px;
  }
  .info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #333;
  }
  .info .name {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 5px;
  }
  .info div + div {
    margin-top: 5px;
  }
</style>

Dalam fail Game.vue, kita boleh menambah komponen ini pada panel kiri:

<div class="left-panel">
  <PlayerInfo></PlayerInfo>
</div>

Dengan cara ini, kami telah melengkapkan reka bentuk antara muka permainan untuk meniru Dragon Nest dalam Vue. Sudah tentu, ini hanyalah contoh mudah, dan sebenarnya terdapat banyak struktur dan kesan kompleks yang perlu dilaksanakan. Walau bagaimanapun, melalui kes di atas, kami percaya bahawa pembaca sudah boleh menguasai kaedah dan teknik asas untuk melaksanakan antara muka yang serupa.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan antara muka permainan seperti Dragon Nest dalam Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!