কম্পিউটার টিউটোরিয়াল

HTML DOM MouseEvent screenY প্রপার্টি

HTML DOM MouseEvent screenY প্রপার্টি মাউস ইভেন্ট ট্রিগার হলে ইউজারের স্ক্রিন ডিসপ্লের সাপেক্ষে মাউস পয়েন্টারের উল্লম্ব (y) কোঅর্ডিনেট রিটার্ন করে। অনুভূমিক কোঅর্ডিনেট পেতে screenX ব্যবহার করুন।

সিনট্যাক্স

screenY অবজেক্ট রেফারেন্স রিটার্ন করার জন্য:

MouseEventObject.screenY

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>MouseEvent screenY</title>
<style>
  * { padding: 2px; margin: 5px; }
  form { width: 70%; margin: 0 auto; text-align: center; }
  #outer { width: 70%; margin: 0 auto; padding: 0; text-align: center; border: 1px solid black; height: 105px; background-color: #28a745; }
  input[type="button"] { border-radius: 10px; }
  #upper { border-bottom: 1px solid black; height: 40px; margin: 0 0 15px 0; background-color: #DC3545; }
  #lower { border-top: 1px solid black; height: 40px; margin: 15px 0 0 0; background-color: #DC3545; }
</style>
</head>
<body>
  <form>
    <fieldset>
      <legend>MouseEvent-screenY</legend>
      <div id="outer">
        <div id="upper"><h2>Danger</h2></div>
        <div id="lower"><h2>Danger</h2></div>
      </div>
      <input type="button" id="start" value="Start" onclick="gameStart()">
      <div id="divDisplay"></div>
    </fieldset>
  </form>
  <script>
    var divDisplay = document.getElementById('divDisplay');
    var gameDisplay = document.getElementById('outer');
    function playGame(event) {
      var x = event.screenX;
      var y = event.screenY;
      if(y > 330 && y < 345) {
        divDisplay.textContent = 'Keep Going!';
        if(x === 1171) {
          divDisplay.textContent = 'Congrats! You Did it!';
          gameDisplay.removeEventListener('mousemove', playGame);
        }
      } else {
        divDisplay.textContent = 'You moved to DANGER area. You loose!';
        gameDisplay.removeEventListener('mousemove', playGame);
      }
    }
    function gameStart() {
      gameDisplay.addEventListener('mousemove', playGame);
    }
  </script>
</body>
</html>

আউটপুট

'Start' বাটনে ক্লিক করার পর এবং কার্সর সবুজ (নিরাপদ) এলাকায় থাকলে - "Keep Going!"।

কার্সর সবুজ এলাকার শেষে থাকলে - "Congrats! You Did it!"।

কার্সর লাল (বিপদ) এলাকায় থাকলে - "You moved to DANGER area. You loose!"।

  1. HTML DOM MouseEvent pageX প্রপার্টি

  2. HTML DOM MouseEvent offsetY প্রপার্টি

  3. HTML DOM MouseEvent offsetX প্রপার্টি

  4. HTML DOM MouseEvent clientY প্রপার্টি