गेम कंट्रोलर

按下按钮可移动红色方块：

掌控一切

现在我们要控制红色方块。

添加四个按钮：上、下、左、右。

为每个按钮编写一个函数，以沿选定方向移动组件。

इसके बाद कंपोनेंट 构造函数中创建两个新属性，并将它们命名为 speedX और speedY。这些属性被用作速度指示器。

इसके बाद कंपोनेंट 构造函数中添加一个名为 newPos() 的函数，该函数使用 speedX और speedY 属性来更改组件的位置。

在绘制组件之前，从 updateGameArea 函数调用 newPos 函数：

उदाहरण

<script>
function component(width, height, color, x, y) {
  this.width = width;
  this.height = height;
  this.speedX = 0;
  this.speedY = 0;
  this.x = x;
  this.y = y;
  this.update = function() {
    ctx = myGameArea.context;
    ctx.fillStyle = color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
  }
  this.newPos = function() {
    this.x += this.speedX;
    this.y += this.speedY;
  }
}
function updateGameArea() {
  myGameArea.clear();
  myGamePiece.newPos();
  myGamePiece.update();
}
function moveup() {}}
  मेरा_गेम_पीसेक.स्पीड_यी -= 1;
}
function movedown() {
  मेरा_गेम_पीसेक.स्पीड_यी += 1;
}
function moveleft() {
  मेरा_गेम_पीसेक.स्पीड_एक्स -= 1;
}
function moveright() {
  मेरा_गेम_पीसेक.स्पीड_एक्स += 1;
}
</script>
<button onclick="moveup()">ऊपर</button>
<button onclick="movedown()">नीचे</button>
<button onclick="moveleft()">बाईं</button>
<button onclick="moveright()">दायाँ</button>

अपने आप प्रयास करें

गति रुकाना

आवश्यकता पड़े तो बैटन छोड़ने पर लाल चक्कर को रुकाना है。

गति सूचक को 0 सेट करने वाला एक फ़ंक्शन जोड़ें。

सामान्य स्क्रीन और टचस्क्रीन के लिए दोनों उपकरणों के लिए कोड जोड़ना है:

उदाहरण

function stopMove() {
  myGamePiece.speedX = 0;
  myGamePiece.speedY = 0;
}
</script>
<button onmousedown="moveup()" onmouseup="stopMove()" ontouchstart="moveup()">ऊपर</button>
<button onmousedown="movedown()" onmouseup="stopMove()" ontouchstart="movedown()">नीचे</button>
<button onmousedown="moveleft()" onmouseup="stopMove()" ontouchstart="moveleft()">बाईं</button>
<button onmousedown="moveright()" onmouseup="stopMove()" ontouchstart="moveright()">दायाँ</button>

अपने आप प्रयास करें

किबोर के रूप में कुंजीबोर

हम लाल चक्कर को नियंत्रित करने के लिए किबोर के दिशा कुंजी का उपयोग कर सकते हैं。

एक मथड़ा बनाएं जो यह जाँच करे कि कोई कुंजी दबा दी गई है और माइगेमएरिया ऑब्जैक्ट का की गुण विन्यास किया गया है कुंजी कोड।जब कुंजी छोड़ा जाता है तो की गुण विन्यास किया गया है false：

उदाहरण

वार्ता माइगेमएरिया = {
  कैनवस : डॉक्युमेंट.createElement("canvas"),
  शुरू : function() {
    इस.canvas.width = 480;
    इस.canvas.height = 270;
    इस.context = इस.canvas.getContext("2d");
    डॉक्युमेंट.बॉडी.insertBefore(इस.canvas, डॉक्युमेंट.बॉडी.childNodes[0]);
    यह.interval = setInterval(अद्यतन.गेम.क्षेत्र, 20);
    window.addEventListener('keydown', function (e) {
      मेरा_गेम_क्षेत्र.की = ई.की_कोड;
    })
    window.addEventListener('keyup', function (e) {
      myGameArea.key = false;
    })
  },
  साफ करना : function(){
    इस.context.clearRect(0, 0, इस.canvas.width, इस.canvas.height);
  }
}

इस तरह, यदि किसी दिशाकुंजी को दबाया जाता है, तो हम लाल बाक्स को चला सकते हैं:

उदाहरण

function updateGameArea() {
  myGameArea.clear();
  myGamePiece.speedX = 0;
  myGamePiece.speedY = 0;
  यदि (myGameArea.key और myGameArea.key == 37) {myGamePiece.speedX = -1; }
  यदि (myGameArea.key और myGameArea.key == 39) {myGamePiece.speedX = 1; }
  यदि (myGameArea.key और myGameArea.key == 38) {myGamePiece.speedY = -1; }
  यदि (myGameArea.key और myGameArea.key == 40) {myGamePiece.speedY = 1; }
  myGamePiece.newPos();
  myGamePiece.update();
}

अपने आप प्रयास करें

कई कुंजी दबाए जाने पर

यदि कई कुंजी एक साथ दबाई जाती हैं, तो क्या होगा?

उपरोक्त उदाहरण में, घटक केवल आड़ा या ऊर्ध्व-नीचे चल सकता है। अब हम चाहते हैं कि घटक दूरीवर्ती दिशा में भी चल सके।

के लिए माइगेमएरिया ऑब्जेक्ट बनाएं keys मानकीय आयत्त, और प्रत्येक दबाई हुई कुंजी के लिए एक एलिमेंट जोड़ें, और उसे इस मान से आयक्त करें trueतक true बना रहता है, जब तक कि कुछ भी कुंजी नहीं दबाई जाती, इस मान का एक आयत्त keyup इवेंट सुन्दर्धन के भीतर बदल जाता है false：

उदाहरण

वार्ता माइगेमएरिया = {
  कैनवस : डॉक्युमेंट.createElement("canvas"),
  शुरू : function() {
    इस.canvas.width = 480;
    इस.canvas.height = 270;
    इस.context = इस.canvas.getContext("2d");
    डॉक्युमेंट.बॉडी.insertBefore(इस.canvas, डॉक्युमेंट.बॉडी.childNodes[0]);
    यह.interval = setInterval(अद्यतन.गेम.क्षेत्र, 20);
    window.addEventListener('keydown', function (e) {
      myGameArea.keys = (myGameArea.keys || []);
      myGameArea.keys[e.keyCode] = true;
    })
    window.addEventListener('keyup', function (e) {
      myGameArea.keys[e.keyCode] = false;
    })
  },
  साफ करना : function(){
    इस.context.clearRect(0, 0, इस.canvas.width, इस.canvas.height);
  }
}
 function updateGameArea() {
  myGameArea.clear();
  myGamePiece.speedX = 0;
  myGamePiece.speedY = 0;
  यदि (myGameArea.keys और myGameArea.keys[37]) {myGamePiece.speedX = -1; }
  यदि (myGameArea.keys और myGameArea.keys[39]) {myGamePiece.speedX = 1; }
  यदि (myGameArea.keys और myGameArea.keys[38]) {myGamePiece.speedY = -1; }
  if (myGameArea.keys && myGameArea.keys[40]) {myGamePiece.speedY = 1; }
  myGamePiece.newPos();
  myGamePiece.update();
}

अपने आप प्रयास करें

माउस कर्सर को नियंत्रक के रूप में इस्तेमाल करें

अगर आप लाल चट्टान को माउस कर्सर के द्वारा नियंत्रित करना चाहते हैं, तो माइगेमएरिया ऑब्जेक्ट में एक मथड़ा जोड़ें, जो माउस कर्सर के x और y स्थानांकों को अद्यतन करता है:

उदाहरण

वार्ता माइगेमएरिया = {
  कैनवस : डॉक्युमेंट.createElement("canvas"),
  शुरू : function() {
    इस.canvas.width = 480;
    इस.canvas.height = 270;
    this.canvas.style.cursor = "none"; //hide the original cursor
    इस.context = इस.canvas.getContext("2d");
    डॉक्युमेंट.बॉडी.insertBefore(इस.canvas, डॉक्युमेंट.बॉडी.childNodes[0]);
    यह.interval = setInterval(अद्यतन.गेम.क्षेत्र, 20);
    window.addEventListener('mousemove', function (e) {
      माइगेमएरिया.x = e.pageX;
      माइगेमएरिया.y = e.pageY;
    })
  },
  साफ करना : function(){
    इस.context.clearRect(0, 0, इस.canvas.width, इस.canvas.height);
  }
}

तब हम लाल चट्टान को माउस कर्सर के समान चलाने के लिए सक्षम हो सकते हैं:

उदाहरण

function updateGameArea() {
  myGameArea.clear();
  if (myGameArea.x && myGameArea.y) {
    myGamePiece.x = myGameArea.x;
    myGamePiece.y = myGameArea.y;
  }
  myGamePiece.update();
}

अपने आप प्रयास करें

स्क्रीन टच करके गेम को नियंत्रित करें

हम अभी भी टचस्क्रीन पर लाल चट्टान को नियंत्रित कर सकते हैं。

इसके बाद माइगेमएरिया ऑब्जेक्ट में एक मथड़ा जोड़ें, जो स्क्रीन टच के x और y स्थानांकों का इस्तेमाल करता है:

उदाहरण

वार्ता माइगेमएरिया = {
  कैनवस : डॉक्युमेंट.createElement("canvas"),
  शुरू : function() {
    इस.canvas.width = 480;
    इस.canvas.height = 270;
    इस.context = इस.canvas.getContext("2d");
    डॉक्युमेंट.बॉडी.insertBefore(इस.canvas, डॉक्युमेंट.बॉडी.childNodes[0]);
    यह.interval = setInterval(अद्यतन.गेम.क्षेत्र, 20);
    window.addEventListener('touchmove', function (e) {
      myGameArea.x = e.touches[0].screenX;
      myGameArea.y = e.touches[0].screenY;
    })
  },
  साफ करना : function(){
    इस.context.clearRect(0, 0, इस.canvas.width, इस.canvas.height);
  }
}

तब, जब उपयोगकर्ता स्क्रीन पर टच करता है, हम लाल चट्टान को चलाने के लिए उसी कोड का इस्तेमाल कर सकते हैं जो माउस के कर्सर के समान है:

उदाहरण

function updateGameArea() {
  myGameArea.clear();
  if (myGameArea.x && myGameArea.y) {
    myGamePiece.x = myGameArea.x;
    myGamePiece.y = myGameArea.y;
  }
  myGamePiece.update();
}

अपने आप प्रयास करें

कैनवस पर नियंत्रक

हम अपने बटन को कैनवस पर चित्रित कर सकते हैं और उन्हें नियंत्रक के रूप में इस्तेमाल कर सकते हैं:

उदाहरण

function startGame() {
  myGamePiece = new component(30, 30, "red", 10, 120);
  myUpBtn = new component(30, 30, "blue", 50, 10);
  myDownBtn = new component(30, 30, "blue", 50, 70);
  myLeftBtn = new component(30, 30, "blue", 20, 40);
  myRightBtn = new component(30, 30, "blue", 80, 40);
  myGameArea.start();
}

एक नया फ़ंक्शन जोड़ें, जो किसी संघटक (इस उदाहरण में एक बटन) को क्लिक किया गया है या नहीं का निर्धारण करता है।

पहले माउस बटन का क्लिक करने के लिए इवेंट लिस्टनर जोड़ें (माउसडाउन और माउसअप）。तक्षिबिंदु स्क्रीन के लिए प्रतिक्रिया देने के लिए, इसके अलावा इवेंट लिस्टनर जोड़ना चाहिए कि क्या स्क्रीन को क्लिक किया गया है (टचस्टार्ट और टचएंड）：

उदाहरण

वार्ता माइगेमएरिया = {
  कैनवस : डॉक्युमेंट.createElement("canvas"),
  शुरू : function() {
    इस.canvas.width = 480;
    इस.canvas.height = 270;
    इस.context = इस.canvas.getContext("2d");
    डॉक्युमेंट.बॉडी.insertBefore(इस.canvas, डॉक्युमेंट.बॉडी.childNodes[0]);
    यह.interval = setInterval(अद्यतन.गेम.क्षेत्र, 20);
    विंडो.addEventListener('mousedown', function (e) {
      माइगेमएरिया.x = e.pageX;
      माइगेमएरिया.y = e.pageY;
    })
    विंडो.addEventListener('mouseup', function (e) {
      माइगेमएरिया.x = false;
      माइगेमएरिया.y = false;
    })
    विंडो.addEventListener('touchstart', function (e) {
      माइगेमएरिया.x = e.pageX;
      माइगेमएरिया.y = e.pageY;
    })
    विंडो.addEventListener('touchend', function (e) {
      माइगेमएरिया.x = false;
      माइगेमएरिया.y = false;
    })
  },
  साफ करना : function(){
    इस.context.clearRect(0, 0, इस.canvas.width, इस.canvas.height);
  }
}

अब माइगेमएरिया ऑब्जैक्ट को यह गुण है कि यह हमें क्लिक करने के लिए x और y सतह के निर्देशांक देता है। हम इन गुणों का उपयोग करके जाँच करते हैं कि क्या किसी अपने ब्लू बटन पर क्लिक किया गया है।

इस नए तरीके को क्लिक किया गयाजो कंपोनेंट कन्स्ट्रक्टर का एक तरीका है, जो यह जाँचता है कि कंपोनेंट को क्लिक किया गया है या नहीं。

इसके बाद updateGameArea तालिका में, यदि किसी नीले बटन पर क्लिक किया जाता है, तो हम आवश्यक कार्रवाई करेंगे:

उदाहरण

function component(width, height, color, x, y) {
  this.width = width;
  this.height = height;
  this.speedX = 0;
  this.speedY = 0;
  this.x = x;
  this.y = y;
  this.update = function() {
    ctx = myGameArea.context;
    ctx.fillStyle = color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
  }
  this.clicked = function() {
    var myleft = this.x;
    var myright = this.x + (this.width);
    var mytop = this.y;
    var mybottom = this.y + (this.height);
    var clicked = true;
    if ((mybottom < myGameArea.y) || (mytop > myGameArea.y) || (myright < myGameArea.x) || (myleft > myGameArea.x)) {
      clicked = false;
    }
    return clicked;
  }
}
function updateGameArea() {
  myGameArea.clear();
  if (myGameArea.x && myGameArea.y) {
    if (myUpBtn.clicked()) {
      myGamePiece.y -= 1;
    }
    if (myDownBtn.clicked()) {
      myGamePiece.y += 1;
    }
    if (myLeftBtn.clicked()) {
      myGamePiece.x += -1;
    }
    if (myRightBtn.clicked()) {
      myGamePiece.x += 1;
    }
  }
  myUpBtn.update();
  myDownBtn.update();
  myLeftBtn.update();
  myRightBtn.update();
  myGamePiece.update();
}

अपने आप प्रयास करें