Vue で Dragon Nest のようなゲームインターフェイスを実装するにはどうすればよいですか?-Vue.js-php.cn

Vue で Dragon Nest のようなゲームインターフェイスを実装するにはどうすればよいですか?

PHPz

リリース： 2023-06-25 12:10:50

オリジナル

1033 人が閲覧しました

Dragon Nest は非常に人気のあるロールプレイングゲームであり、そのゲームインターフェイスは美しくデザインされており、プレイヤーに深い印象を残しています。多くの開発者は、自分のプロジェクトでこのデザインスタイルから学びたいと考えていますが、Vue で Dragon Nest のようなゲームインターフェイスを実装するにはどうすればよいでしょうか?

1. Vue CLI を使用してプロジェクトを作成する

まず、Vue CLI を使用して新しいプロジェクトを作成する必要があります。手動で構成するか、デフォルト構成を使用してプロジェクトを作成するかを選択できますが、ここでは便宜上デフォルト構成を使用します。コマンドラインに次のコードを入力してプロジェクトを作成します。

vue create dragon_project

ログイン後にコピー

プロジェクトが正常に作成されたら、プロジェクトのルートディレクトリに入り、ローカルサーバーを起動できます。

cd dragon_project
npm run serve

ログイン後にコピー

次へゲームインターフェイスの作成を開始します。

2. ログインページの作成

まず、簡単なログインページを作成する必要があります。 src ディレクトリに新しい Login.vue ファイルを作成し、次のコードをファイルに追加します。

<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>

ログイン後にコピー

いくつかの CSS スタイルを使用して、入力、ボタン、その他の要素を使用して Dragon Nest と同様の効果を実現します。ログインフォームを作成します。このうち h1 要素は、Dragon Nest ゲームのテーマカラーである青を使用しています。

3. ゲームインターフェイスの作成

次に、ゲームインターフェイスの作成を開始します。 src ディレクトリに新しい Game.vue ファイルを作成し、次のコードをファイルに追加します。

<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>

ログイン後にコピー

ゲームインターフェイスのレイアウトとスタイルを Dragon Nest に近づけるために、いくつかの CSS スタイルを再定義しました。ゲーム。 flex レイアウトと img 要素を使用して、ヘッダーをロゴ、ナビゲーション、ユーザーの 3 つの部分に分割しました。「User」セクションでは、ユーザー名、レベル、exp の 3 つの変数を使用してユーザー情報を表示します。これらの変数はサーバーから取得できます。 [コンテンツ] セクションでは、ウィンドウ全体を左、中央、右の 3 つの領域に分割し、そこにゲームコンテンツを追加できます。

4. ローカルコンポーネントの追加

ゲームインターフェイスには、プレーヤー情報、インベントリ、マップ、チャットボックスなどのローカルコンポーネントが含まれている必要があります。新しいコンポーネントディレクトリを作成し、このディレクトリにこれらのコンポーネントを追加できます。ここでは、例としてプレーヤー情報コンポーネントを取り上げます。コンポーネントディレクトリに新しい PlayerInfo.vue ファイルを作成し、そのファイルに次のコードを追加します:

<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>

ログイン後にコピー

Game.vue ファイルに、このコンポーネントを追加できます。左側サイドパネル内:

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

ログイン後にコピー

このようにして、Vue で Dragon Nest を模倣したゲームインターフェイスのデザインが完成しました。もちろん、これは単純な例にすぎず、実際には実装する必要がある複雑な構造や効果が多数あります。ただし、上記の事例を通じて、読者は同様のインターフェイスを実装するための基本的な方法とテクニックをすでに習得できると考えています。

以上がVue で Dragon Nest のようなゲームインターフェイスを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。