Vue推箱子

最新推荐文章于 2024-08-14 20:13:10 发布

天阴太陨

最新推荐文章于 2024-08-14 20:13:10 发布

阅读量141

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_73497479/article/details/130773307

版权

使用vue实现推箱子，在实例化中添加一个事件监听来监听键盘。

操作步骤：

1.界面布局：使用v-for循环实现棋盘效果的界面，将盒子id设置为a+对应数组下标，方便在后面设置墙。

<div id="app">
			{{move}}
			<div>
				<div class="c1" :style="{left: l+'px',top: t+'px'}" ></div>
			</div>
			<div v-for="(i,index) in user" :id="'a'+index" ></div>
		</div>

2.样式：给div添加边框，给箱子填充颜色，设置圆角。然后将随机选择的格子设置背景颜色作为墙。

<style>
		*{
			margin: 0;
			padding: 0;
		}
		#app{
			height: 816px;
			width: 816px;
			margin: 0 auto;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			position: relative;
		}
		.c1{
			height: 100px;
			width: 100px;
			border-radius: 100px;
			background-color: #FFCCCC;
			position: absolute;
		}
		div{
			height: 100px;
			width: 100px;
			border: 1px solid #66CCFF;
		}
		#a10{
			background-color: #66CCFF;
		}
	</style>

样式展示：

3.实例化vue对象，并对按下键盘事件进行监听。

<script type="text/javascript">
		var vm = new Vue({
			el:"#app",
			data:{
				user:[],
				l:1,
				t:1
			},
			computed: {
				move ()
				{
					this.user.length = 63
				}
			},
			methods: {
				remove(event){
					if (( this.l == 715 && event.keyCode == 39 )
					||(this.l == 1 && event.keyCode == 37)
					||(this.t == 715 && event.keyCode == 40)
					||(this.t == 1 && event.keyCode == 38))
					{
						alert('你已超出范围')
					}
					else if(( this.t == 1 && this.l == 307 && event.keyCode == 40 ) ||
                            ( this.t == 103 && this.l == 205 && event.keyCode == 39 ) ||
                            ( this.t == 103 && this.l == 409 && event.keyCode == 37 ) ||
                            ( this.t == 205 && this.l == 307 && event.keyCode == 38 ))
					{
						alert('这是墙')
					}
					else{
						switch (event.keyCode){
							case 37: 
									this.l -= 102
								break;
							case 38: 
									this.t -= 102
								break;
							case 39: 
									this.l += 102
								break;
							case 40: 
									this.t += 102
								break;
						}		
					}
				}
			},
			mounted ()
                {
                    document.addEventListener( 'keyup', this.remove )
                }
			
		})
	</script>

效果展示：

完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		#app{
			height: 816px;
			width: 816px;
			margin: 0 auto;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			position: relative;
		}
		.c1{
			height: 100px;
			width: 100px;
			border-radius: 100px;
			background-color: #FFCCCC;
			position: absolute;
		}
		div{
			height: 100px;
			width: 100px;
			border: 1px solid #66CCFF;
		}
		#a10{
			background-color: #66CCFF;
		}
	</style>
	<body>
		<div id="app">
			{{move}}
			<div>
				<div class="c1" :style="{left: l+'px',top: t+'px'}" ></div>
			</div>
			<div v-for="(i,index) in user" :id="'a'+index" ></div>
		</div>
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el:"#app",
			data:{
				user:[],
				l:1,
				t:1
			},
			computed: {
				move ()
				{
					this.user.length = 63
				}
			},
			methods: {
				remove(event){
					if (( this.l == 715 && event.keyCode == 39 )
					||(this.l == 1 && event.keyCode == 37)
					||(this.t == 715 && event.keyCode == 40)
					||(this.t == 1 && event.keyCode == 38))
					{
						alert('你已超出范围')
					}
					else if(( this.t == 1 && this.l == 307 && event.keyCode == 40 ) ||
                            ( this.t == 103 && this.l == 205 && event.keyCode == 39 ) ||
                            ( this.t == 103 && this.l == 409 && event.keyCode == 37 ) ||
                            ( this.t == 205 && this.l == 307 && event.keyCode == 38 ))
					{
						alert('这是墙')
					}
					else{
						switch (event.keyCode){
							case 37: 
									this.l -= 102
								break;
							case 38: 
									this.t -= 102
								break;
							case 39: 
									this.l += 102
								break;
							case 40: 
									this.t += 102
								break;
						}		
					}
				}
			},
			mounted ()
                {
                    document.addEventListener( 'keyup', this.remove )
                }
			
		})
	</script>
</html>