我正在尝试进一步使用js，所以我一直在寻找一个简单而简短的脚本，可以将字母，点，（无论）移动到特定坐标，或者只是在那些坐标处绘制它。我也想要一个基于箭头键的运动。
我一直在看俄罗斯方块游戏，但是即使你清理了很多代码，也会有相当多的代码。
答案 0 :(得分：7)
你说你想在页面上放一个盒子或东西，然后用箭头键移动它。所以分解为：
您可以通过将元素设置为“绝对定位”元素来完全控制页面上的元素：将其position样式属性设置为absolute：
<div style="position: absolute;"></div>
或更好
<style>
#target {
position: absolute;
}
</style>
<div id="target"></div>
对于实际出现的div，你想给它一些尺寸，可能还有一些可见的方面：
<style>
#target {
position: absolute;
width: 10px; /* Or whatever */
height: 10px; /* Or whatever */
border: 1px solid black;
background-color: #ddd;
}
</style>
上面我们给了元素一个 id 。这意味着我们可以使用document.getElementById进行查找。这不是访问元素的唯一方法，但它简单明了：
var element;
element = document.getElementById("target");
这是通过left，top，right和bottom属性完成的，您可以通过元素实例上的style属性设置这些属性。我们把它从页面顶部放10个像素，从左边放50个像素：
element.style.top = "10px";
element.style.left = "50px";
请注意，样式值始终是字符串，您必须包含单位，就像在样式表中一样。
对于箭头键，最好的选择是keydown事件，因为它会触发不可打印的键（如箭头），如果键被按下则会重复。在这里，我们进入许多地方之一，像jQuery，Prototype，YUI，Closure或any of several others这样的好图书馆可以帮助您，因为连接事件处理程序的最佳方法是使用DOM2样式的处理程序，但是虽然Microsoft创建了它们，但当它们标准化时，名称和参数与Microsoft不同，Microsoft花了很长时间来支持该标准。所以你必须处理微软的方式（attachEvent）和标准方式（addEventListener）。任何好的库都提供了一种简单，统一的方式来连接事件处理程序。
This answer有一个我们可以用于此示例的跨浏览器hookEvent函数（完整的源代码也位于此答案底部的最后一个示例中）。我们这样使用它：
hookEvent(document, "keydown", function(event) {
// This function gets called when there's a keydown event
// If we want to prevent the event from propagating (bubbling),
// we can use `event.stopPropagation();` here. Similarly, if
// we want to prevent any default action, we can use
// `event.preventDefault();` here
});
要找出按下了哪个键，我们使用keyCode或which - 任何体面的库都会为您处理的另一个跨浏览器的麻烦。所以：
hookEvent(document, "keydown", function(event) {
var key = event.which || event.keyCode;
});
如果key不是假的，则设置为event.which;如果event.keyCode为假，则which设置为hookEvent(document, "keydown", function(event) {
var element, left, top;
element = document.getElementById("target");
left = parseInt(element.style.left, 10);
top = parseInt(element.style.top, 10);
switch (event.which || event.keyCode) {
case 37: // Left
left = Math.max(0, left - 10);
break;
case 39: // Right
left += 10;
break;
case 38: // Up
top = Math.max(0, top - 10);
break;
case 40: // Down
top += 10;
break;
}
element.style.left = left + "px";
element.style.top = top + "px";
// Stop propagation and prevent default
event.stopPropagation();
event.preventDefault();
});
。剩下的就是处理键并移动元素：
left我们每次都重新获取元素，并且我们正在解析top属性中现有的style和left值，这很好，因为键盘事件没有经常发生这种情况，但没有必要。理想情况下，您希望将所有代码放在“范围函数”中，这样就不会创建全局符号，如果我们这样做，我们可以只获取一次元素然后在事件处理程序中使用它，因为事件处理程序我们将create将是一个关于范围函数上下文的闭包（不要担心，JavaScript's Curiously Powerful || operator）。同样，我们可以在该范围函数中使用局部变量来跟踪top和(function() {
var element = document.getElementById("target"),
left = 0,
top = 0;
element.style.left = left + "px";
element.style.top = top + "px";
hookEvent(document, "keydown", function(event) {
switch (event.which || event.keyCode) {
case 37: // Left
left = Math.max(0, left - 10);
break;
case 39: // Right
left += 10;
break;
case 38: // Up
top = Math.max(0, top - 10);
break;
case 40: // Down
top += 10;
break;
}
element.style.left = left + "px";
element.style.top = top + "px";
// Stop propagation and prevent default
event.stopPropagation();
event.preventDefault();
});
})();
。所以：
<div id="target"></div>此代码必须在页面上的(function() {
// A cross-browser hook event function, tucked at the end to keep
// it out of the way
var hookEvent = makeHookEventFunction();
// Get the element, and our initial position
var element = document.getElementById("target"),
left = 0,
top = 0;
// Set the initial position on the element
element.style.left = left + "px";
element.style.top = top + "px";
// Handle the 'keydown' event
hookEvent(document, "keydown", function(event) {
// Work with 'which' or 'keyCode', whichever the browser gives us
switch (event.which || event.keyCode) {
case 37: // Left
left = Math.max(0, left - 10);
break;
case 39: // Right
left += 10;
break;
case 38: // Up
top = Math.max(0, top - 10);
break;
case 40: // Down
top += 10;
break;
default:
// Not for us
return;
}
// Update the element's position
element.style.left = left + "px";
element.style.top = top + "px";
// Since we've handled the key event, prevent it from
// propagating and prevent its default action
event.stopPropagation();
event.preventDefault();
});
// ------------------------------------------------------------
// A cross-browser "hook event" function, see my answer at
// https://stackoverflow.com/questions/23799296/js-li-tag-onclick-not-working-on-ie8/23799448#23799448
// for details.
function makeHookEventFunction() {
var div;
// The function we use on standard-compliant browsers
function standardHookEvent(element, eventName, handler) {
element.addEventListener(eventName, handler, false);
return element;
}
// The function we use on browsers with the previous Microsoft-specific mechanism
function oldIEHookEvent(element, eventName, handler) {
element.attachEvent("on" + eventName, function(e) {
e = e || window.event;
e.preventDefault = oldIEPreventDefault;
e.stopPropagation = oldIEStopPropagation;
handler.call(element, e);
});
return element;
}
// Polyfill for preventDefault on old IE
function oldIEPreventDefault() {
this.returnValue = false;
}
// Polyfill for stopPropagation on old IE
function oldIEStopPropagation() {
this.cancelBubble = true;
}
// Return the appropriate function; we don't rely on document.body
// here just in case someone wants to use this within the head
div = document.createElement('div');
if (div.addEventListener) {
div = undefined;
return standardHookEvent;
}
if (div.attachEvent) {
div = undefined;
return oldIEHookEvent;
}
throw "Neither modern event mechanism (addEventListener nor attachEvent) is supported by this browser.";
}
})();后，因为它假定该元素已经存在。
Runnable live example *（您必须单击该框以确保在按键工作之前框架具有焦点）：
#target {
position: absolute;
width: 10px;
/* Or whatever */
height: 10px;
/* Or whatever */
border: 1px solid black;
background-color: #ddd;
}<div id="target"></div>{{1}}
一些参考文献：
答案 1 :(得分：1)
一个好主意是从一个绝对定位的元素开始。
<div id="moveme" style="position:absolute;">X</div>
然后您可以使用jQuery（或任何其他框架）使用左和顶部 css属性作为坐标来移动它。 例如：
$('#moveme').animate({left: "100px", top: "240px"});
或者如果您不希望使用滑动动画，只需使用：
$('#moveme').css({left: "100px", top: "240px"});
或者如果你不想使用jQuery（出于一些奇怪的原因）：
document.getElementById("moveme").style.top="50px";
来源：http://api.jquery.com/animate/
移动div：
function move(e){
alert(e.keyCode);
}
document.onkeydown = move;
使用e.keyCode查看你需要移动你的东西。
答案 2 :(得分：0)
jQuery是大规模的矫枉过正。要回答你的问题，javascript就是：
el.style.left=xPos+'px';
当然，这是脱离背景的。所以这是一个例子。
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title>js test</title>
<style type='text/css'>
* {margin:0; padding:0;}
div {position:absolute; width:100px; height:100px; background:red;}
</style>
</head>
<body>
<div></div>
<script type='text/javascript'>
var el=document.getElementsByTagName('div')[0];
setTimeout(function() {
el.style.left='100px';
},2000);
</script>
</body>
</html>
超时是可选的;它纯粹是为了证明javascript实际上正在移动元素。除此之外，还有一些事项需要注意：
要使用箭头键移动元素，您需要将回调附加到window.onkeydown事件，就像这样。
window.addEventListener('keydown',function(e) {
if(e.which==39) {
xPos++;
el.style.left=xPos+'px';
}
});
答案 3 :(得分：0)
这是其他建议的替代方案，因为它不会为HTML元素设置动画：
使用canvas element。它允许您以非常简单的方式在特定坐标上绘制形状和形状。有些库可以简化API，但是你应该只使用基础知识。
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
}
答案 4 :(得分：0)
好主意是先熟悉JavaScript。
如果您有JVM（Java虚拟机），那么会有一个JavaScript解释器。只需运行命令
jrunscript
在命令行或终端。
编写一些JavaScript示例程序，例如 -
然后转向JS在浏览器中的用途。阅读有关DOM的维基百科文章。谷歌“浏览器如何加载网页”。然后开始编写带有脚本标记的HTML页面。您可以编写一些示例程序，例如 -
完成所有这些步骤几乎不需要2个小时。然后你就可以自己设计俄罗斯方块了。一切顺利。