进行了关卡设计，小修改

代码

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;
}

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;}}
})

[植树造林小游戏1.1]相关推荐

C++火龙征战（打怪升级）小游戏
大家好,我是大白好久没有发文章! 我现在发的是一个小游戏最好点进去先全屏剧情结束后就先看状态了解一下自己,我还在状态里放了公告好多行呢! 看: #include<bits/stdc++. ...
自制青蛙跳台阶小游戏~
青蛙跳台阶小游戏 1.概念(concept)文档楔子(Setting):千百年来,人们在贬低别人时,常用井底之蛙来描述那个人,但这却让青蛙不开心了,于是青蛙决定跳出井底,为自己讨一个公道. 玩法(G ...
用Construct 2制作入门小游戏~
今天在软导课上了解到了Construct 2这个神器,本零基础菜鸟决定尝试做一个简单的小游戏(实际上是入门的教程啊= = 首先呢,肯定是到官网下载软件啊,点击我下载~ 等安装完毕后我便按照新手教程开始 ...
[FaceBook]测试、发布和分享小游戏
FaceBook小游戏测试.发布和分享小游戏对于小游戏,您现在可以十分轻松地在本地测试开发版本,自动完成发布流程,以及与团队分享编译版本.本文档会详细说明这些步骤. 通过本地服务器测试游戏小游戏 ...
OPPO小游戏vConsole开启方法
OPPO小游戏是不会报红色错误的,要开启vConsole,要在首场景脚本内onLoad里加上以下代码: qg.setEnableDebug({enableDebug: true, // true 为打 ...
unity课设小游戏_Unity制作20个迷你小游戏实例训练视频教程
本教程是关于Unity制作20个迷你小游戏实例训练视频教程,时长:20小时,大小:3.8 GB,MP4高清视频格式,教程使用软件:Unity,附源文件,作者:Raja Biswas,共97个章节,语言 ...
python井字棋_用Python做一个井字棋小游戏
井字棋是一个经典的小游戏,在九宫格上玩家轮流画OXO,当每列或每行或是两个对角成一线时便是获胜. 今天就用Python编写一个井字棋小游戏,与电脑对战. 程序执行画面如下图所示: 程序提供了两种人工智 ...
用c++写一个猜数字的小游戏
代码都很简单,就不细细说了,值得注意的一些就是: 对于初学c++的小伙伴来说,c++很多基础东西都和c语言有着一定的区别,例如头文件的写法,读入和输出的写法都不一样.例如下面这个小游戏中囊括了time ...
【机器视觉案例】(6) AI视觉，距离测量，自制AI小游戏，附python完整代码
各位同学好,今天和大家分享一下如何使用 opencv + mediapipe 创建一个AI视觉小游戏,先放图看效果. 游戏规则,用手按下屏幕上的圆形按钮,每按一次后松开,按钮就随机出现在屏幕上的一个位 ...

[植树造林小游戏1.1]

代码

[植树造林小游戏1.1]相关推荐

最新文章

热门文章