-
本版专家分：0结帖率 33.33% -
<!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>
黄色小方块在迷宫里移动不能穿墙应该如何实现
-
本版专家分：31397
-
- 黄花 2018年11月 Web 开发大版内专家分月排行榜第二
-
-
记录一下人的坐标，移动前先在myarr在检测是否可以移动
开始[1,0] 向右走就检测一下 [1,1]这个坐标是否是0
-
本版专家分：0
-
你好，因为刚接触，不太清楚你说的应该用什么实现呢，可以说一下吗？谢谢
-
本版专家分：137524
-
-
进士
2018年总版新获得的技术专家分排名前十
2017年 总版技术专家分年内排行榜第七
-
- 银牌 2019年1月 总版技术专家分月排行榜第二
-
-
铜牌
2018年10月 总版技术专家分月排行榜第三
2018年9月 总版技术专家分月排行榜第三
2018年8月 总版技术专家分月排行榜第三
-
-
红花
2019年1月 Web 开发大版内专家分月排行榜第一
2018年12月 Web 开发大版内专家分月排行榜第一
2018年11月 Web 开发大版内专家分月排行榜第一
2018年10月 Web 开发大版内专家分月排行榜第一
2018年9月 Web 开发大版内专家分月排行榜第一
2018年8月 Web 开发大版内专家分月排行榜第一
2018年5月 Web 开发大版内专家分月排行榜第一
2018年1月 Web 开发大版内专家分月排行榜第一
2017年12月 Web 开发大版内专家分月排行榜第一
2017年6月 Web 开发大版内专家分月排行榜第一
2017年2月 Web 开发大版内专家分月排行榜第一
2016年3月 Web 开发大版内专家分月排行榜第一
2015年8月 Web 开发大版内专家分月排行榜第一
-
-
如果你移动元素的坐标与地图数组的下标一致，每次移动地图的一格。就很简单，只要判断要移动的地图数组下标的值是否为0就可以了。
如果你每次移动几像素的话。就要获取移动元素四个角的坐标，除以地图中一格的尺寸得到数组的下标，再判断下标的值是否为0。
-
本版专家分：29760
-
-
黄花
2012年12月 Web 开发大版内专家分月排行榜第二
2012年11月 Web 开发大版内专家分月排行榜第二
-
-
<!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>
