前端入门，简单的猜灯谜游戏

简介

春节来临之际，每天数着日子上班，只希望假期快来，打工人已经迫不及待的想要放假了，过不过节无所谓。有关新春的主题其实想了好几个，比如：放假倒计时，离过年放假还有多少时间，摸鱼的时候就瞅瞅；使用前端实现放烟花的特效，新春最能联想到的烟花，小时候玩得很欢乐；猜灯谜，是中国独有的富有民族风格的一种汉族民俗文娱活动形式，古时候就流传的元宵节特色活动，也是新春相关吧。

代码

其实不用任何框架也能实现这个小游戏，因为我做的很简单，奈何学了点Vue，而且挺好用的，就用Vue来实现了，以前也用过jquery，那个时候是主流，现在已经不行了，框架的更新迭代太快。这个小游戏目前只实现了两个关卡，其实可以一直加，但是觉得没有必要，第一关很简单，第二关有点难度，每一关有对应的提示。

欢迎界面：标题，副标题，开始游戏：

<div v-if="step === 0">
      <h1>猜灯谜</h1>
      <h2>欢迎来到兔年猜灯谜大赛</h2>
      <button @click="StartGame()">开始游戏</button>
    </div>

第一关：

<div v-if="step === 1">
      <span>上联：兔了个兔</span>
      <div>
        <span>下联：</span>
        <input v-model="answer"/>
        <button style="margin-left:10px;" @click="GiveTips()">给个提示</button>
      </div>
      <div style="color:red;">{{tips}}</div>
      <button @click="Submit()">提交</button>
    </div>

第二关：

<div v-if="step === 2">
      <span>上联：十年旧梦无寻处</span>
      <div>
        <span>下联：</span>
        <input v-model="answer"/>
        <button style="margin-left:10px;" @click="GiveTips()">给个提示</button>
      </div>
      <div style="color:red;">{{tips}}</div>
      <button @click="Submit()">提交</button>
    </div>

通关：

美化

有很多优秀的前端UI框架可以使用，让你的项目达到ui统一，美观的效果，比如：bootstrap，elementui，easyui等等，这里就不使用这些框架了，直接用css简单修改样式就行。

#panel{
  width: 100%;
  /* height: 500px; */
  /* background-image: url(https://s1.ax1x.com/2023/01/06/pSEsgzR.png); */
  background-size:auto;
}
.gamePanel{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
h1,h2{
  background-color: brown;
  padding: 10px;
  border-radius: 5px;
  color: #fff;
}

button{
  background-color: brown;
  border-radius: 5px;
  color: #fff;
  border:0px;
  padding: 10px;
}
span,input{
  background-color: brown;
  padding: 10px;
  color: #fff;
  border:0px;
}
.first,.last{
  display: flex;
}

开始界面：

第一关：

结束：

代码块：

总结

前端东西很多，你要慢慢学，前端的东西更新很快，你要一直学！