Question

我（仍然）将旧的Macintosh游戏移植到HTML5和JavaScript。游戏是Tempest克隆。（Wikipedia article on Tempest）（Shameless pimp of my project）

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

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

可能性很小，但我认为如果不问StackOverflow聪明的头脑，我不应该完全把它写下来。：）

Answer 1

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

如果我错了，你可以搜索一下WebGL演示。由于必然会有3D射击游戏演示，或许他们可以使用基于鼠标的控制解决方案。

Answer 2

我认为你真的不需要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项目。随时联系我，我会尽我所能。我希望我能答应真正的帮助，但我自己也是新手。在我的样本中，我可能会有更有效的方法来进行数学计算，我主要是为自己做的练习。祝你好运！

这是另一个方面，它显示了跟随鼠标的化身（实际上只是一堆点）：http://gist.github.com/464974

HTML5中的相对鼠标移动

2 个答案: