js-JS做迷宫，人物的方块动不了，求找出错误

问题描述

JS做迷宫，人物的方块动不了，求找出错误

这个是CSS：.gz { width: 30px;height: 30px; position: absolute;}
.rw { width: 30px;height: 30px; position: absolute;z-index: 100;}

这个是JS：
window.onload = function () {
var arr = new Array();
arr = [
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1],
[1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1],
[1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1],
[1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1],
[1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1],
[1, 3, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
];

var i, j;
for (i = 0; i < arr.length; i++) {
    for (j = 0; j < arr[i].length; j++) {
        var gz = document.createElement("div");
        gz.className = "gz";
        gz.id = i + "_" + j;
        gz.style.top = i * 34 + "px";
        gz.style.left = j * 34 + "px";

        if (arr[i][j] == 0) { }
        if (arr[i][j] == 1) {
            gz.style.backgroundColor = "gray";
        }
        if (arr[i][j] == 2) {
            gz.style.backgroundColor = "red";
        }
        if (arr[i][j] == 3) {
            gz.style.backgroundColor = "blue";
        }
        document.body.appendChild(gz);
    }
}
craeterole();

}
var x = 1, y = 1;
function craeterole() {
var rw = document.createElement("div");
rw.className = "rw";
rw.style.backgroundColor = "#66ccff";
rw.style.top = x * 34 + "px";
rw.style.left = y * 34 + "px";
rw.id = "rw";
document.body.appendChild(rw);
}
function yd(e) {
var key = e || event;
var aa = document.getElementById("rw");
if (key.keyCode == 37) {
if (arr[x][y - 1] == 0) { aa.style.left = parseInt(aa.style.left) - 34 + "px"; y--; } else { return; }
}
if (key.keyCode == 38) {
if (arr[x - 1][y] == 0) { aa.style.top = parseInt(aa.style.top) - 34 + "px"; x--; } else { return; }
}
if (key.keyCode == 39) {
if (arr[x][y + 1] == 0) { aa.style.left = parseInt(aa.style.left) + 34 + "px"; y++; } else { return; }
}
if (key.keyCode == 40) {
if (arr[x + 1][y] == 0) { aa.style.top = parseInt(aa.style.top) + 34 + "px"; x++; } else { return; }
}
document.onkeydown = yd;
}

解决方案

自己对比一下下面两个改动就行了，事件初始化放错位置了。

 <script>
var arr = new Array();
window.onload = function () {
arr = [
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1],
[1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1],
[1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1],
[1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1],
[1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1],
[1, 3, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
];
var i, j;
for (i = 0; i < arr.length; i++) {
    for (j = 0; j < arr[i].length; j++) {
        var gz = document.createElement("div");
        gz.className = "gz";
        gz.id = i + "_" + j;
        gz.style.top = i * 34 + "px";
        gz.style.left = j * 34 + "px";

        if (arr[i][j] == 0) { }
        if (arr[i][j] == 1) {
            gz.style.backgroundColor = "gray";
        }
        if (arr[i][j] == 2) {
            gz.style.backgroundColor = "red";
        }
        if (arr[i][j] == 3) {
            gz.style.backgroundColor = "blue";
        }
        document.body.appendChild(gz);
    }
}
craeterole();
}
var x = 1, y = 1;
function craeterole() {
var rw = document.createElement("div");
rw.className = "rw";
rw.style.backgroundColor = "#66ccff";
rw.style.top = x * 34 + "px";
rw.style.left = y * 34 + "px";
rw.id = "rw";
document.body.appendChild(rw);
}
function yd(e) {
var key = e || event;
var aa = document.getElementById("rw");
if (key.keyCode == 37) {
    if (arr[x][y - 1] == 0) { aa.style.left = parseInt(aa.style.left) - 34 + "px"; y--; } else { return; }
}
if (key.keyCode == 38) {
    if (arr[x - 1][y] == 0) { aa.style.top = parseInt(aa.style.top) - 34 + "px"; x--; } else { return; }
}
if (key.keyCode == 39) {
    if (arr[x][y + 1] == 0) { aa.style.left = parseInt(aa.style.left) + 34 + "px"; y++; } else { return; }
}
if (key.keyCode == 40) {
    if (arr[x + 1][y] == 0) { aa.style.top = parseInt(aa.style.top) + 34 + "px"; x++; } else { return; }
}

}
document.onkeydown = yd;
</script>
时间： 2024-09-21 07:50:50

js-JS做迷宫，人物的方块动不了，求找出错误的相关文章

源码-js+html做一个二维码链接

问题描述 js+html做一个二维码链接 用js+html做一个二维码,而且扫描的时候有一个链接,就像微信上面的二维码一样需要源码,感谢各位大神了 解决方案 我有一个二维码 扫描的时候生成的是一个文本,怎样让它生成一个网站 或者是一个链接啊

ajax-京东的修改订单收货信息,支付配送方式是通过js怎么做的

问题描述 京东的修改订单收货信息,支付配送方式是通过js怎么做的 点击去购物车结算,进入订单结算那些收货信息,支付配送等的"修改",它会弹出一个 层,这是怎么做的啊? 解决方案 参考京东云汇的代码库order_edit.aspx 解决方案二: 上面的答案有帮助吗?如果还有问题,请提出来,如果对答案满意,请顶一下,并标记为采纳答案,谢谢!

《Node.js入门经典》一1.2　使用Node.js能做什么

1.2 使用Node.js能做什么 Node.js入门经典 Node.js是个程序设计平台,只要有想法和足够的编程技艺,它就无所不能.它既可以创建对文件系统进行操作的小段脚本,也可以创建大规模的Web应用程序来运行整个业务.由于Node.js的独特设计,它非常适合于多人游戏.实时系统.联网软件和具有上千个并发用户的应用程序. 以下是一些使用Node.js的公司. LinkedIn eBay Yahoo! Microsoft 能使用Node.js创建的应用程序有: 实时多人游戏: 基于Web的聊天

node js-求助：node.js 如何做代码静态检查？

问题描述 求助:node.js 如何做代码静态检查? 如题,给位大神,给推荐个工具或者方法吧,最好附上检查的详细方法或者工具使用方法,谢谢了! 解决方案 还真不知道nodeJS的 代码检查工具,试试javascript的代码检查工具把 解决方案二: http://www.51testing.com/html/87/300987-818864.html 解决方案三: 谢谢大神,回复的这么及时,赞!

javascript-怎么做网页自动登录？java+jsp,在js中做这个功能

问题描述 怎么做网页自动登录?java+jsp,在js中做这个功能 怎么做网页自动登录?java+jsp,在js中做这个功能,就是有个checkbox(30天内自动登录),选中之后,登录成功后30天内自动登录 解决方案 用Cookie,把用户和密码保存到本地 解决方案二: 勾选好checkbox 将用户名和密码保存到cookie中返回到客户端,下一次进入到登录界面时候获取该cookie从中取出用户名和密码,进行登录. 解决方案三: 就是保存到cookie 中,,下次登录直接送cookie中读取

javascript-[可视化]想用JS做一个关键词球状旋转的效果，求推荐工具

问题描述 [可视化]想用JS做一个关键词球状旋转的效果,求推荐工具 要实现类似这样的效果:http://ictclas.nlpir.org/nlpir/#box-6 求推荐类似echarts的开放接口,echarts里本人找过没有找到 解决方案 JavaScript标签云

javascript-关于js能做什么？，现在主要的干嘛用？

问题描述 关于js能做什么?,现在主要的干嘛用? 请问javascript主要是做什么的?主要是在浏览器中增强html的人机交互能力吗? 解决方案 服务器也能做,用node.js 客户端也能做,用io.js 听说过visual studio code么?一个非常绚的开发环境,桌面程序,完全用io.js做出来的. 解决方案二: JS现在能做的事情太多了..基于js衍生的东东,..让MVVC,MVC...前端后端都能处理.... 解决方案三: 还有nodejs,它用来做后台服务器. 解决方案四: 增

js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序_javascript技巧

为了满足将网站加入到可信站点中,使用系统的控件,在弹出窗口的时候不用提示用户.可以通过下面的方法实现: 首先,了解一下可以设置的值和含义. 可信站点的注册表项目录 HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Internet Settings\ZoneMap\Ranges\Range[*] ActiveX控件的注册表项目录 HKEY_CURRENT_USER\Software\Microsoft\Windows\Curr

JS实现为排序好的字符串找出重复行的方法_javascript技巧

本文实例讲述了JS实现为排序好的字符串找出重复行的方法.分享给大家供大家参考,具体如下: 实现这样一个需求,在一个Editplus文档中,有很多行10位的数字,这些数字已经排好序了. 比如: 1234567890 1234567891 1234567892 1234534124 1234614124 4321412414 5636373573 有什么办法能方便的找出两行至少前7位相同的数字吗? 比如,上面的数字中,能够找出 1234567890 1234567891 1234567892 <!D