vue数字华容道游戏代码

使用方法：

1、head引入css文件

<style>
html,body,div{
	margin: 0;
	padding: 0;
}
#app{
	width: 400px;
	height: 422px;
	margin: 200px auto;
	background-color: black;
	text-align: center;
	color: white;
}
.puzzle{
	width: 400px;
	list-style: none;
	overflow: hidden;
	margin-left: -40px;
	margin-bottom: 0px;
	margin-top: -23px;
}
li{
	width: 100px;
	height: 100px;
	background: orange;
	float: left;
	line-height: 100px;
	-webkit-text-stroke: 1px #fff;
	color: transparent;
	font-size: 48px;
	border: 1px solid #ccc;
	box-sizing: border-box;
}
.puzzle-empty{
	background: #ccc;
	box-shadow: 0px 0px 2px #000 inset;
}
</style>

2、head引入js文件

<script src="js/vue.js"></script>

3、body引入HTML代码

<div id="app">
	<ul class="puzzle">
		<li v-bind:class="{'puzzle-item':true,'puzzle-empty':!num}"
		 v-for="(num,index) in numLists" @click="moveTo(index)">
		 {{num}}
		</li>
	</ul>
	<button v-on:click="rander">重新开始</button>
</div>

<script>
	let vm = new Vue({
		el:"#app",
		data:{
			numLists:[]
		},
		mounted(){
			this.rander();
		},
		methods:{
			rander(){
			let arr = [];
			for(let i=0;arr.length<15;i++){
				let num = Math.ceil(Math.random()*15)
				if(arr.indexOf(num)==-1){
					arr.push(num)
				}
			}
			this.numLists=arr;
			this.numLists.push("");
			},
			moveTo(i){
				let currentNum = this.numLists[i],
				leftNum = this.numLists[i-1],
				rigthNum = this.numLists[i+1],
				topNum = this.numLists[i-4],
				buttonNum=this.numLists[i+4];
				if(rigthNum===""){
					Vue.set(this.numLists,i+1,currentNum);
					Vue.set(this.numLists,i,"");
				}else if(leftNum===""){
					Vue.set(this.numLists,i-1,currentNum);
					Vue.set(this.numLists,i,"");
				}else if(topNum===""){
					Vue.set(this.numLists,i-4,currentNum);
					Vue.set(this.numLists,i,"");
				}else if(buttonNum===""){
					Vue.set(this.numLists,i+4,currentNum);
					Vue.set(this.numLists,i,"");
				}

				if(this.endGame()){
					alert('success!')
				}

			},
			endGame(){
				let i = 0;l=this.numLists.length;
				for(i;i<l-2;i++){
					if(this.numLists[0]===""||this.numLists[l-1]===""){
						if(this.numLists[i]<this.numLists[i+1]){

						}else{
							return false;
						}
					}else{
						return false;
					}
				}
				return true;
			}
		}
	})
</script>