All geek questions in one place

Relative mouse movement in HTML5

I (still) ported the old Macintosh game to HTML5 and JavaScript. The game is a Tempest clone. ( Wikipedia article on Tempest ) ( Shameless pimp of my project )

Although it is of course possible to implement controls using the keyboard, I am also wondering if relative mouse movement can be made in HTML5.

Typical ways I saw this implemented (outside HTML5) are to drag the mouse repeatedly to the center of the screen and look for deviations or somehow capture mouse movement events. As far as I know, but I could be wrong, none of these methods is possible in HTML5.

The odds are subtle, but I suppose I shouldn't write it off completely without asking smart StackOverflow minds. :)

+3
source share
2 answers

I’m sure that the only way to get relative mouse coordinates in JavaScript (HTML5 specifications have no change) is to compute it from the current mouse position and previous mouse position - or using onmousemove. As you probably know, this will not work if the cursor cannot physically move (for example, touching the borders of the window)

In case I am mistaken, you can use the search for WebGL demos. Since there is a demo version of a 3D shooter, they probably have a mouse control solution that you can apply.

+1
source

, 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>

<!-- here the real code, the JavaScript -->

<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>

<!-- and the body -->

</head>
<body>

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

</body>
</html>

, , - . , 90 , , .

JavaScript , git. , , . , . , , , . !

, ( ), : http://gist.github.com/464974

+1

Source: https://habr.com/ru/post/1753196/

More articles:


All Articles