گیم کنٹرولر

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

掌控一切

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

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

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

ਵਿੱਚ 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();
  ماگایمپیسی اوپڈیٹ();
}
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', function (e) {
      myGameArea.key = e.keyCode;
    })
    ਵਿੰਡੋਜ਼ ਐਨਡੋਨੀਅਰ ਐਡਵੈਂਚਰ 'keyup', function (e) {
      ਮੇਂਗੇ ਗੇਮ ਏਰੀਆ ਕੀ = ਫਾਲਸ;
    })
  },
  clear : function(){
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  }
}

ਇਸ ਤਰ੍ਹਾਂ, ਜੇਕਰ ਦਿਸ਼ਾ ਕੀਜ਼ ਵਿੱਚੋਂ ਕਿਸੇ ਨੂੰ ਦਬਾਇਆ ਜਾਵੇਗਾ, ਤਾਂ ਲਾਲ ਚੌਕੇ ਚਲਾਇਆ ਜਾਵੇਗਾ:

ਮਿੱਥੀ

function updateGameArea() {
  myGameArea.clear();
  ਮੇਂਗੇ ਗੇਮ ਪੀਸ ਸਪੀਡਏਕਸ = 0;
  ਮੇਂਗੇ ਗੇਮ ਪੀਸ ਸਪੀਡਵਾਈ = 0;
  if (ਮੇਂਗੇ ਗੇਮ ਏਰੀਆ ਕੀ ਅਤੇ ਮੇਂਗੇ ਗੇਮ ਏਰੀਆ ਕੀ == 37) {ਮੇਂਗੇ ਗੇਮ ਪੀਸ ਸਪੀਡਏਕਸ = -1; }
  if (ਮੇਂਗੇ ਗੇਮ ਏਰੀਆ ਕੀ ਅਤੇ ਮੇਂਗੇ ਗੇਮ ਏਰੀਆ ਕੀ == 39) {ਮੇਂਗੇ ਗੇਮ ਪੀਸ ਸਪੀਡਏਕਸ = 1; }
  if (ਮੇਂਗੇ ਗੇਮ ਏਰੀਆ ਕੀ ਅਤੇ ਮੇਂਗੇ ਗੇਮ ਏਰੀਆ ਕੀ == 38) {ਮੇਂਗੇ ਗੇਮ ਪੀਸ ਸਪੀਡਵਾਈ = -1; }
  if (ਮੇਂਗੇ ਗੇਮ ਏਰੀਆ ਕੀ ਅਤੇ ਮੇਂਗੇ ਗੇਮ ਏਰੀਆ ਕੀ == 40) {ਮੇਂਗੇ ਗੇਮ ਪੀਸ ਸਪੀਡਵਾਈ = 1; }
  myGamePiece.newPos();
  ماگایمپیسی اوپڈیٹ();
}

آپ خود کوشاں

ਕਈ ਕੀਜ਼ ਦਬਾਇਆ ਹੋਏ

ਕਈ ਕੀਜ਼ ਦਬਾਇਆ ਹੋਏ ਹੋਣ ਤਾਂ ਕੀ ਹੋਵੇਗਾ?

ਉੱਤੇ ਉਦਾਹਰਣ ਵਿੱਚ, ਕੰਪੋਨੈਂਟ ਸਿਰਫ਼ ਹੌਰੀਜ਼ਨਟਲ ਜਾਂ ਵਰਤੀਕੀ ਚਲਾਉਣ ਵਾਲਾ ਸੀ। ਹੁਣ ਅਸੀਂ ਚਾਹੁੰਦੇ ਹਾਂ ਕਿ ਕੰਪੋਨੈਂਟ ਦਾਇਰੇ ਵਿੱਚ ਵੀ ਚਲਾਇਆ ਜਾਵੇ

ਲਈ myGameArea ਇਕ ਆਬਜੈਕਟ ਬਣਾਇਆ ਜਾਵੇਗਾ ਕੀਜ਼ ਇਕ ਸ਼ਾਇਰ ਵਿੱਚ ਮੌਜੂਦ ਕਿਸੇ ਕੀ ਨੂੰ ਦਬਾਇਆ ਗਿਆ ਹੈ, ਉਸ ਲਈ ਇਕ ਈਲੀਮੈਂਟ ਜੋੜ ਦੇਵੇਗਾ ਅਤੇ ਉਸ ਨੂੰ ਮੁੱਲ ਟਰੂਤੱਕ ਇਹ ਕੀ ਦਬਾਇਆ ਹੋਇਆ ਹੈ, ਇਹ ਮੁੱਲ true ਰਹੇਗਾ 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', function (e) {
      ਮੇਂਗੇ ਗੇਮ ਏਰੀਆ ਕੀਜ਼ = (ਮੇਂਗੇ ਗੇਮ ਏਰੀਆ ਕੀਜ਼ || []);
      ਵਿੰਡੋਜ਼ ਐਨਡੋਨੀਅਰ ਕੀਵੋਕੇ ਮੇਂਗੇ ਗੇਮ ਏਰੀਆ ਕੀਜ਼[ਈ] = ਟਰੂ;
    })
    ਵਿੰਡੋਜ਼ ਐਨਡੋਨੀਅਰ ਐਡਵੈਂਚਰ 'keyup', function (e) {
      ਵਿੰਡੋਜ਼ ਐਨਡੋਨੀਅਰ ਕੀਵੋਕੇ ਮੇਂਗੇ ਗੇਮ ਏਰੀਆ ਕੀਜ਼[ਈ] = ਫਾਲਸ;
    })
  },
  clear : function(){
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  }
}
 function updateGameArea() {
  myGameArea.clear();
  ਮੇਂਗੇ ਗੇਮ ਪੀਸ ਸਪੀਡਏਕਸ = 0;
  ਮੇਂਗੇ ਗੇਮ ਪੀਸ ਸਪੀਡਵਾਈ = 0;
  if (ਮੇਂਗੇ ਗੇਮ ਏਰੀਆ ਕੀਜ਼ ਅਤੇ ਮੇਂਗੇ ਗੇਮ ਏਰੀਆ ਕੀਜ਼[37]) {ਮੇਂਗੇ ਗੇਮ ਪੀਸ ਸਪੀਡਏਕਸ = -1; }
  if (ਮੇਂਗੇ ਗੇਮ ਏਰੀਆ ਕੀਜ਼ ਅਤੇ ਮੇਂਗੇ ਗੇਮ ਏਰੀਆ ਕੀਜ਼[39]) {ਮੇਂਗੇ ਗੇਮ ਪੀਸ ਸਪੀਡਏਕਸ = 1; }
  if (ਮੇਂਗੇ ਗੇਮ ਏਰੀਆ ਕੀਜ਼ ਅਤੇ ਮੇਂਗੇ ਗੇਮ ਏਰੀਆ ਕੀਜ਼[38]) {ਮੇਂਗੇ ਗੇਮ ਪੀਸ ਸਪੀਡਵਾਈ = -1; }
  if (myGameArea.keys && myGameArea.keys[40]) {myGamePiece.speedY = 1; }
  myGamePiece.newPos();
  ماگایمپیسی اوپڈیٹ();
}

آپ خود کوشاں

ਮਾਉਸ ਕੁਰਸਰ ਨੂੰ ਕੰਟਰੋਲਰ ਵਜੋਂ ਵਰਤੋ

ਅਗਰ ਤੁਸੀਂ ਮਾਉਸ ਕੁਰਸਰ ਨੂੰ ਕੰਟਰੋਲਰ ਵਜੋਂ ਵਰਤਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ myGameArea ਆਪਣੇ ਆਪਣੇ ਮੰਥਨ ਵਿੱਚ ਇੱਕ ਮੱਥਾ ਜੋੜੋ ਕਿ ਮਾਉਸ ਕੁਰਸਰ ਦੇ x ਅਤੇ y ਨਿਰਦੇਸ਼ਾਂ ਨੂੰ ਅੱਪਡੇਟ ਕਰੇ:

ਮਿੱਥੀ

var myGameArea = {
  canvas : document.createElement("canvas"),
  start : function() {
    this.canvas.width = 480;
    this.canvas.height = 270;
    this.canvas.style.cursor = "none"; //hide the original cursor
    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;
  }
  ماگایمپیسی اوپڈیٹ();
}

آپ خود کوشاں

ਸਕ੍ਰੀਨ 'ਤੇ ਟੱਚ ਕਰ ਕੇ ਗੇਮ ਕੰਟਰੋਲ ਕਰੋ

ਅਸੀਂ ਟੱਚ ਸਕ੍ਰੀਨ 'ਤੇ ਲਾਲ ਚੌਕੇ ਨੂੰ ਕੰਟਰੋਲ ਕਰ ਸਕਦੇ ਹਾਂ。

ਵਿੱਚ myGameArea ਆਪਣੇ ਆਪਣੇ ਮੰਥਨ ਵਿੱਚ ਇੱਕ ਮੱਥਾ ਜੋੜੋ, ਜਿਸ ਵਿੱਚ ਸਕ੍ਰੀਨ ਟੱਚ ਸਥਾਨ ਦੇ x ਅਤੇ y ਨਿਰਦੇਸ਼ਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ:

ਮਿੱਥੀ

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;
  }
  ماگایمپیسی اوپڈیٹ();
}

آپ خود کوشاں

ਕੈਂਵਾਸ 'ਤੇ ਕੰਟਰੋਲਰ

ਅਸੀਂ ਕੈਂਵਾਸ 'ਤੇ ਆਪਣੇ ਬਟਨ ਬਣਾ ਸਕਦੇ ਹਾਂ ਅਤੇ ਉਨ੍ਹਾਂ ਨੂੰ ਕੰਟਰੋਲਰ ਵਜੋਂ ਵਰਤ ਸਕਦੇ ਹਾਂ:

ਮਿੱਥੀ

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 ਆਪਣੇ ਆਪ ਵਿੱਚ ਸਮਾਂ ਲੈਂਦਾ ਹੈ ਜੋ ਕਿ ਸਾਨੂੰ ਕਲਿੱਕ ਕੀਤੇ ਗਏ x ਅਤੇ y ਸਕੋਰਸ਼ਨ ਸੂਚਨਾ ਦਿੰਦੇ ਹਨ। ਅਸੀਂ ਇਹ ਸਮਾਂ ਲੈਂਦੇ ਹਾਂ ਤਾਂ ਕਿ ਅਸੀਂ ਆਪਣੇ ਕਿਸੇ ਨੀਲੇ ਬਟਨ ਉੱਤੇ ਕਲਿੱਕ ਕੀਤਾ ਗਿਆ ਹੈ ਕਿ ਨਹੀਂ ਚੈਕ ਕਰ ਸਕੀਏ。

ਇਹ ਨਵਾਂ ਤਰੀਕਾ ਕਿਹਾ ਜਾਂਦਾ ਹੈ 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();
  مای لیفبن اوپڈیٹ();
  مای رائٹبن اوپڈیٹ();
  ماگایمپیسی اوپڈیٹ();
}

آپ خود کوشاں