游戏控制器

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

掌控一切

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

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

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

లో component 构造函数中创建两个新属性，并将它们命名为 speedX మరియు speedY。这些属性被用作速度指示器。

లో component 构造函数中添加一个名为 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() {
  myGamePiece.speedY -= 1;
}
function movedown() {
  myGamePiece.speedY += 1;
}
function moveleft() {
  myGamePiece.speedX -= 1;
}
function moveright() {
  myGamePiece.speedX += 1;
}
</script>
<button onclick="moveup()">UP</button>
<button onclick="movedown()">DOWN</button>
<button onclick="moveleft()">LEFT</button>
<button onclick="moveright()">RIGHT</button>

亲自试一试

చలనం ఆగించు

అవసరమైనప్పుడు, బటన్ను వదిలివేసినప్పుడు రెడ్ బ్లాక్ నిలిచిపోయేలా చేయవచ్చు.

వేగ సూచికను 0 చేయే ఫంక్షన్ను జోడించండి.

సాధారణ స్క్రీన్ మరియు టచ్ స్క్రీన్ గా అనుకూలీకరించడానికి, ఈ రెండు పరికరాలకు మేము కోడ్ని జోడిస్తాము:

సందర్భం

function stopMove() {
  మై గేమ్ పీస్ స్పీడ్ కై = 0;
  మై గేమ్ పీస్ స్పీడ్ వై = 0;
}
</script>
<button onmousedown="moveup()" onmouseup="stopMove()" ontouchstart="moveup()">UP</button>
<button onmousedown="movedown()" onmouseup="stopMove()" ontouchstart="movedown()">DOWN</button>
<button onmousedown="moveleft()" onmouseup="stopMove()" ontouchstart="moveleft()">LEFT</button>
<button onmousedown="moveright()" onmouseup="stopMove()" ontouchstart="moveright()">RIGHT</button>

亲自试一试

కీబోర్డ్ కాక్ట్రోలర్ గా

మనం రెడ్ బ్లాక్ ను కీబోర్డు యొక్క దిశా కీలతో నియంత్రించవచ్చు.

ఒక మార్గదర్శక పద్ధతిని సృష్టించండి మరియు దానిని కీని నొక్కినప్పుడు పరిశీలించండి myGameArea ఆబ్జెక్ట్ యొక్క కీ అంశాలను అమర్చుకుంటారు కీ కోడ్. కీని వదిలివేయినప్పుడు, దానిని కీ అంశాలను అమర్చుకుంటారు ఫాల్స్అనుకున్న మూలకం కోసం కాదు:

సందర్భం

var myGameArea = {
  canvas : document.createElement("canvas"),
  start : function() {
    this.canvas.width = 480;
    this.canvas.height = 270;
    this.context = this.canvas.getContext("2d");
    document.body.insertBefore(this.canvas, document.body.childNodes[0]);
    this.interval = setInterval(updateGameArea, 20);
    విండో ఏడ్రీన్స్ లుప్ ('keydown', ఫంక్షన్ (ఈ కీ కోడ్ అనున్నది) {
      myGameArea.key = e.keyCode;
    })
    విండో ఏడ్రీన్స్ లుప్ ('keyup', ఫంక్షన్ (ఈ కీ కోడ్ అనున్నది) {
      myGameArea.key = false;
    })
  },
  clear : function(){
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  }
}

这样，如果按下方向键之一，我们就可以移动红色方块：

సందర్భం

function updateGameArea() {
  myGameArea.clear();
  మై గేమ్ పీస్ స్పీడ్ కై = 0;
  మై గేమ్ పీస్ స్పీడ్ వై = 0;
  if (myGameArea.key && myGameArea.key == 37) {myGamePiece.speedX = -1; }
  ఇఫ్ (మై గేమ్ ఏరియా కీ మరియు మై గేమ్ ఏరియా కీ == 39) {మై గేమ్ పీస్ స్పీడ్ కై = 1; }
  ఇఫ్ (మై గేమ్ ఏరియా కీ మరియు మై గేమ్ ఏరియా కీ == 38) {మై గేమ్ పీస్ స్పీడ్ వై = -1; }
  ఇఫ్ (మై గేమ్ ఏరియా కీ మరియు మై గేమ్ ఏరియా కీ == 40) {మై గేమ్ పీస్ స్పీడ్ వై = 1; }
  myGamePiece.newPos();
  myGamePiece.update();
}

亲自试一试

మరియు దిశానిరోధి అనున్న కీస్ ని నుంచి ఒక మెంబర్ చేర్చబడుతుంది మరియు దానికి విలువ చేస్తారు అని చేస్తారు:

మరియు దిశానిరోధి అనున్న కీస్ ని నుంచి ఒక మెంబర్ చేర్చబడుతుంది మరియు దానికి విలువ చేస్తారు అని చేస్తారు:

మరియు దిశానిరోధి అనున్న కీస్ ని నుంచి ఒక మెంబర్ చేర్చబడుతుంది మరియు దానికి విలువ చేస్తారు అని చేస్తారు:

పైన ఉన్న ఉదాహరణలో కంపోనెంట్ కేవలం అడుగున లేదా అడుగులో కేవలం చెల్లిస్తుంది. ఇప్పుడు మేము కంపోనెంట్ ని కూడా దిశానిరోధి చేద్దామని కోరుకున్నాము. myGameArea కీస్ అనే అర్థం కలిగిన ప్రతి దిశానిరోధి అనున్న కీని నుంచి ఒక మెంబర్ చేర్చబడుతుంది మరియు దానికి విలువ చేస్తారు అని చేస్తారు: కీస్ కీస్ అనే అర్థం కలిగిన ప్రతి దిశానిరోధి అనున్న కీని నుంచి ఒక మెంబర్ చేర్చబడుతుంది మరియు దానికి విలువ చేస్తారు అని చేస్తారు: ట్రూట్రూ ఉంటుంది వరకు కీని నుంచి విడిపడకుండా ఉంటుంది అని చేస్తారు అని చేస్తారు: keyup ఇవ్వబడిన ఫంక్షన్ లో చేర్చబడింది అని చేస్తారు: ఫాల్స్అనుకున్న మూలకం కోసం కాదు:

సందర్భం

var myGameArea = {
  canvas : document.createElement("canvas"),
  start : function() {
    this.canvas.width = 480;
    this.canvas.height = 270;
    this.context = this.canvas.getContext("2d");
    document.body.insertBefore(this.canvas, document.body.childNodes[0]);
    this.interval = setInterval(updateGameArea, 20);
    విండో ఏడ్రీన్స్ లుప్ ('keydown', ఫంక్షన్ (ఈ కీ కోడ్ అనున్నది) {
      మై గేమ్ ఏరియా కీస్ = (మై గేమ్ ఏరియా కీస్ లేకపోతే []);
      విండో ఏడ్రీన్స్ ఈ కీ కోడ్ అనున్నది తప్పనిసరిగా ట్రూ చేస్తారు;
    })
    విండో ఏడ్రీన్స్ లుప్ ('keyup', ఫంక్షన్ (ఈ కీ కోడ్ అనున్నది) {
      విండో ఏడ్రీన్స్ ఈ కీ కోడ్ అనున్నది తప్పనిసరిగా ఫాల్స్ చేస్తారు;
    })
  },
  clear : function(){
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  }
}
 function updateGameArea() {
  myGameArea.clear();
  మై గేమ్ పీస్ స్పీడ్ కై = 0;
  మై గేమ్ పీస్ స్పీడ్ వై = 0;
  ఇఫ్ (మై గేమ్ ఏరియా కీస్ మరియు మై గేమ్ ఏరియా కీస్[37]) {మై గేమ్ పీస్ స్పీడ్ కై = -1; }
  ఇఫ్ (మై గేమ్ ఏరియా కీస్ మరియు మై గేమ్ ఏరియా కీస్[39]) {మై గేమ్ పీస్ స్పీడ్ కై = 1; }
  ఇఫ్ (మై గేమ్ ఏరియా కీస్ మరియు మై గేమ్ ఏరియా కీస్[38]) {మై గేమ్ పీస్ స్పీడ్ వై = -1; }
  if (myGameArea.keys && myGameArea.keys[40]) {myGamePiece.speedY = 1; }
  myGamePiece.newPos();
  myGamePiece.update();
}

亲自试一试

మౌస్ క్యార్సర్ను కంట్రోలర్గా వాడండి

ఎరుపు కచ్చును మౌస్ క్యార్సర్ ద్వారా నియంత్రించడానికి కావాలంటే మీరు దయచేసి ఇక్కడ ఉంచండి: myGameArea అనేకమైన కోడ్లలో మౌస్ క్యార్సర్ స్థానాన్ని నవీకరించే మార్గాన్ని చేయవచ్చు:

సందర్భం

var myGameArea = {
  canvas : document.createElement("canvas"),
  start : function() {
    this.canvas.width = 480;
    this.canvas.height = 270;
    this.canvas.style.cursor = "none"; //మూల క్యార్సర్ను కళ్ళబడజేయండి
    this.context = this.canvas.getContext("2d");
    document.body.insertBefore(this.canvas, document.body.childNodes[0]);
    this.interval = setInterval(updateGameArea, 20);
    window.addEventListener('mousemove', function (e) {
      myGameArea.x = e.pageX;
      myGameArea.y = e.pageY;
    })
  },
  clear : function(){
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  }
}

అప్పుడు, మౌస్ క్యార్సర్ను వాడినప్పుడు ఎరుపు కచ్చును కదిలించవచ్చు:

సందర్భం

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

亲自试一试

స్క్రీన్ను టచ్ చేయడం ద్వారా గేమ్ను నియంత్రించండి

మేము కూడా టచ్ స్క్రీన్పై ఎరుపు కచ్చును నియంత్రించవచ్చు.

లో myGameArea అనేకమైన కోడ్లలో స్క్రీన్ టచ్ స్థానాన్ని వాడే ఒక మార్గాన్ని చేయవచ్చు:

సందర్భం

var myGameArea = {
  canvas : document.createElement("canvas"),
  start : function() {
    this.canvas.width = 480;
    this.canvas.height = 270;
    this.context = this.canvas.getContext("2d");
    document.body.insertBefore(this.canvas, document.body.childNodes[0]);
    this.interval = setInterval(updateGameArea, 20);
    window.addEventListener('touchmove', function (e) {
      myGameArea.x = e.touches[0].screenX;
      myGameArea.y = e.touches[0].screenY;
    })
  },
  clear : function(){
    this.context.clearRect(0, 0, this.canvas.width, this.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();
}

ఒక కొత్త ఫంక్షన్ జోడించండి, దీనిలో కాంపోనెంట్ (ఈ ఉదాహరణలో బటన్) క్లిక్ చేయబడిందా అని నిర్ధారించడానికి.

మొదటగా, మౌస్ బటన్ను క్లిక్ చేయబడిందా అని తనిఖీ చేయడానికి ఇవెంట్ లిస్టెనర్స్ జోడించాలి (mousedown మరియు mouseup）。టచ్‌స్క్రీన్‌ని ఎదుర్కోవడానికి, స్క్రీన్ క్లిక్ చేయబడిందా అని తనిఖీ చేయడానికి ఇవ్వబడిన ఇవెంట్ లిస్టెనర్స్ జోడించాలి (touchstart మరియు touchend）：

సందర్భం

var myGameArea = {
  canvas : document.createElement("canvas"),
  start : function() {
    this.canvas.width = 480;
    this.canvas.height = 270;
    this.context = this.canvas.getContext("2d");
    document.body.insertBefore(this.canvas, document.body.childNodes[0]);
    this.interval = setInterval(updateGameArea, 20);
    window.addEventListener('mousedown', function (e) {
      myGameArea.x = e.pageX;
      myGameArea.y = e.pageY;
    })
    window.addEventListener('mouseup', function (e) {
      myGameArea.x = false;
      myGameArea.y = false;
    })
    window.addEventListener('touchstart', function (e) {
      myGameArea.x = e.pageX;
      myGameArea.y = e.pageY;
    })
    window.addEventListener('touchend', function (e) {
      myGameArea.x = false;
      myGameArea.y = false;
    })
  },
  clear : function(){
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  }
}

ఇప్పుడు myGameArea వస్తువుకి మాకు క్లిక్ చేసిన ఎక్స్ మరియు వై కోఆర్డినేట్స్ ను చెప్పే గుణం ఉంది. ఈ గుణాలను వాడి మాకు కొన్ని నీలపు బటన్లపై క్లిక్ చేయబడిందా అని తనిఖీ చేస్తాము。

ఈ కొత్త మాధ్యమానికి clickedఇది component కన్స్ట్రక్టర్ యొక్క ఒక మాధ్యమం, ఇది కాంపోనెంట్ ను క్లిక్ చేయబడిందా లేదో తనిఖీ చేస్తుంది。

లో 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();
}

亲自试一试