Comment implémenter l'interface de jeu de type Dragon Nest dans Vue ?-Voir.js-php.cn

Comment implémenter l'interface de jeu de type Dragon Nest dans Vue ?

PHPz

Libérer： 2023-06-25 12:10:50

original

974 Les gens l'ont consulté

Dragon Nest est un jeu de rôle très populaire. Son interface de jeu est magnifiquement conçue et a laissé une profonde impression sur les joueurs. De nombreux développeurs espèrent apprendre de ce style de conception dans leurs propres projets, alors comment implémenter une interface de jeu de type Dragon Nest dans Vue ?

1. Créez un projet à l'aide de Vue CLI

Tout d'abord, nous devons créer un nouveau projet à l'aide de Vue CLI. Nous pouvons choisir de configurer manuellement ou d'utiliser la configuration par défaut pour créer le projet. La configuration par défaut est utilisée ici pour plus de commodité. Entrez le code suivant dans la ligne de commande pour créer le projet :

vue create dragon_project

Copier après la connexion

Une fois le projet créé avec succès, nous pouvons entrer dans le répertoire racine du projet et démarrer le serveur local :

cd dragon_project
npm run serve

Copier après la connexion

Ensuite, nous commençons à créer l'interface du jeu.

2. Créer une page de connexion

Tout d'abord, nous devons créer une page de connexion simple. Nous pouvons créer un nouveau fichier Login.vue dans le répertoire src et ajouter le code suivant au fichier :

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

Copier après la connexion

Nous avons utilisé certains styles CSS pour obtenir des effets similaires à Dragon Nest, en utilisant l'entrée, le bouton et d'autres éléments pour créer un formulaire de connexion. Parmi eux, l'élément h1 utilise la couleur du thème bleu dans le jeu Dragon Nest.

3. Créer l'interface du jeu

Ensuite, nous commençons à créer l'interface du jeu. Nous pouvons créer un nouveau fichier Game.vue dans le répertoire src et ajouter le code suivant au fichier :

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

Copier après la connexion

Nous avons redéfini certains styles CSS pour rendre la disposition et le style de l'interface du jeu plus proches du jeu Dragon Nest. Nous avons utilisé des éléments flex layout et img pour diviser l'en-tête en trois parties : Logo, Nav et User. Dans la section Utilisateur, nous utilisons trois variables : nom d'utilisateur, niveau et exp pour restituer les informations sur l'utilisateur. Ces variables peuvent être obtenues à partir du serveur. Dans la section Contenu, nous divisons la fenêtre entière en trois zones, gauche, milieu et droite, où nous pouvons ajouter du contenu de jeu.

4. Ajouter des composants locaux

L'interface du jeu doit contenir certains composants locaux, tels que les informations sur le joueur, l'inventaire, la carte, la boîte de discussion, etc. Nous pouvons créer un nouveau répertoire de composants et ajouter ces composants dans ce répertoire. En prenant le composant d'informations sur le joueur comme exemple, créez un nouveau fichier PlayerInfo.vue dans le répertoire des composants et ajoutez le code suivant au fichier :

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

Copier après la connexion

Dans le fichier Game.vue, nous pouvons ajouter ce composant dans le panneau de gauche :

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

Copier après la connexion

De cette façon, nous avons terminé la conception de l'interface de jeu en imitant Dragon Nest dans Vue. Bien sûr, il ne s’agit que d’un exemple simple, et de nombreuses structures et effets complexes doivent être mis en œuvre. Cependant, grâce aux cas ci-dessus, nous pensons que les lecteurs peuvent déjà maîtriser les méthodes et techniques de base pour implémenter des interfaces similaires.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!