vue实现一个记忆力小游戏代码-html代码-BFW代码库

vue实现一个记忆力小游戏代码

代码语言：html

所属分类：游戏

代码描述：vue实现一个记忆力小游戏代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  
  
<style>
html {
  background: #222;
  user-select: none;
}
html p {
  color: white;
  font-family: verdana;
  width: 100%;
  text-align: center;
}
html ul {
  display: flex;
  margin: 1rem;
  flex-flow: wrap;
  width: 95%;
  height: 90vh;
  margin: 1rem auto;
  padding: 0;
  justify-content: space-around;
}
html ul li {
  background: #333;
  box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.5);
  width: 10%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  width: 8%;
  height: 8%;
  margin: 1%;
  border-radius: 0.75rem;
  box-sizing: border-box;
  color: transparent;
}
html ul .active {
  background: #555;
  pointer-events: none;
  color: unset;
}
html ul .paired {
  background: #777;
  color: unset;
  pointer-events: none;
}
</style>




</head>

<body translate="no" >
  <div id="app">
  <p> pairs: {{pairs}} / 50</P>

  <ul class="images">
    <li v-for="image, i in images" v-bind:key="image + i" v-bind:class="image" v-on:click="select">{{image}}</li>
  </ul>

</div>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1.js"></script>
  
      <script>
new Vue({
  el: "#app",
  data: {
    activeImage: "",
    pair: "",
    pairs: 0,
    images: [
    "🌈",
    "☔️",
    "🐹",
    "🎺",
    "🐬",
    "🦚",
    "🦧",
    "🕸",
    "🦩",
    "🐠",
    "🐓",
    "🍄",
    "🌻",
    "🌞",
    "🐿",
    "🌏",
    "🌝",
    "❄️",
    "🌹",
    "☃️",
    "🍇",
    "🍓",
    "🍈",
    "🥑",
    "🥦",
    "🍞",
    "🥔",
    "🍗&quo.........完整代码请登录后点击上方下载按钮下载查看