vue做一个留言板加小游戏代码

好的，以下是一个基于 Vue 的留言板加小游戏的代码：

App.vue

<template>
  <div class="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

Home.vue

<template>
  <div class="home">
    <h1>留言板</h1>
    <message-form></message-form>
    <message-list></message-list>
    <h1>小游戏</h1>
    <game></game>
  </div>
</template>

<script>
import MessageForm from '@/components/MessageForm.vue';
import MessageList from '@/components/MessageList.vue';
import Game from '@/components/Game.vue';

export default {
  name: 'Home',
  components: {
    MessageForm,
    MessageList,
    Game,
  },
};
</script>

MessageForm.vue

<template>
  <div class="message-form">
    <h2>发表留言</h2>
    <el-form ref="form" :model="message" label-width="80px">
      <el-form-item label="姓名">
        <el-input v-model="message.name"></el-input>
      </el-form-item>
      <el-form-item label="留言内容">
        <el-input v-model="message.content"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="publish">发布</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'MessageForm',
  data() {
    return {
      message: {
        name: '',
        content: '',
      },
    };
  },
  methods: {
    publish() {
      axios
        .post('/api/messages', this.message)
        .then(() => {
          this.$refs.form.resetFields();
          this.$message.success('发布成功！');
          this.$emit('publish');
        })
        .catch(() => {
          this.$message.error('发布失败！');
        });
    },
  },
};
</script>

MessageList.vue

<template>
  <div class="message-list">
    <h2>留言列表</h2>
    <el-table :data="messages" border>
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="留言内容" prop="content"></el-table-column>
      <el-table-column label="时间" prop="time"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="{ row }">
          <el-button type="danger" size="small" @click="remove(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'MessageList',
  data() {
    return {
      messages: [],
    };
  },
  created() {
    axios.get('/api/messages').then((response) => {
      this.messages = response.data;
    });
    this.$on('publish', this.refresh);
  },
  methods: {
    refresh() {
      axios.get('/api/messages').then((response) => {
        this.messages = response.data;
      });
    },
    remove(message) {
      axios
        .delete(`/api/messages/${message.id}`)
        .then(() => {
          this.$message.success('删除成功！');
          this.refresh();
        })
        .catch(() => {
          this.$message.error('删除失败！');
        });
    },
  },
};
</script>

Game.vue

<template>
  <div class="game">
    <canvas ref="canvas"></canvas>
  </div>
</template>

<script>
import Phaser from 'phaser';

export default {
  name: 'Game',
  mounted() {
    const config = {
      type: Phaser.AUTO,
      width: 800,
      height: 600,
      backgroundColor: '#000000',
      parent: this.$refs.canvas,
      scene: {
        preload: this.preload,
        create: this.create,
        update: this.update,
      },
    };
    this.game = new Phaser.Game(config);
  },
  methods: {
    preload() {
      this.load.image('background', 'assets/background.png');
      this.load.image('mole', 'assets/mole.png');
    },
    create() {
      this.add.image(400, 300, 'background');
      this.score = 0;
      this.scoreText = this.add.text(16, 16, `Score: ${this.score}`, {
        fontSize: '32px',
        fill: '#ffffff',
      });
      this.timer = this.time.addEvent({
        delay: 1000,
        callback: this.addMole,
        callbackScope: this,
        loop: true,
      });
    },
    update() {
      if (this.input.activePointer.isDown) {
        const x = this.input.activePointer.x;
        const y = this.input.activePointer.y;
        const mole = this.moles.find((mole) => mole.getBounds().contains(x, y));
        if (mole) {
          mole.destroy();
          this.score += 10;
          this.scoreText.setText(`Score: ${this.score}`);
        }
      }
    },
    addMole() {
      const x = Phaser.Math.Between(0, 800);
      const y = Phaser.Math.Between(0, 600);
      const mole = this.add.sprite(x, y, 'mole');
      this.tweens.add({
        targets: mole,
        y: y - 100,
        ease: 'Linear',
        duration: 1000,
        onComplete: () => {
          mole.destroy();
          this.score -= 5;
          this.scoreText.setText(`Score: ${this.score}`);
        },
      });
      this.moles.push(mole);
    },
  },
  data() {
    return {
      game: null,
      score: 0,
      scoreText: null,
      timer: null,
      moles: [],
    };
  },
};
</script>

以上是一个基于 Vue 的留言板加小游戏的代码，你可以根据自己的需求进行修改和扩展。