87,997
社区成员
发帖
与我相关
我的任务
分享如何实现迷宫里移动不能穿墙
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div {
display:inline-block;
padding:15px;
margin:-2px;
}
.wall{
background-color:green;
}
.pass{
background-color:white;
}
#person{
padding:10px;
background-color:yellow;
position:absolute;
top:42px;
}
</style>
</head>
<body>
<div id="person"></div>
</body>
<script>
var myarr = [
[1, 1, 1, 1, 1, 1, 1],
[0, 0, 0, 1, 1, 1, 1],
[1, 1, 0, 1, 1, 1, 1],
[1, 1, 0, 0, 0, 1, 1],
[1, 1, 1, 1, 0, 0, 0],
[1, 1, 1, 1, 1, 1, 1],
];
for (var i = 0; i < myarr.length; i++) {
for (var j = 0; j < myarr[1].length; j++) {
if (myarr[i][j] == 1) {
var div1 = document.createElement("div");
div1.className = 'wall';
document.body.appendChild(div1);
}
else {
var div2 = document.createElement("div");
div2.className = 'pass';
document.body.appendChild(div2);
}
}
var br = document.createElement("br");
document.body.appendChild(br);
}
document.onkeydown = function (event) {
var oper = document.getElementById("person");
switch (event.keyCode) {
case 37:
oper.style.left = Math.max(0, oper.offsetLeft - 5) + "px";
break;
case 38:
oper.style.top = Math.max(0, oper.offsetTop - 5) + "px";
break;
case 39:
oper.style.left = Math.max(0, oper.offsetLeft + 5) + "px";
break;
case 40:
oper.style.top = Math.max(0, oper.offsetTop + 5) + "px";
break;
}
}
</script>
</html>
黄色小方块在迷宫里移动不能穿墙应该如何实现
...全文
请发表友善的回复…
发表回复
scscms太阳光 2019-01-09
- 打赏
- 举报
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>game</title>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="width=device-width,initial-scale=1">
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
li {
float:left;
width:60px;
height:60px;
}
li.wall{
background-color:green;
}
li.pass{
background-color:white;
}
li.brick{
width:40px;
height:40px;
border: 10px solid white;
background-color: #f7ec0e;
}
</style>
</head>
<body>
<div id="app">
<ul :style="{width:myArr[0].length*60+'px'}">
<template v-for="(a,y) of myArr">
<li v-for="(b,x) of a" :key="y+'_'+x" :class="getClass(y,x,b)"></li>
</template>
</ul>
</div>
<script src=http://cdn.bootcss.com/vue/2.5.17/vue.min.js></script>
<script>
new Vue({
el:'#app',
data(){
return {
myArr : [
[1, 1, 1, 1, 1, 1, 1],
[0, 0, 0, 1, 1, 1, 1],
[1, 1, 0, 1, 1, 1, 1],
[1, 1, 0, 0, 0, 1, 1],
[1, 1, 1, 1, 0, 0, 0],
[1, 1, 1, 1, 1, 1, 1],
],
place:{y:1,x:0}
}
},
mounted(){
document.onkeydown = (e)=> {
let p = this.place
let k = e.keyCode
if(k === 37 && p.x > 0 && this.myArr[p.y][p.x - 1] === 0) {
p.x -= 1 // 不是最左边且左一格等于0可以移动
}else if(k === 38 && p.y > 0 && this.myArr[p.y - 1][p.x] === 0){
p.y -= 1 // 不是最上一行且上一格等于0可以移动
}else if(k === 39 && p.x < this.myArr[p.y].length - 1 && this.myArr[p.y][p.x + 1] === 0) {
p.x += 1 // 不是最右边且右一格等于0可以移动
}else if(k === 40 && p.y < this.myArr.length - 1 && this.myArr[p.y + 1][p.x] === 0){
p.y += 1 // 不是最下一行且下一格等于0可以移动
}
}
},
methods:{
getClass(y,x,b){
let p = this.place
return p.y === y && p.x === x ? 'brick' : (b === 1 ? 'wall':'pass')
}
}
})
</script>
</body>
</html>
天际的海浪 2019-01-08
- 打赏
- 举报
如果你移动元素的坐标与地图数组的下标一致，每次移动地图的一格。就很简单，只要判断要移动的地图数组下标的值是否为0就可以了。
如果你每次移动几像素的话。就要获取移动元素四个角的坐标，除以地图中一格的尺寸得到数组的下标，再判断下标的值是否为0。
zzz的记录 2019-01-08
- 打赏
- 举报
你好，因为刚接触，不太清楚你说的应该用什么实现呢，可以说一下吗？谢谢
囧 2019-01-08
- 打赏
- 举报
记录一下人的坐标，移动前先在myarr在检测是否可以移动
开始[1,0] 向右走就检测一下 [1,1]这个坐标是否是0
