Javascript HTML5中的相对鼠标移动_Javascript_Html_Mouse

Javascript HTML5中的相对鼠标移动

javascript html

Javascript HTML5中的相对鼠标移动,javascript,html,mouse,Javascript,Html,Mouse,我（仍然）在将一款旧的Macintosh游戏移植到HTML5和JavaScript。这个游戏是一个暴风雨的复制品。（）（）当然，使用键盘实现控件是可能的，但我也在想，在HTML5中是否有可能实现相对鼠标移动在HTML5之外，我所看到的这种实现的典型方式是反复将鼠标扭曲到屏幕中心并寻找偏差，或者以某种方式捕获原始鼠标移动事件。据我所知，但我可能错了，这两种方法在HTML5中都不可能实现可能性很小，但我想我不应该在没有询问StackOverflow的聪明头脑的情况下就完全放弃它。：）我非常确

我（仍然）在将一款旧的Macintosh游戏移植到HTML5和JavaScript。这个游戏是一个暴风雨的复制品。（）（）

当然，使用键盘实现控件是可能的，但我也在想，在HTML5中是否有可能实现相对鼠标移动

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

可能性很小，但我想我不应该在没有询问StackOverflow的聪明头脑的情况下就完全放弃它。：）

我非常确定，在JavaScript中获取相对鼠标坐标的唯一方法（HTML5规范对此没有任何更改）是从当前鼠标位置和上一个鼠标位置计算相对鼠标坐标，或者使用onmousemove。正如您可能知道的，当光标无法实际移动（例如，触摸窗口边框）时，这将不起作用

如果我错了，你可以搜索WebGL演示。因为肯定会有3D射击演示，也许他们有一个基于鼠标的控制解决方案，你可以应用。

我不认为你真的需要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>

这里的想法是，你可以围绕游戏板的中心做一些事情。如果你知道角度是90度，你知道游戏块在最右边。我对用于游戏的JavaScript非常感兴趣，我将查看您的git项目。请随时与我联系，我会尽我所能。我希望我能答应提供真正的帮助，但我自己也是个新手。也许有更有效的方法来做我在我的样本中做的数学，我做这件事主要是为了锻炼自己。祝你好运

这里还有另一个技巧，展示了一个跟随鼠标的化身（实际上只是一堆点）：

这是一个相当不错的主意。这不是相对运动，但它可能是一个很好的Tempest或tube Shotter特定的输入方法。谢谢，我得试试这个！我看到的最大困难是像图8这样的奇数层。对于图8，我想你需要跟踪你在哪一边，并使用每个循环的中心作为计算你在哪里的中心。一旦你的化身越过中心，那么角度就在另一个环上。有趣的问题。暴风雨的控制是一个轮子，除了轮子，很难模仿它-\我想的更多的是鼠标的相对移动——你可以设置一个阈值来开始移动（可能是15个像素？），然后只要它沿着你的水平轴移动，就保持移动。播放测试将揭示它的工作情况。看看鼠标锁API（应该在Chrome Canary和Firefox Aurora中）；）

<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>');
    });

    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>