How to implement the Dragon Nest-like game interface in Vue?

Dragon Nest is a very popular role-playing game. Its game interface is beautifully designed and has left a deep impression on players. Many developers hope to learn from this design style in their own projects, so how to implement a Dragon Nest-like game interface in Vue?

1. Create a project using Vue CLI

First, we need to create a new project using Vue CLI. We can choose to configure manually or use the default configuration to create the project. The default configuration is used here for convenience. Enter the following code in the command line to create the project:

vue create dragon_project

After the project is successfully created, we can enter the root directory of the project and start the local server:

cd dragon_project
npm run serve

Next we start making the game interface .

2. Make a login page

First, we need to make a simple login page. We can create a new Login.vue file in the src directory and add the following code to the file:

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

We use some CSS styles to achieve similar effects to Dragon Nest, using input and button and other elements to create a login form. Among them, the h1 element uses the blue theme color in the Dragon Nest game.

3. Make the game interface

Next, we start making the game interface. We can create a new Game.vue file in the src directory and add the following code to the file:

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

We have redefined some CSS styles to make the layout and style of the game interface closer to the Dragon Nest game . We used flex layout and img elements to divide the header into three parts: Logo, Nav and User. In the User section, we use three variables: username, level, and exp to render user information. These variables can be obtained from the server. In the Content section, we divide the entire window into three areas, left, middle and right, where we can add game content.

4. Add local components

The game interface should contain some local components, such as player information, inventory, map, chat box, etc. We can create a new components directory and add these components in this directory. Here we take the player information component as an example. Create a new PlayerInfo.vue file in the components directory and add the following code to the file:

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

In the Game.vue file, we can add this component to the left In the side panel:

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

In this way, we have completed the game interface design that imitates Dragon Nest in Vue. Of course, this is just a simple example, and there are actually many complex structures and effects that need to be implemented. However, through the above cases, we believe that readers can already master the basic methods and techniques for implementing similar interfaces.

The above is the detailed content of How to implement the Dragon Nest-like game interface in Vue?. For more information, please follow other related articles on the PHP Chinese website!