HTML5中的相对鼠标移动

我（仍）将旧的Macintosh游戏移植到HTML5和JavaScript。这场比赛是一个暴风雨克隆。（Wikipedia article on Tempest）（Shameless pimp of my project）HTML5中的相对鼠标移动

虽然当然可以使用键盘来实现控件，但我也想知道是否可以在HTML5中进行相对鼠标移动工作。

我见过这种实现（HTML5以外）的典型方法是反复将鼠标移动到屏幕中心并查找偏差，或者以某种方式捕获原始鼠标移动事件。据我所知，但我可能是错的，这些方法在HTML5中都不可能。

可能性很渺茫，但我想我不应该在不问StackOverflow的聪明头脑的情况下完全写下它。 :)

来源

2010-07-05 Stéphan Kochen

看一看鼠标锁定API（应在Chrome Canary版和Firefox极光） http://www.chromium.org/developers/design-documents/mouselock;） – patrick 2012-02-13 17:23:32

我敢肯定，在JavaScript中获取相关鼠标坐标的唯一方法（HTML5规范没有对此进行更改）是从当前鼠标位置和上一个鼠标位置或使用onmousemove进行计算。正如你可能知道的那样，当光标无法物理移动时（例如触摸窗口边界），这将不起作用（例如，正在触摸窗口边框）

在我错了的机会中，您可以搜索WebGL演示。由于必然会有3D射击游戏演示，因此他们可能会使用基于鼠标的控制解决方案。

来源

2010-07-05 20:41:06

我不认为你需要HTML5真的，但如果你有一个元素，你的游戏板是在中央，你可以做这样的事情：

<html> 
<head> 
<title>Cursor Position Radius</title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> 
<style type="text/css" media="screen"> 
#square { 
    height: 400px; 
    width: 400px; 
    background-color: #000; 
    margin: auto; 
    position: absolute; 
    overflow: hidden; 
    top: 10px; 
    left: 300px; 
} 
#log { 
    height: 100%; 
    width: 200px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    background-color: #ccc; 
    color: #000; 
    font-size: small; 
    overflow: auto; 
} 
</style>

<script type="text/javascript"> 
$(document).ready(function() { 

    var centerTop = a = $('#square').height()/2; 
    var centerLeft = $('#square').width()/2; 
    var squareTop = $('#square').offset().top; 
    var squareLeft = $('#square').offset().left; 

    // draw a center point 
    $('<div />').css({ 
     width: '1px', height: '1px', 
      backgroundColor: '#fff',overflow:'hidden', 
      position:'absolute', 
      top: centerTop,left: centerLeft 
    }).attr('id', 'center').appendTo('#square'); 
    $('#square').bind('mousemove', function(event) { 
     var mouseLeft = (event.pageX - squareLeft); 
     var mouseTop = (event.pageY - squareTop); 
     var correctTop = (centerTop - mouseTop); 
     var correctLeft = (mouseLeft - centerLeft); 
     var rawAngle = (180/Math.PI) * Math.atan2(correctTop,correctLeft); 
     var intAngle = parseInt(rawAngle, 10); 
     var msg = ''; 
     msg += (mouseTop >= centerTop) ? ' lower ' : ' upper '; 
     msg += (mouseLeft >= centerLeft) ? ' right ' : ' left '; 
     msg += intAngle; 
     $('#log').prepend('<div>' + msg + '</div>'); 
    });

/* create a dot along a radius for every degree (not necessary for the mousemove) */

var sensitivity = (2 * Math.PI)/360; 
    var radius = ($('#square').height()/2) - 10; 
    var degrees = 0; 
    for (var t = 0; t<= (2 * Math.PI); t+=sensitivity) { 
     var x = radius * Math.cos(t) + a; 
     var y = radius * Math.sin(t) + a; 
     $('<div />').css({ 
      width: '1px', height: '1px', 
        backgroundColor: '#ccc',overflow:'hidden', 
        position:'absolute',top: x,left: y 
     }).attr('id', 'cursor-' + t).appendTo('#square'); 
    } 

}); 
</script>

</head> 
<body> 

<div id="square"></div> 
<div id="log"></div> 

</body> 
</html>

所以这里的想法是，你会做一些与周围的游戏板中央那个角度。如果你知道角度是90度，你就知道游戏片段位于最右边。

我真的对JavaScript的游戏感兴趣，我会检查你的git项目。随时与我联系，我会尽我所能。我希望我能答应真正的帮助，但我自己是新手。无论如何，我的样本中可能有更有效的方法来做数学运算，我主要是作为练习来完成的。祝你好运！

这里的它另一种策略，显示出跟随鼠标的头像（实际上只是AA串点）：http://gist.github.com/464974

来源

2010-07-05 22:15:04 artlung

这是一个相当整洁的想法。这不是相对运动，但它可能是一个很好的Tempest或管射手特定的输入方法。谢谢，我得试试这个！我看到的最大困难是奇数级别，例如数字8。 – 2010-07-06 06:13:31

对于图8，我想你需要跟踪你在哪一边，并用每个循环的中心作为计算你的位置的中心。一旦你的头像穿过中心，那么角度就是另一个循环。有趣的问题。风暴的控制是一个轮子，很难模仿，除了一个轮子以外的任何东西！： - \ – artlung 2010-07-06 06:52:43

我在想更多关于鼠标相对移动的信息 - 你可以设置一个开始移动的阈值（可能是15像素？），然后只要它沿着你的横轴移动。 Playtesting会揭示它的工作效果。 – artlung 2010-07-06 14:11:11

HTML5中的相对鼠标移动

回答

相关问题