admin管理员组

文章数量:821334

[植树造林小游戏1.1]

进行了关卡设计,小修改

代码

html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Game</title>
</head>
<link rel="stylesheet" href="./game.css">
<body><div id="app"><div v-for="index1 in 3" class="picbox"><div @click="change(index1, index2)" v-for="index2 in 3" class="pic"><img src="./pic/forest.png" alt="" v-show="show(index1, index2)"><img src="./pic/desert.png" alt="" v-show="!show(index1, index2)"></div></div><button @click="start" v-show="clickTimes===0">开始</button><button @click="nextStage" v-show="ifNext">下一关</button><h2 v-show="isWin">你赢了!</h2><h2>点击数:{{clickTimes}}</h2><h2 v-show="isEnd">已经全部通关,尝试在下一次减少点击数吧!</h2></div>
</body>
<script src="vue.js"></script>
<script src="game.js"></script>
</html>

css

div.pic{margin: 5px;float: left;width: 300px;
}div.picbox{position: relative;float: left;width: 1002px;
}button{width: 70px;height: 40px;border-width: 0px;border-radius: 3px;background: #399b4a; /* 背景颜色 */cursor: pointer; /* 鼠标移入按钮范围时出现手势 */outline: none; /* 不显示轮廓线 */font-family: Microsoft YaHei;color: white;font-size: 17px;
}
button:hover { /* 鼠标移入按钮范围时改变颜色 */background: #5cc47f;
}

js

const app = new Vue({el: "#app",data: {isGreen: [true, true, true, true, true, true, true, true, true],stage1: [false, false, true, false, true, true, true, true, true],stage2: [true, false, true, false, false, false, true, false, true],stage3: [false, false, true, false, true, false, true, false, false],stage4: [false, false, true, true, true, false, false, true, false],stage5: [false, false, false, false, false, true, false, true, true],stage6: [false, false, false, false, false, false, false, false],stage7: [true, false, true, false, true, false, true, false, true],stage8: [true, true, true, true, false, true, true, true, true],stage9: [true, false, false, false, false, true, false, true, false],isWin: false,clickTimes: 0,stage: 1,ifNext: false,canClick: false,isEnd: false},computed: {},methods: {reIndex(index1, index2){return (index1 - 1) * 3 + (index2 - 1);},show(index1, index2){realIndex = this.reIndex(index1, index2);return this.isGreen[realIndex];},change(index1, index2){//console.log(index1, index2);if (this.canClick){this.isGreen.splice(this.reIndex(index1, index2), 1, !this.isGreen[this.reIndex(index1, index2)])if(index2 > 1){this.isGreen.splice(this.reIndex(index1, index2 - 1), 1, !this.isGreen[this.reIndex(index1, index2 - 1)]);}if (index2 < 3){this.isGreen.splice(this.reIndex(index1, index2 + 1), 1, !this.isGreen[this.reIndex(index1, index2 + 1)]);}if (index1 > 1){this.isGreen.splice(this.reIndex(index1 - 1, index2), 1, !this.isGreen[this.reIndex(index1 - 1, index2)])}if (index1 < 3){this.isGreen.splice(this.reIndex(index1 + 1, index2), 1, !this.isGreen[this.reIndex(index1 + 1, index2)])}this.clickTimes += 1;this.win();}},start(){this.stage = 1;this.clickTimes = 0;this.isGreen = this.stage1;this.canClick = true;// for (let i in this.isGreen){//   rand = Math.round(Math.random()*1);//   console.log(rand);//   if (rand === 1){//     this.isGreen.splice(i, 1, !this.isGreen[i]);//   }// }},win(){// it is bad// for(let i of this.isGreen){//   console.log(i)//   if(!i){//     return;//   }// this.isWin = !this.isWin;// return;// }// if (this.isGreen[0]&&this.isGreen[1]&&this.isGreen[2]&&this.isGreen[3]&&this.isGreen[4]&&this.isGreen[5]&&this.isGreen[6]&&this.isGreen[7]&&this.isGreen[8]){//   this.isWin = !this.isWin;// }// return;let count = 0;for (let j in this.isGreen){if(this.isGreen[j]){count += 1;}}if (count === this.isGreen.length){this.isWin = !this.isWin;this.ifNext = true;this.canClick = false;if (this.stage === 9){this.ifNext = false;this.isEnd = true;}}},nextStage(){this.stage += 1;this.canClick = true;this.isGreen = eval("this.stage" + this.stage);this.isWin = false;}}
})

本文标签: 植树造林小游戏11