माउस पॉइंटर को एक विशिष्ट स्थिति में ले जाएं?


127

मैं एक HTML5 गेम बना रहा हूं और मैं माउस कर्सर को एक विशिष्ट घटना पर एक निश्चित नियंत्रण पर रखने की कोशिश कर रहा हूं ताकि एक विशिष्ट दिशा में आगे बढ़ने का हमेशा एक ही परिणाम हो। क्या यह संभव है?


अगर मैं सही तरीके से समझूं, तो आप JS का उपयोग करके माउस कर्सर को स्थानांतरित करना चाहते हैं - यह संभव नहीं है। आपको दूसरा रास्ता खोजना होगा।
२०:०५ पर तीस

1
HTML5 में कुछ नए माउस इवेंट हैं लेकिन माउस को स्थानांतरित करने के लिए कुछ भी नहीं है। आप हमेशा window.moveBy (x, y) कर सकते हैं; जहां माउस मंडराता है, उसके नीचे वाली खिड़की को हिलाने के लिए .. यह एक बहुत ही मजेदार खेल होगा :) मुझे लगता है कि यह किया जा रहा है केवल एकमात्र तरीका ActiveX - ewwww, yuk के माध्यम से है!
जेरेमी थॉम्पसन

1
नहीं - जावास्क्रिप्ट आपको ऐसा नहीं करने देगा, लेकिन मुझे लगता है कि एक वर्कअराउंड हो सकता है जिसमें पृष्ठ को किसी विशिष्ट स्थान पर ले जाना शामिल है, जो कि कर्सर को "स्क्रॉल" भी करेगा, विंडो स्क्रॉलो () का उपयोग करके - w3Schools देखें पर w3schools.com/jsref/met_win_scrollto.asp
स्टारडस्ट

1
स्मार्टफ़ोन पर माउस ले जाने के साथ सौभाग्य।
करूर

एक माउसपॉइंट की छवि को चारों ओर ले जाया जा सकता है और कर्सर सेट करें: कोई नहीं। यह एक सुरक्षा जोखिम नहीं है क्योंकि आप प्रोग्रामर हैं। यदि आप एक गेम बना सकते हैं तो आप अपने बैंक खाते में क्लिक करने के जोखिम से बच सकते हैं जब आप अपना गेम खेल रहे हों।

जवाबों:


20

इसलिए, मुझे पता है कि यह एक पुराना विषय है, लेकिन मैं पहले कहूंगा कि यह संभव नहीं है। निकटतम चीज वर्तमान में माउस को एकल स्थिति में लॉक कर रही है, और इसके x और y में परिवर्तन को ट्रैक कर रही है। इस अवधारणा को इसके द्वारा अपनाया गया है - ऐसा लगता है - क्रोम और फ़ायरफ़ॉक्स। यह क्या माउस लॉक कहा जाता है द्वारा प्रबंधित किया जाता है , और मार से बच इसे तोड़ देगा। मेरे संक्षिप्त रीड-अप से, मुझे लगता है कि यह विचार यह है कि यह माउस को एक स्थान पर लॉक करता है, और क्लिक-एंड-ड्रैग इवेंट के समान गति की घटनाओं की रिपोर्ट करता है।

यहाँ रिलीज़ प्रलेखन है:
FireFox: https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API
Chrome: http://www.chromium.org/developers/design-docuy/mouse-lock

और यहाँ एक बहुत अच्छा प्रदर्शन है: http://media.tojicode.com/q3bsp/


मैं इसे नए स्वीकृत उत्तर के रूप में ले रहा हूं, क्योंकि यह बिल्कुल उपयोग-मामला है जो मैं पूछ रहा था, हालांकि यह सभी ब्राउज़रों में समर्थित नहीं है।
डेन्केस्टर

187

आप जावास्क्रिप्ट के साथ माउसपॉइंट को स्थानांतरित नहीं कर सकते।

बस एक पल के लिए निहितार्थ के बारे में सोचें, यदि आप कर सकते हैं;)

  1. उपयोगकर्ता सोचता है: "अरे मैं इस लिंक पर क्लिक करना चाहूंगा"
  2. जावास्क्रिप्ट एक अन्य लिंक के लिए माउस को स्थानांतरित करता है
  3. उपयोगकर्ता गलत लिंक पर क्लिक करता है और अनजाने में मैलवेयर डाउनलोड करता है जो उसकी सी-ड्राइव को प्रारूपित करता है और उसकी कैंडी खाता है

74
वास्तविक क्लिक
ब्लेंडर

15
यह सोचने के लिए आइए, यह भयानक होगा: पी
मार्टिन जेस्पर्सन

24
हे, मैं अपने माउस कर्सर पर नियंत्रण के लिए लड़ना पसंद करूंगा: तुम वापस आओ, वापस आओ!
ब्लेंडर

78
एक वेबपेज किसी लिंक पर क्लिक करने के लिए किसी को भी डाउनलोड किए बिना उसे मजबूर कर सकता है, इसलिए आप जो दावा करते हैं वह वास्तव में सुरक्षा समस्या नहीं है। हालांकि वेबपेज विंडो के बाहर जाने में असमर्थ है।
dionyziz

11
@dionyziz: सैंडबॉक्स में जबरदस्ती डाउनलोड करने और फिर यूजर इंटरेक्शन द्वारा शुरू किया गया यूजरस्पेस डाउनलोड में काफी अंतर है। सुरक्षा निहितार्थ वास्तव में बहुत बड़े हैं।
मार्टिन जेस्पर्सन

88
  1. क्लाइंट मशीन पर एक छोटा वेब सर्वर चलाएं। एक छोटी सी 100kb चीज हो सकती है। एक पायथन / पर्ल स्क्रिप्ट, आदि।
  2. एक छोटा, पूर्व-संकलित C निष्पादन योग्य शामिल करें जो माउस को स्थानांतरित कर सकता है।
  3. एक साधारण http कॉल, AJAX, जो भी - निर्देशांक के साथ आप माउस को ले जाना चाहते हैं जैसे उदाहरण के लिए CGI- स्क्रिप्ट के रूप में इसे चलाएं:

    http://localhost:9876/cgi/mousemover?x=200&y=450

पुनश्च: किसी भी समस्या के लिए, के रूप में सैकड़ों बहाने हैं क्यों, और कैसे - यह नहीं हो सकता है, और नहीं किया जाना चाहिए .. लेकिन इस अनंत ब्रह्मांड में, यह वास्तव में दृढ़ संकल्प की बात है - चाहे आप यह हो जाएगा।


13
मुझे लगता है कि हम सभी "c एक्ज़ीक्यूटेबल" होने तक बोर्ड पर थे ... xD
dGRAMOP

1
एक वेब सर्वर? शायद आप एक HTTP इंटरफ़ेस के साथ एक कार्यक्रम का मतलब है .. वेब के लिए कोई ज़रूरत नहीं है। Go प्रोग्रामिंग लैंग्वेज C के ऊपर फायदेमंद हो सकती है क्योंकि इसमें http पार्ट को जोड़ना आसान हो सकता है, या वैकल्पिक रूप से नोडज इंटरप्रेटर कोड चलाएगा जिसमें एक http इंटरफ़ेस भी काफी आसानी से शामिल हो सकता है, क्योंकि नोडज इंटरप्रेटर इसे आसान बनाने के लिए बनाया गया है। सर्वर अनुप्रयोग लिखें।
बार्लोप

3
सी = 0 निर्भरता। वेब http है। कोई प्यारा होमपेज, यहाँ .. बस परिवहन।
एलेक्स ग्रे

पीएस के लिए +1। क्या हम नोड देव-सर्वर या इसी तरह के npmjs.com/package/http-server का उपयोग करके CGI कॉल निष्पादित कर सकते हैं ??
अपार्टमेन्ट

1
क्या आप में से किसी ने कभी Javascriptसवाल के नीचे टैग देखा है ?

80

यदि आप वास्तविक (सिस्टम) माउस कर्सर का उपयोग नहीं करते हैं तो मैं आपको माउस कर्सर को स्क्रीन के किसी दिए गए क्षेत्र में रखने की कल्पना कर सकता हूं।

उदाहरण के लिए, आप अपने कर्सर के स्थान पर कार्य करने के लिए एक छवि बना सकते हैं, एक घटना को संभाल सकते हैं जो आपके दृश्य में माउसएंटर का पता लगाने पर, सिस्टम कर्सर पर शैली को 'कोई नहीं' पर सेट करें (sceneElement.style.cursor = 'none' ) में सेट करें, फिर एक छिपा हुआ छवि तत्व अभिनय लाएगा। एक पूर्वनिर्धारित अक्ष / बाउंडिंग बॉक्स अनुवाद के आधार पर दृश्य में एक कर्सर के रूप में आप कहीं भी हों।

इस तरह से कोई फर्क नहीं पड़ता कि आपने वास्तविक कर्सर को कैसे स्थानांतरित किया है आपकी अनुवाद विधि आपके छवि कर्सर को जहाँ भी आपको आवश्यकता होगी, रखेगी।

संपादित करें: छवि प्रतिनिधित्व और मजबूर माउस आंदोलन का उपयोग करते हुए jsFiddle में एक उदाहरण


5
हाँ तुम कर सकते हो। आप बस दिए गए तत्व पर कर्सर शैली को 'कोई नहीं' पर सेट करते हैं। कोशिश करो।
Xaxis

14
यह सबसे विचारणीय उत्तर है। और वास्तव में एक वास्तविक समाधान प्रदान करता है, जबकि कुछ अन्य उत्तर डॉट वास्तव में किसी भी मूल्य को जोड़ते हैं :) लेकिन वेबलॉग एफपीएस आदि जैसे दिलचस्प गेम कैसे लाएगा जब हम किसी भी माउस लॉक को प्राप्त नहीं कर सकते, जो कि बहुत सीमित लगता है ...
डेन्केस्टर

3
अभी भी अपने माउस को बाईं ओर "चालू" रखने में सक्षम नहीं होने की समस्या है। एक बार जब माउस वेबपेज छोड़ देता है, तो आप इसे नियंत्रित नहीं रख सकते।
dionyziz

2
यह इस समस्या का एक सही समाधान है। लोगों द्वारा शिकायत करने का एकमात्र कारण यह है कि यह एक तुच्छ समाधान नहीं है। आपको कभी-कभी कुछ प्रोग्रामिंग करनी होती है दोस्तों!
मार्टी

5
इस विचार के साथ खेला और JSFiddle jsfiddle.net/jaakkytt/9uczV
Jaak Kütt

65

बड़ा सवाल है। यह वास्तव में जावास्क्रिप्ट ब्राउज़र एपीआई से कुछ गायब है। मैं अपनी टीम के साथ एक WebGL गेम पर भी काम कर रहा हूं, और हमें इस सुविधा की आवश्यकता है। मैंने फ़ायरफ़ॉक्स के बगज़िला पर एक मुद्दा खोला ताकि हम माउस लॉक करने की अनुमति देने के लिए एपीआई होने की संभावना के बारे में बात करना शुरू कर सकें। यह सभी HTML5 / WebGL गेम डेवलपर्स के लिए उपयोगी होने जा रहा है।

यदि आप चाहें, तो अपनी प्रतिक्रिया के साथ टिप्पणी छोड़ें और इस मुद्दे को आगे बढ़ाएँ:

https://bugzilla.mozilla.org/show_bug.cgi?id=630979

धन्यवाद!


9
अपडेट: Bugzilla.mozilla.org/show_bug.cgi?id=633602 और w3 पॉइंटर लॉक के लिए कल्पना: DVcs.w3.org/hg/pointerlock/raw-file/default-index.html
क्रिस एंडरसन

51
यदि ऐसा होता है, तो मैं एक ब्राउज़र का उपयोग करना छोड़ दूंगा। :-P गंभीरता से, जब आप किसी एप्लिकेशन को इंस्टॉल करते हैं तो वेबसाइटों को आपकी सहमति की आवश्यकता नहीं होती है। यह एक बड़ी विशेषता होगी यदि हम सभी अच्छे लोग थे जो उपयोगकर्ता के अनुभव को बेहतर बनाने के लिए इस स्तर के नियंत्रण को नियोजित कर रहे थे। दुर्भाग्य से इंटरनेट गधे-केंद्रीय है, यही कारण है कि वास्तव में बहुत सारी विशेषताएं हैं जो हम उम्मीद करते हैं कि हम कभी भी ब्राउज़र में नहीं देखेंगे। यह कहा जा रहा है: फुलस्क्रीन एपीआई बाकी ओएस को "लॉक आउट" करने के लिए काम करेगा।
कोई

4
@Someone सहमति एक आवेदन द्वारा इस तरह के लॉक से पहले संभव है अनुरोध किया जाएगा (लोकप्रिय वेब ब्राउज़र में अब पूर्ण स्क्रीन सहमति के लिए अनुरोध के समान)। इसके अलावा, उपयोगकर्ता हमेशा ESC कुंजी मारकर सहमति रद्द कर सकता है।
dionyziz

7
यह हुआ है। और यह बहुत बढ़िया है (यदि अभी भी विक्रेता-उपसर्ग है): mdn.github.io/pointer-lock-demo
ericsoco

1
@ericsoco दुखी है कि लिंक टूट गया है। यह मदद कर सकता है: https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API
Tian van Heerden

46

आप माउस पॉइंटर की स्थिति का पता लगा सकते हैं और फिर वेब पेज (बॉडी पोजिशन रिलेटिव के साथ) को स्थानांतरित कर सकते हैं ताकि वे इस बात पर मँडरा सकें कि आप उन्हें क्या चाहते हैं।

एक उदाहरण के लिए आप इस कोड को अपने ब्राउज़र कंसोल में वर्तमान पृष्ठ पर पेस्ट कर सकते हैं (और बाद में ताज़ा करें)

var upvote_position = $('#answer-12878316').position();
$('body').mousemove(function (event) {
    $(this).css({
        position: 'relative',
        left: (event.pageX - upvote_position.left - 22) + 'px',
        top: (event.pageY - upvote_position.top - 35) + 'px'
    });        
});

2
यदि आप एक कोड उदाहरण पोस्ट कर सकते हैं तो यह अधिक मूल्यवान होगा। इसके अलावा, मेरा सुझाव है कि आप FAQ पर एक नज़र डालें: stackoverflow.com/faq
ForceMagic

उपयोगकर्ता के क्लिक करते ही आप वास्तव में सही तत्व पर कैसे क्लिक करते हैं?
mmm

@ ममोमो आप का उपयोग कर सकते हैंdocument.getElementByID('thingtoclick').click();
कैस्केडिंग-शैली

1
यह पूरी तरह से तारकीय था! बॉक्स के बाहर सोचने का तरीका! मुझे संदेह है कि यह वास्तव में वही प्रदान करता है जो प्रश्नकर्ता चाहता था, लेकिन जैसा वह था, वास्तव में कौन परवाह करता है?
gcdev

12

आप एक माउस नहीं ले जा सकते लेकिन उसे लॉक कर सकते हैं। ध्यान दें: आपको क्लिक इवेंट में requestPointerLock कॉल करना होगा।

छोटा उदाहरण:

var canvas = document.getElementById('mycanvas');
canvas.requestPointerLock = canvas.requestPointerLock || canvas.mozRequestPointerLock || canvas.webkitRequestPointerLock;
canvas.requestPointerLock();

प्रलेखन और पूर्ण कोड उदाहरण:

https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API


4

आप जावास्क्रिप्ट का उपयोग करके माउस पॉइंटर को स्थानांतरित नहीं कर सकते, और इस प्रकार स्पष्ट सुरक्षा कारणों से। इस प्रभाव को प्राप्त करने का सबसे अच्छा तरीका वास्तव में माउस पॉइंटर के तहत नियंत्रण रखना होगा।


1
सुरक्षा निहितार्थ स्पष्ट से बहुत दूर हैं। वास्तव में, मानकों के हालिया परिवर्धन इस क्षमता को बिना किसी गंभीर सुरक्षा मुद्दों के परिचय देते हैं।
dionyziz

लेकिन फिर खींचें और ड्रॉप एपीआई में यह कैसे संभव है?
ओल्डबॉय

0

क्या यह केवल माउस पॉइंटर की वास्तविक स्थिति प्राप्त करने के बाद नहीं किया जा सकता है और इस मुआवजे के आधार पर स्प्राइट / सीन माउस क्रियाओं की गणना और क्षतिपूर्ति करना है?

उदाहरण के लिए आपको माउस पॉइंटर को बॉटम सेंटर होने की जरूरत है, लेकिन यह ऊपर बाईं ओर बैठता है; कर्सर को छिपाएं, एक स्थानांतरित कर्सर छवि का उपयोग करें। कर्सर चाल और मानचित्र माउस इनपुट को फिर से तैनात कर्सर स्प्राइट (या 'नियंत्रण') से मेल खाने के लिए क्लिक करें, जब सीमाएं हिट होती हैं, तो पुनरावर्ती करें। यदि / जब कर्सर वास्तव में उस बिंदु को हिट करता है जिसे आप चाहते हैं, तो मुआवजा हटा दें।

डिस्क्लेमर, गेम डेवलपर नहीं।


अनिवार्य रूप से Xaxis जवाब के समान है।
मैथेडिनक्लाउड्स

@mathheadinclouds वास्तव में, लेकिन माउस-लॉक के ब्राउज़र कार्यान्वयन से स्वतंत्र है। तो, अनिवार्य रूप से; लेकिन नहीं। आपकी राय देने के लिए धन्यवाद। - संपादित: कोई बात नहीं। मैं देख रहा हूं कि तुम क्या कह रहे हो। मुझे लगता है कि तब, मेरा एकमात्र विचार यह होगा, यहाँ यह उपयोगी नहीं है। इसके लिए और अधिक आम आदमी है, एक्सएक्सिस जवाब की तुलना में।
एरिक Shoberg
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.