实际效果：可选模式
开始按钮
游戏界面
游戏失败（不点击任何黑块）
游戏中（点击黑块变灰色）
功能简介：
1、点击无尽模式，就是常规速度，定时器20毫秒，然后无限计分
2、急速模式，比常规快一倍，定时器8毫秒
3、计时模式，限时60秒，定时器20毫秒，计分
以上所有模式，点击白块直接失败，点击黑块得计一分。最高分数和最长时间，这里只进行了存储，没有写比较计算的逻辑。可以自行补全
代码逻辑：
此别踩白块的整体思路为：
1、数组存放白块数据：二维数组，数组内部单个元素为一个四位数字的数组，其中1代表黑块，0代表白块，一行四块。
blocksArr:[ // [1,0,0,0], // [0,0,1,0], ],
2、当点击开始按钮的时候，开始定时器，开始向数组插入一行随机生成的带有一个黑块标记的四位数组。然后开始改变容器的top值，使之向下移动。点击黑块会将1修改为2，当数组长度为6进行循环判断其中是否存在未被点击的黑块，如有则游戏结束。否则就会删除最后一行数据。文章来源：https://www.toymoban.com/news/detail-739142.html
实际代码：
<template>
<div class="box" ref="box">
<!-- 菜单页 -->
<div class="menu-page" v-if="showMenu">
<div class="menu-item"
v-for="(item,index) in menuArr"
:key="index"
@click="chooseMode(item)">
{{ item.name }}
<span v-show="item.key=='highest'">
:
{{ historyHighestScore }}
</span>
<span v-show="item.key=='longest'">
:
{{ historyLongestTimeLen }}s
</span>
</div>
</div>
<!-- 内部 -->
<!-- 提示模式 -->
<div class="tips-mode" v-show="showModeTips&&!showMenu">
当前模式：
<span v-if="gameMode=='infinite'">无尽模式</span>
<span v-if="gameMode=='fast'">急速模式</span>
<span v-if="gameMode=='timeLimit'">计时模式</span>
</div>
<!-- 计时 -->
<div class="time-num" v-show="showSurvivalTime&&!showMenu">
存活时间：
<span>{{ survivalTime||0 }}s</span>
</div>
<!-- 倒计时 -->
<div class="time-num" v-show="showLimitTimeLen&&!showMenu">
时间：
<span>{{ limitTimeLen||0 }}s</span>
</div>
<!-- 计分 -->
<div class="score-num" v-if="showScore&&!showMenu&&(showSurvivalTime||showLimitTimeLen)">
分数：
<span>{{ score }}</span>
</div>
<div class="scroll" ref="scroll" v-if="!showMenu">
<ul class="li-wrap" v-for="(item,index) in blocksArr" :key="index">
<li class="li-content"
v-for="(ite,idx) in item"
:key="idx"
:style="{'background':ite==1?'black':ite==2?'#eee':'#fff'}"
@click="clickBlock(index,idx)"
>
</li>
</ul>
</div>
<div class="begin" v-if="showBtn&&!showMenu">
<button @click="clickStart">{{btnText}}</button>
<span @click="backMenu">返回菜单</span>
</div>
</div>
</template>
<script>
export default {
name: "App",
created() {
//获取内存
this.getHistoryData()
},
data(){
return{
showBtn:true,// 是否显示按钮
btnText:'开始游戏',
showScore:false,//显示分数
showLimitTimeLen:false,//显示限制时间
showSurvivalTime:false, //显示计时
showMenu:true,// 显示菜单页
showModeTips:false, //显示游戏模式
gameMode:'', //游戏模式
timer:null, //白块滚动定时器
limitTimer:null, //倒计时器定时器
survivalTimer:null, //正计时器定时器
limitTimeLen:60,//倒计时模式时间1分钟
survivalTime:0, //计时器时间
speed:5, //步长
tripleSpeed:20, //定时器速度 普通就是20 极速就是8
score:0, //分数
//产生白块
blocksArr:[
// [1,0,0,0],
// [0,0,1,0],
],
//菜单
menuArr:[
{
name:'无尽模式',
key:'infinite'
},
{
name:'急速模式',
key:'fast'
},
{
name:'计时模式',
key:'timeLimit'
},
{
name:'微信游客',
key:'tour'
},
{
name:'最高分数',
key:'highest'
},
{
name:'最长时间',
key:'longest'
}
],
historyHighestScore:0, // 历史最高分
historyLongestTimeLen:0, // 历史最长时间
}
},
methods: {
getHistoryData(){
this.historyHighestScore = localStorage.getItem('whiteBlockScore')||0
this.historyLongestTimeLen = localStorage.getItem('whiteBlockTimeLen')||0
},
//点击开始
clickStart(){
// this.showBtn = false;
this.$refs.box.style.backgroundColor = '#fff';
this.$refs.box.style.border = '1px solid black';
this.$refs.scroll.innerHTML = "";
this.speed = 5
this.timer = null;
this.beginGame();
},
//开始游戏
beginGame(){
let that = this;
this.showBtn = false
this.showScore = true
this.blocksArr = []
this.score = 0;
this.survivalTime = 0
this.limitTimeLen = 60
this.showModeTips = false
if(this.gameMode=='timeLimit'){
this.countdown()
}
if(this.gameMode=='infinite'||this.gameMode=='fast'){
this.countup()
}
this.timer = setInterval(()=>{
//开始移动
console.log('烦得很',that.$refs.scroll.offsetTop,that.$refs.scroll.style.top)
that.$refs.scroll.style.top = that.$refs.scroll.offsetTop + that.speed +'px'
//因为默认是负的 进入画面就生成白块
if(that.$refs.scroll.offsetTop >= 0){
that.creatNewRow();
that.$refs.scroll.style.top = '-130px';
}
//删除第一行 也就是滑下去的哪一行
//这里的数字应该是活的 比如这个7
let clientHeight = this.$refs.box.clientHeight
let num = Math.ceil(clientHeight/130)
if(that.blocksArr.length == num){
for(var i = 0; i < 4; i++){
if(that.blocksArr[that.blocksArr.length-1][i]==1){
that.stopGame()
}
}
if(this.timer){
that.blocksArr.pop()
}
}
},that.tripleSpeed)
},
///游戏结束
stopGame(){
// this.$refs.scroll.style.top = this.$refs.scroll.offsetTop+'px';
alert('得分：' + this.score);
clearInterval(this.timer);
clearInterval(this.limitTimer);
clearInterval(this.survivalTimer);
this.timer = null
this.limitTimer = null
this.survivalTimer = null
this.showBtn = !this.showBtn;
this.btnText = '重新开始';
//保存分数和时长
this.saveTimeOrScore(this.score,'score')
if(this.gameMode=='infinite'||this.gameMode=='fast'){
this.saveTimeOrScore(this.survivalTime,'time')
}
},
//点击方块
clickBlock(index,idx){
if(this.blocksArr[index][idx]==0){
this.stopGame()
}else if(this.blocksArr[index][idx]==1){
this.blocksArr[index][idx] = 2
this.score++
if(this.score % 20 == 0){
this.speed++;
}
}
},
//随机数0-3
randomNum(m,n){
return parseInt(Math.random() * (n - m + 1)) + m;
},
//创建格子
creatNewRow(){
let that = this
var index = this.randomNum(0 , 3);
let newRowArr = [0,0,0,0]
newRowArr[index] = 1
this.blocksArr.unshift(newRowArr)
},
//返回菜单
backMenu(){
this.showMenu = true
this.showLimitTimeLen = false
this.showSurvivalTime = false
this.showScore = false
this.showModeTips = false
this.limitTimeLen = 60
this.survivalTime = 0
this.getHistoryData()
},
//选择模式
chooseMode(item){
//无尽 计时 急速
switch (item.key){
case 'highest':
case 'longest':
case 'tour':
this.showMenu = true
break;
case 'fast':
this.tripleSpeed = 8
this.showMenu = false
this.showSurvivalTime = true
break
case 'timeLimit':
this.showLimitTimeLen = true
this.showMenu = false
this.tripleSpeed = 20
break
case 'infinite':
this.tripleSpeed = 20
this.showMenu = false
this.showSurvivalTime = true
break
}
//重置基础状态
this.showModeTips = true
this.gameMode = item.key
this.showScore = true
this.score = 0
this.blocksArr = []
this.btnText = '开始游戏'
clearInterval(this.timer)
this.timer = null
console.log('this.mode',this.gameMode)
},
//倒计时函数
countdown() {
let that = this
this.limitTimer = setInterval(()=>{
if(that.limitTimeLen){
that.limitTimeLen--
}else{
clearInterval(that.limitTimer)
that.stopGame()
}
},1000)
},
//正计时
countup() {
let that = this
this.survivalTimer = setInterval(()=>{
that.survivalTime++
},1000)
},
//存储最高分和存活时长
saveTimeOrScore(val,type){
if(type=='score'){
localStorage.setItem('whiteBlockScore',val)
}else{
localStorage.setItem('whiteBlockTimeLen',val)
}
},
}
};
</script>
<style lang="scss" scoped>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.box{
width: 100vw;
height: 100vh;
background-color: #fff;
margin: 0px auto;
position: relative;
overflow: hidden;
.tips-mode{
position: absolute;
top: 2%;
left: 50%;
transform: translate(-50%,-50%);
font-size: 15px;
color: #9e9e9e;
z-index: 9;
}
.time-num{
position: absolute;
top: 6%;
left: 50%;
transform: translate(-50%,-50%);
font-size: 18px;
color: red;
z-index: 9;
}
.score-num{
position: absolute;
top: 10%;
left: 50%;
transform: translate(-50%,-50%);
font-size: 18px;
color: red;
z-index: 9;
}
.menu-page{
display: flex;
flex-wrap: wrap;
.menu-item{
width: 50%;
height: 33.33vh;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
color: #333;
background: #fff;
&:nth-child(2),&:nth-child(3),&:nth-child(6){
background: #333;
color: #fff;
}
}
}
}
.scroll{
width: 100%;
height: 100%;
/* background-color: skyblue; */
position: absolute;
top: -130px;
ul,.li-wrap{
width: 100%;
display: flex;
li,.li-content{
float: left !important;
width: 25% !important;
height: 130px !important;
border: 1px solid black !important;
}
}
}
.begin{
width: 100%;
height: 120px;
position: relative;
background: yellow;
z-index: 2;
top: 50%;
left: 0;
margin-top: -30%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
button{
width: 200px;
height: 50px;
font-size: 30px;
margin-bottom: 10px;
}
span{
display: block;
text-align: center;
font-size: 15px;
}
}
</style>
总结
此代码存在一些瑕疵，但是基本功能已经实现。如有问题欢迎指出，一起学习进步文章来源地址https://www.toymoban.com/news/detail-739142.html
到了这里，关于Vue2实现别踩白块（第一种）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
