bom实现方块移动_HTML 方块移动

两个方块的样式，小的方块在大的方块里面。

margin: 0;

padding: 0;

}

#box{

position: relative;

margin: 30px auto 0;

width: 760px;

height: 760px;

background: skyblue;

}

#box1{

position: absolute;

left: 360px;

top: 360px;

width: 40px;

height: 40px;

background: red;

}

小方块移动的js：

var box=document.getElementById('box');

var box1=document.getElementById('box1');

document.οnkeydοwn=function(event){

var e = event || window.event || arguments.callee.caller.arguments[0];

// odiv.style.left = "40px"是固定的值

// odiv.style.left = odiv.offsetLeft是变量

// 也就是说odiv.offsetLeft值每运行一次就会改变一次值，所以才会有DIV可以动多次的效果

// 让小方块在大方块里面移动，但不能移动到大方块外面

// 向左移动时，用来判断到左边距

var w= box1.offsetLeft;

// 向top移动时，用来判断到top边距

var h= box1.offsetTop;

// 向right移动时，用来判断里左边距

var w1=box.offsetWidth-box1.offsetLeft-40;

// 向up移动时，用来判断到top边距

var h1=box.offsetHeight-box1.offsetTop-40;

// left

if(e && e.keyCode==37){

if(w> 0){

box1.style.left = box1.offsetLeft-40+ "px";

console.log('left')

}

// up

if(e && e.keyCode==38){

if(h>0){

box1.style.top = box1.offsetTop-40+ "px";

console.log('up')

}

// right

if(e && e.keyCode==39){

if(w1>0){

box1.style.left = box1.offsetLeft+40+ "px";

console.log('right')

}

// down

if(e && e.keyCode==40){

if(h1>0){

box1.style.top = box1.offsetTop+40+ "px";

console.log('down')

}

希望得到大家意见，改进代码！！！谢谢

bom实现方块移动_HTML 方块移动相关推荐

我的世界java版怎么用结构方块_结构方块怎么用我的世界结构方块使用方法-游侠网...
结构方块怎么用?在我的世界中有着非常多的方块,其中结构方块很特别,很多玩家想知道我的世界怎么使用结构方块,下面为大家带来了使用方法,想了解的玩家快来看看吧 . 我的世界怎么使用结构方块介绍结构方块 ...
怎么弄服务器里面的无限方块,乐高无限如何无限刷方块无限刷方块的方法
乐高无限怎么无限刷方块?在游戏中有许多的方块,这些方块都是游戏中的基础材料,我们需要通过获取这些材料去合成,那么大家知道方块的在哪刷新的吗?今天小编就来给大家介绍一下乐高无限方块刷新位置,如果还有不清 ...
java我的世界填充方块,我的世界怎么快速填充方块-快速填充方块攻略
我的世界怎么快速填充方块?有很多玩家在游戏中对这个问题不太清楚.接下来就由小编给大家带来我的世界快速填充方块攻略,感兴趣的小伙伴们一起来看看吧! 我的世界快速填充方块方法创世神组件相信经常玩建筑的 ...
计算机桌面图标出现蓝框,win10桌面快捷图标蓝框怎么去除附黑色方块去除/白色方块修复的方法步骤...
win10桌面快捷图标蓝框怎么去除?桌面图标出现白色方框怎么办?桌面图标变成黑色方块怎么办?现很多用户使用的是win10系统.对于新手朋友来说,win10系统下的设置问题的确是个挑战.比如电脑桌面图标 ...
Latex证明环境白方块和黑方块
仅供个人学习使用哦!! 在要添加证明结束白色小方块的地方添加如下LATEX代码: $\hfill\square$ 这样效果是在一行的末尾. 以下是我从互联网上找到的相关资料: 其中 1-proof环境 ...
css怎么画小方块,CSS3 小方块矩阵变换动画
CSS 语言: CSSSCSS 确定 .spinning-pixels-loader { width: 10px; height: 10px; background: #f35626; margin: ...
四个小方块组成一个方块的标志_四个“口”字组成一个方块的是什么牌子的标志？...
展开全部纪梵希32313133353236313431303231363533e78988e69d8331333365633933 . 纪梵希(Givenchy),法国时装品牌.纪梵希最初以香水为其 ...
html带颜色方块,HTML5 彩色方块组合动画
CSS 语言: CSSSCSS 确定 body { background: #34495e; } .tiles { position: absolute; left: 0; top: 0; right ...
bom实现方块移动_从0开始实现一个俄罗斯方块
写在前面得话: 这篇文章主要记录了我是怎么一步一步写出俄罗斯方块,整个代码用的函数编程,主要是为了让一些不熟悉es6, 面向对象写法得新手能更容易看明白,全部得代码中都是一些js的基础知识,很容易理 ...
有史以来最精彩的自问自答：OpenAI 转方块的机械手
机械手任务之三 - 转鸡蛋,示意图来源:AI 科技评论摘要:今年 2 月,OpenAI 发起了一组机械手挑战,他们在基于 MuJoCo 物理模拟器的 Gym 环境中新设计了含有机械臂末端控制.机械 ...

bom实现方块移动_HTML 方块移动

bom实现方块移动_HTML 方块移动相关推荐

最新文章

热门文章