Viyombo cha Kijana

Mambo ya masomo:

Ingiza ukuta juu ya eneo la kina kwa ukuta juu wa rangi ya kichwa chake:

Ingiza komponenti

Kwa kufanya kichwa cha kilechi cha hii kina, ina uwezo wa kuingiza komponenti katika eneo la kina.komponenti (component)tumekuja kuzia kichwa cha kwanza, kilichoitwa myGamePiece:

mwigiza

var myGamePiece;
function startGame() {
  myGameArea.start();
  myGamePiece = new component(30, 30, "red", 10, 120);
}
function component(width, height, color, x, y) {
  this.width = width;
  this.height = height;
  this.x = x;
  this.y = y;
  ctx = myGameArea.context;
  ctx.fillStyle = color;
  ctx.fillRect(this.x, this.y, this.width, this.height);
}

Jifunze Kwa Basi

Yale mifumo ina jicho na matumizi ya uwezo na uharibifu.

Injia

Kwa kuweza kufikia kwa kufanya mawasiliano ya kina, tumeweka kumengeneza kila sekunde 50 mara, hivyo ni kama ikifanyika katika filamu.

首先，创建一个名为 updateGameArea() 的新函数。

在 myGameArea 对象中，添加一个间隔，该间隔将每 20 毫秒运行一次 updateGameArea() 函数（每秒 50 次）。再添加一个名为 clear() 的函数，用于清除整个画布。

在 component 构造函数中，添加了一个名为 update() 的函数，用于处理组件的绘制。

updateGameArea() 函数调用 clear() 和 update() 方法。

结果是组件每秒会被绘制和清除 50 次：

mwigiza

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);
  },
  clear : function() {
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  }
}
function component(width, height, color, x, y) {
  this.width = width;
  this.height = height;
  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);
  }
}
function updateGameArea() {
  myGameArea.clear();
  myGamePiece.update();
}

Jifunze Kwa Basi

让它动起来

为了证明红色方块每秒被绘制 50 次，每次更新游戏区域时，我们都会将 x 位置（水平）更改一个像素：

mwigiza

function updateGameArea() {
  myGameArea.clear();
  myGamePiece.x += 1;
  myGamePiece.update();
}

Jifunze Kwa Basi

为什么要清理游戏区？

似乎没有必要在每次更新时清理游戏区域。然而，如果我们省略 clear() 方法，组件的所有移动都会留下它在最后一帧中的位置的痕迹：

mwigiza

function updateGameArea() {
  // myGameArea.clear();
  myGamePiece.x += 1;
  myGamePiece.update();
}

Jifunze Kwa Basi

Kufanyia uharibifu ya ukurasa

Wewe unaweza kusimamia ukurasa na uzo wa vitu:

mwigiza

Kujua 10x140 pixeli ya ukurasa:

function startGame() {
  myGameArea.start();
  myGamePiece = new component(140, 10, "red", 10, 120);
}

Jifunze Kwa Basi

Kufanyia uharibifu ya rangi

Wewe unaweza kusimamia rangi ya vitu:

mwigiza

function startGame() {
  myGameArea.start();
  myGamePiece = new component(30, 30, "blue", 10, 120);
}

Jifunze Kwa Basi

Wewe unaweza kutumia ujumbe wa rangi zingine, kama ni heksadecimal, rgb au rgba:

mwigiza

function startGame() {
  myGameArea.start();
  myGamePiece = new component(30, 30, "rgba(0, 0, 255, 0.5)", 10, 120);
}

Jifunze Kwa Basi

Kufanyia uharibifu

Tunatumia koordinati ya x na y kufikiria vitu kwenye eneo la kigameo.

Koordinati ya eneo la kichwa cha chini ya pili ni (0,0).

Tukua kusikia kwenye eneo la kigameo chini hivi inaweza kuona koordinati ya x na y:

Wewe unaweza kuwanisha vitu kwenye eneo la kigameo kwa ujumbe:

mwigiza

function startGame() {
  myGameArea.start();
  myGamePiece = new component(30, 30, "red", 2, 2);
}

Jifunze Kwa Basi

vitu vingi

Wewe unaweza kuwanisha vitu kwenye eneo la kigameo kwa ujumbe:

mwigiza

var redGamePiece, blueGamePiece, yellowGamePiece;
function startGame() {
  redGamePiece = new component(75, 75, "red", 10, 10);
  yellowGamePiece = new component(75, 75, "yellow", 50, 60);
  blueGamePiece = new component(75, 75, "blue", 10, 110);
  myGameArea.start();
}
function updateGameArea() {
  myGameArea.clear();
  redGamePiece.update();
  yellowGamePiece.update();
  blueGamePiece.update();
}

Jifunze Kwa Basi

kufanya kufikia vitu

ingia kufanya kwa vitu tatu kwa njia tofauti:

mwigiza

function updateGameArea() {
  myGameArea.clear();
  redGamePiece.x += 1;
  yellowGamePiece.x += 1;
  yellowGamePiece.y += 1;
  blueGamePiece.x += 1;
  blueGamePiece.y -= 1;
  redGamePiece.update();
  yellowGamePiece.update();
  blueGamePiece.update();
}

Jifunze Kwa Basi