无敌小猫咪

在网页中实现一个超简单的游戏

实现效果（当小猫走到边缘将不能向前，小猫走到篝火旁也将不能前进，而小猫走到水方块处把水方块吃掉就不在惧怕篝火，并且可以把篝火给熄灭。）

实现过程：

一.首先是布局和样式（方格，小猫，篝火和水方块都是div中的背景，通过改变div的left和top来实现移动，通过改变背景来实现动态效果。）

1.首先写一个大的div，为其命名id=app，

然后再写一个class为content的div，这个div是用来放置背景图的，

再在content中写三个div，它们分别是用来放图片猫，图片篝火，图片水方块。

<div id="app">
			<div class="content">
				<div class="xm" :style="{top:topValue+'px',left:leftValue+'px',backgroundImage:'url('+aa+')'}" id="a1">
				</div>

				<div class="gh" :style="{backgroundImage:'url('+cc+')'}" id="a3">
				</div>

				<div class="fk" :style="{backgroundImage:'url('+bb+')'}" id="a2">
				</div>
			</div>
</div>

（我们是通过改变left和top来实现小猫的移动，所以要将left和top设置为动态样式的格式，背景图同理）

2.设置样式（position属性是用来定位的，将content的定位设置成相对定位relative，定位的基点就是默认位置；将其他三个的position定位设置成绝对定位absolute，即定位的基点就是父元素）

<style>
			.content {
				width: 800px;
				height: 800px;
				background: url(img/bg.png);
				border: 1px solid black;
				margin: 0 auto;
				position: relative;
			}

			.xm {
				height: 100px;
				width: 100px;
				/* background: url("img/444.png"); */
				position: absolute
			}

			.gh {
				height: 100px;
				width: 100px;
				/* background: url("img/961.png"); */
				position: absolute;
				top: 300px;
				left: 300px;
			}

			.fk {
				height: 100px;
				width: 100px;
				position: absolute;
				/* background: url("img/444.png"); */
				top: 500px;
				left: 500px;
			}
		</style>

3.在data中写入动态样式的属性值

var vm = new Vue({
			el: "#app",
			data: {
				topValue: 0,
				leftValue: 0,
				aa: ('img/444.png'),
				bb: ('img/555.png'),
				cc: ('img/961.png'),
				bl: false

			},

4.监听上下左右键，mounted是一个钩子函数，在初始化页面完成之后对dom节点进行相关的操作，addEventListener（）方法是对指定元素添加监听事件，对keydown（键盘上某个键被按下）事件进行监听,当键盘的某个键被按下时执行move函数。

mounted() {
				document.addEventListener("keydown", this.move)
			}

5.监听键盘事件，获取到用户按下的键的值，当用户按下左键时它对应的值为37，当用户按下上键时它对应的值是38，当用户按下右键时它对应的值为39，当用户按下下键时它对应的值为40，通过Switch选择语句对用户按下的键对应的值进行判断，执行相应的代码。

当用户按下左键，小猫的left将减去100px，当用户按下右键，小猫的left将加上100px，当用户按下上键，小猫的top将减上100px，当用户按下下键，小猫的top将加上100px。

对于越界的判断（当用户按下左键，小猫的left小于50px，则为越界；当用户按下右键，小猫的left大于650px，则为越界；当用户按下上键，小猫的top小于50px，则为越界；当用户按下下键，小猫的top大于650px，则为越界；）

然后要判断小猫是否走到水方块的位置，还是通过对小猫的left和top进行判断，当小猫将要走到水方块时，将水方块的背景图值为空，通过改变背景图将小猫变成蓝色小猫，然后设置一个变量为其复制为true，对于不同的方向进行加或者减left或top

然后是对小猫是否走到篝火处判断，通过对小猫的left和top进行判断，还有对变量的值进行判断，当变量的值为true时，说明小猫已经走过水方块位置了，所以可以经过篝火，并对篝火背景图进行改变；当变量的值为false时，说明小猫并没有走到水方块的位置，所以不能经过篝火，进行弹框提醒，并且不能走到篝火的位置。

具体代码：

methods: {
				move(event) {
					var divEle = document.getElementById("a1");
					var divEle2 = document.getElementById("a2");
					var divEle3 = document.getElementById("a3");
					var leftValue = parseInt(divEle.style.left);
					var topValue = parseInt(divEle.style.top);
					var bb = divEle2.style.backgroundImage
					var cc = divEle3.style.backgroundImage
					var aa = divEle.style.backgroundImage;
					var bl = this.bl;
					switch (event.keyCode) {
						case 37:
							if (leftValue < 50) {
								alert("越界");
							} else if (leftValue == 600 && topValue == 500) {
								this.aa = ('img/888.png');
								this.bb = ('');
								this.bl = true;
								this.leftValue -= 100;
							} else if (leftValue >= 399 && topValue >= 299 && topValue <= 301 && leftValue <= 499 && bl == true) {
								this.aa = ('img/888.png');
								this.cc = ('img/962.png');
								this.leftValue -= 100;
							} else if (leftValue >= 399 && topValue >= 299 && topValue <= 301 && leftValue <= 499 && bl == false) {
								alert("小心火焰");
							} else {
								this.leftValue -= 100;
							}
							break;

						case 38:

							if (topValue < 50) {
								alert("越界");
							} else if (leftValue == 500 && topValue == 600) {
								this.aa = ('img/888.png');
								this.bb = ('');
								this.bl = true;
								this.topValue -= 100;
							}else if (leftValue >= 299 && topValue >= 399 && leftValue <= 301 && topValue <= 499 && bl == true) {
								this.aa = ('img/888.png');
								this.cc = ('img/962.png');
								this.topValue -= 100;

							}  else if (leftValue >= 299 && topValue >= 399 && leftValue <= 301 && topValue <= 499 && bl == false) {

								alert("小心火焰");
							} else {
								this.topValue -= 100;

							}
							break;

						case 39:
						
							if (leftValue > 650) {
								alert("越界");
						

							} else if (leftValue == 400 && topValue == 500) {
								this.aa = ('img/888.png');
								this.bb = ('');
								this.bl = true;
								this.leftValue += 100;
							}else if (leftValue >= 199 && topValue >= 299 && topValue <= 301 && leftValue <= 301 && bl == true) {
								this.aa = ('img/888.png');
								this.cc = ('img/962.png');
								this.leftValue += 100;
						
							}  else if (leftValue >= 199 && topValue >= 299 && topValue <= 301 && leftValue <= 301 && bl == false) {
								alert("小心火焰");
						
							} else {
								this.leftValue += 100;
							}
							break;

						case 40:

							if (topValue > 650) {
								alert("越界");
						

							}  else if (leftValue == 500 && topValue == 400) {
								this.aa = ('img/888.png');
								this.bb = ('');
								this.bl = true;
								this.topValue += 100;
							} else if (leftValue >= 299 && topValue >= 199 && leftValue <= 301 && topValue <= 299 && bl == true) {
								this.aa = ('img/888.png');
								this.cc = ('img/962.png');
								this.topValue += 100;
						
							}else if (leftValue >= 299 && topValue >= 199 && leftValue <= 301 && topValue <= 299 && bl == false) {
								alert("小心火焰");
						
							} else {
								this.topValue += 100;
							}
							break;
						default:
							break;
					}
				}
			},

注：重点在于对动态样式的使用，键盘事件的监听和获取按下的键的值，根据小猫的位置写出的条件和对条件的判断。

运行效果：