年前接到一个需求,要求写一个小游戏。问过盆友,说需要用cocos,但是我没学过,想这用用js试试
界面展示
下面展示一些 内联代码片
。
<div class="large-screen" ref="bigBox">
<div v-for="(item,index) in boxList" :key="index" >
<div class="item-view" v-for="(v,i) in item" :key="i" :style="{
width:PageWidth/10 + 'px',
height:PageWidth/10 + 'px',
background: v.state == 0 ? '#3f4466' : colorList[v.state - 1],
lineHeight:PageWidth/10 + 'px',
color:'#fff'
}" >
<!-- <span style="color: #fff;font-size: 24px;" >{{v.state}}</span> -->
</div>
</div>
</div>
<div class="small-screen">
<div @click="changeShowList" style="width: calc((100vw - 40px) / 6 ); height: 100px; background-color: bisque; display: flex;justify-content: center;align-items: center;">
<div @touchstart="handleTouchStartzhadan" @touchmove="handleTouchMovezhadan" @touchend="handleTouchEndzhadan" style="position: absolute;width: 80px;height: 80px; border-radius: 50%;line-height: 80px;text-align: center;background-color: #272121;" :style="{...zhadanPosition}">
<span style="font-size: 28px;color: #fff;">炸弹</span>
</div>
</div>
<div ref="samllBox" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd" style="position: absolute;" :style="{...view1Position}">
<div v-for="(item,index1) in elementList[showList[0]]" :key="index1" >
<div class="small-view" v-for="(itemView,index2) in item" :key="index2"
:style="{
backgroundColor:itemView == 0 ? '' : colorList[showList[0]],
width: selectNum === 1 ? PageWidth / 10 + 'px' : PageWidth / 20 + 'px',
height: selectNum === 1 ? PageWidth / 10 + 'px' : PageWidth / 20 + 'px',
borderRadius: selectNum === 1 ? 8 : 4,
}"></div>
</div>
</div>
<div @touchstart="handleTouchStart2" @touchmove="handleTouchMove" @touchend="handleTouchEnd" style="position: absolute;" :style="{...view2Position}">
<div v-for="(item,index1) in elementList[showList[1]]" :key="index1" >
<div class="small-view" v-for="(itemView,index2) in item" :key="index2"
:style="{
backgroundColor:itemView == 0 ? '' : colorList[showList[1]],
width: selectNum === 2 ? PageWidth / 10 + 'px' : PageWidth / 20 + 'px',
height: selectNum === 2 ? PageWidth / 10 + 'px' : PageWidth / 20 + 'px',
borderRadius: selectNum === 2 ? 8 : 4,
}"></div>
</div>
</div>
<div @touchstart="handleTouchStart3" @touchmove="handleTouchMove" @touchend="handleTouchEnd" style="position: absolute;" :style="{...view3Position}">
<div v-for="(item,index1) in elementList[showList[2]]" :key="index1" >
<div class="small-view" v-for="(itemView,index2) in item" :key="index2"
:style="{
backgroundColor:itemView == 0 ? '' : colorList[showList[2]],
width: selectNum === 3 ? PageWidth / 10 + 'px' : PageWidth / 20 + 'px',
height:selectNum === 3 ? PageWidth / 10 + 'px' : PageWidth / 20 + 'px',
borderRadius: selectNum === 3 ? 8 : 4,
}"></div>
</div>
</div>
<div @click="changeShowList" style="width: calc((100vw - 40px) / 6 ); height: 100px; background-color: bisque; display: flex;justify-content: center;align-items: center;">
<span style="font-size: 28px; color: #888888;">换一换</span>
</div>
</div>
功能逻辑
下面展示一些 内联代码片
。
<script>
new Vue({
el: '#app',
data: {
// 定义行
row: 10,
// 定义列
col:10,
boxList: [],
PageWidth:'',
smallView:{
width:this.PageWidth/10 + 'px',
height:this.PageWidth/10 + 'px',
borderRadius: '8px'
},
//小方块
elementList:[
[[1,1,1]],
[[2,2,2],[2,0,2]],
[[3,3,0],[0,3,3]],
[[0,4,0],[4,4,4]],
[[5],[5],[5]],
[[6,6,6],[0,0,6],[0,0,6]],
],
view1Position:{},
view2Position:{},
view3Position:{},
activePosition:{},
// 方块颜色
colorList:['#df2b85','#ffba1b','#3d7acd','#e473df','#fa3c92','#99ef4d','rgba(0,0,0,.5)'],
selectView:'',
showList:[1,2,3],
selectNum:'',
zhadanPosition:{}
},
methods: {
handleTouchStart(event) {
// 触摸开始时的处理逻辑
this.selectNum = 1
this.activePosition = 'view1Position'
this.changePosition('view1Position',event.changedTouches[0].pageX + 'px',event.changedTouches[0].pageY + 'px')
},
handleTouchStart2(event){
this.selectNum = 2
this.activePosition = 'view2Position'
this.changePosition('view2Position',event.changedTouches[0].pageX + 'px',event.changedTouches[0].pageY + 'px')
},
handleTouchStart3(event){
this.selectNum = 3
this.activePosition = 'view3Position'
this.changePosition('view3Position',event.changedTouches[0].pageX + 'px',event.changedTouches[0].pageY + 'px')
},
// 提取公共的初始化
changePosition(type, left, top){
this[type]={
left,
top
}
},
handleTouchStartzhadan(event){
this.zhadanPosition = {
left:event.changedTouches[0].pageX + 'px',
top:event.changedTouches[0].pageY + 'px'
}
},
handleTouchMovezhadan(event){
if(event.changedTouches[0].pageX < 20) return
if(event.changedTouches[0].pageY < 20) return
if(event.changedTouches[0].pageX + 60 > this.PageWidth) return
this.zhadanPosition = {
left:event.changedTouches[0].pageX + 'px',
top:event.changedTouches[0].pageY + 'px'
}
},
handleTouchEndzhadan(event){
console.log('baozha');
let boxWidth = this.PageWidth / 10;
let x1 = Number((event.changedTouches[0].pageX / boxWidth).toFixed(0));
let y1 = Number((event.changedTouches[0].pageY / boxWidth).toFixed(0)) ;
console.log(y1,x1);
if(x1 > this.col - 1){
console.log('超出了',x1);
x1 = this.col - 1
return
}
if(y1 > this.row - 1){
y1 = this.row - 1
console.log('超出了',x1);
return
}
try {
this.boxList[y1 - 1 < 0 ? 0 : y1 - 1 ][x1 > this.col - 1 ? this.col - 1 : x1 - 1 < 0 ? 0 : x1 - 1 ].state = 0
this.boxList[y1 - 1 < 0 ? 0 : y1 - 1 ][x1 > this.col - 1 ? this.col - 1 : x1 ].state = 0
this.boxList[y1 - 1 < 0 ? 0 : y1 - 1 ][x1 + 1 > this.col - 1 ? this.col - 1 : x1 + 1 ].state = 0
this.boxList[y1 < 0 ? 0 : y1][x1 + 1 > this.col - 1 ? this.col - 1 : x1 - 1 < 0 ? 0 : x1 - 1 ].state = 0
this.boxList[y1 < 0 ? 0 : y1][x1 + 1 > this.col - 1 ? this.col - 1 : x1 ].state = 0
this.boxList[y1 < 0 ? 0 : y1][x1 + 1 > this.col - 1 ? this.col - 1 : x1 + 1 ].state = 0
this.boxList[y1 < 0 ? 0 : y1][x1 - 1 > 0 ? x1 - 1 : 0 ].state = 0
this.boxList[y1 + 1 < 0 ? 0 : y1 + 1 ][x1 > this.col - 1 ? this.col - 1 : x1 - 1 < 0 ? 0 : x1 - 1 ].state = 0
this.boxList[y1 + 1 < 0 ? 0 : y1 + 1 ][x1 > this.col - 1 ? this.col - 1 : x1 ].state = 0
this.boxList[y1 + 1 < 0 ? 0 : y1 + 1 ][x1 + 1 > this.col - 1 ? this.col - 1 : x1 + 1 ].state = 0
this.zhadanPosition = {}
} catch (error) {
}
},
handleTouchMove(event) {
if(event.changedTouches[0].pageX < 20) return
if(event.changedTouches[0].pageY < 20) return
const b = this.$refs['samllBox'].getBoundingClientRect()
let list = []
list = this.elementList[this.showList[this.selectNum - 1]]
console.log('宽度',(this.PageWidth / 10) * list[0].length,'个数',list[0].length,'宽度b',b.width);
if(event.changedTouches[0].pageX - 20 > this.PageWidth - (this.PageWidth / 10) * list[0].length) return
this[this.activePosition]={
left:event.changedTouches[0].pageX + 'px',
top:event.changedTouches[0].pageY + 'px',
borderRadius: '8px'
}
this.isBackground(event.changedTouches[0].pageX.toFixed(2), event.changedTouches[0].pageY.toFixed(2));
},
handleTouchEnd(event) {
// 触摸结束时的处理逻辑
// console.log('Touch end', event);
//竖直方向方块是否有方块
this.isBox(event.changedTouches[0].pageX.toFixed(2), event.changedTouches[0].pageY.toFixed(2));
this.activePosition = {display:'none'};
},
// 阴影
isBackground(x, y) {
//获取竖直方块宽、高
let boxWidth = this.PageWidth / 10;
//求余数
const Xnum = x > this.PageWidth ? this.PageWidth : x
let x1 = (Xnum / boxWidth).toFixed(0);
let y1 = (y / boxWidth).toFixed(0);
let list = []
list = this.elementList[this.showList[this.selectNum - 1]]
try {
for (let index = 0; index < this.row; index++) {
for (let j = 0; j < this.col; j++){
if(this.boxList[index][j].state == 99){
console.log('清除');
this.boxList[index][j].state = 0
}
}
}
for (let i = 0; i < list.length; i++){
for (let j = 0; j < list[i].length; j++){
if(this.boxList[y1*1 + i][x1 * 1 + j].state == 0 && list[i][j] != 0){
this.boxList[y1*1 + i][x1 * 1 + j].state = 99
}
}
}
} catch (error) {
}
},
//判断当前坐标是否有方块
isBox(x, y) {
//获取竖直方块宽、高
let boxWidth = this.PageWidth / 10;
let boxHeight = this.PageWidth / 10;
let list = []
list = this.elementList[this.showList[this.selectNum - 1]]
let x1
// const b = this.$refs['samllBox'].getBoundingClientRect()
if(y > (this.PageWidth + 20 - (boxWidth * list.length))){
const gread = this.PageWidth / 5
this.view1Position = {
left: gread + this.PageWidth / 10 /3 + 'px',
}
this.view2Position = {
left: 2 * gread + this.PageWidth / 10 / 3 + 'px',
}
this.view3Position = {
left: 3 * gread + this.PageWidth / 10 /3 + 'px',
}
this.selectNum = ''
return
}
if(x > this.PageWidth - (this.PageWidth / 10) * list[0].length){
console.log('大于了');
x1 = ((this.PageWidth - (this.PageWidth / 10) * list[0].length) / boxWidth).toFixed(0)
}else{
console.log('没有大于',x,this.PageWidth,x > this.PageWidth);
x1 = (x / boxWidth).toFixed(0) ;
}
let y1 = (y / boxWidth).toFixed(0);
console.log('x1',x1,'y1',y1);
// 元素宽度 y1行
// 元素高度 x1列
console.log('选择的是',list);
if(list.length != 0){
console.log('进来了,最高度是',list.length);
for (let i = 0; i < list.length; i++){
for (let j = 0; j < list[i].length; j++){
// 判断下方格子是否被占用
if(this.boxList[y1*1 + i][x1 * 1 + j].state != 0 && this.boxList[y1*1 + i][x1 * 1 + j].state != 99 && list[i][j] != 0){
console.log('我被占用了:',this.boxList[y1*1 + i][x1 * 1 + j].state);
const gread = this.PageWidth / 5
this.view1Position = {
left: gread + this.PageWidth / 10 /3 + 'px',
}
this.view2Position = {
left: 2 * gread + this.PageWidth / 10 / 3 + 'px',
}
this.view3Position = {
left: 3 * gread + this.PageWidth / 10 /3 + 'px',
}
this.selectNum = ''
return;
}
}
}
for (let i = 0; i < list.length; i++){
for (let j = 0; j < list[i].length; j++){
// 判断下方格子是否被占用
this.boxList[y1*1 + i][x1 * 1 + j].state = list[i][j] == 0 ? this.boxList[y1*1 + i][x1 * 1 + j].state : list[i][j]
this.showList.splice(this.selectNum - 1,1,'')
console.log('haha***',i,j);
}
}
// 判断是否成为一行
for (let i = 0; i < this.row; i++){
if(!this.boxList[i].some(v=>v.state == 0)){
console.log('消除第',i,'行');
this.boxList[i].map(v=>v.state = 0)
}
}
// 判断是否成为一列
for (let i = 0; i < this.row; i++){
let state = true
for (let j = 0; j < this.col; j++){
if(this.boxList[j][i].state == 0){
state = false
continue
}
}
if(state){
console.log('消除第',i,'列');
for (let k = 0; k < this.row; k++){
this.boxList[k][i].state = 0
console.log('k',k);
}
}
}
if(this.showList[0] == '' && this.showList[1] == '' && this.showList[2] == ''){
this.changeShowList()
}
}
},
// 更换元素
changeShowList(){
console.log('12121');
// 需要展示的元素
this.selectNum = ''
this.showList = []
for (let i = 0; i < 3; i++) {
const randomNum = Math.floor(Math.random() * 6)
this.showList.push(randomNum)
}
console.log('this.showList',this.showList);
const gread = this.PageWidth / 5
this.view1Position = {
left: gread + this.PageWidth / 30 + 'px',
}
this.view2Position = {
left: 2 * gread + this.PageWidth / 30 + 'px',
}
this.view3Position = {
left: 3 * gread + this.PageWidth / 30 + 'px',
}
}
},
mounted: function () {
var that = this;
setTimeout(() => {
that.PageWidth = document.documentElement.clientWidth - 40;
console.log('宽度为:' , that.PageWidth / 10);
let list = []
for (let i = 0; i < 10; i++) {
const rowList = [];
for (let j = 0; j < 10; j++) {
rowList.push({
id: i * 10 + j,
positionX: j * that.PageWidth / 10,
positionY: j * that.PageWidth / 10,
position: j,
state: 0
})
}
console.log('rowList',rowList);
list.push(rowList);
}
// const gread = that.PageWidth / 5
// this.view1Position = {
// left: gread + that.PageWidth / 10 /3 + 'px',
// }
// this.view2Position = {
// left: 2 * gread + that.PageWidth / 10 / 3 + 'px',
// }
// this.view3Position = {
// left: 3 * gread + that.PageWidth / 10 /3 + 'px',
// }
that.boxList = list;
that.changeShowList()
}, 500)
}
})
</script>
</body>
</html>