在网页中实现一个超简单的游戏
实现效果(当小猫走到边缘将不能向前,小猫走到篝火旁也将不能前进,而小猫走到水方块处把水方块吃掉就不在惧怕篝火,并且可以把篝火给熄灭。)
实现过程:
一.首先是布局和样式(方格,小猫,篝火和水方块都是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;
}
}
},
注:重点在于对动态样式的使用,键盘事件的监听和获取按下的键的值,根据小猫的位置写出的条件和对条件的判断。
运行效果: