గేమ్ కంపోనెంట్స్

గేమ్ ఏరియాకు రెడ్ బ్లాక్ను జోడించండి:

కాంపోనెంట్ను జోడించండి

కాంపోనెంట్ కన్స్ట్రక్టర్ను సృష్టించండి, ఇది మీరు కాంపోనెంట్ను గేమ్ ఏరియాకు జోడించడానికి అనుమతిస్తుంది.

ఈ ఆధార కన్స్ట్రక్టర్ అని పిలుస్తారుకాంపోనెంట్ (component)మేము మొదటి కాంపోనెంట్ని సృష్టించాము, అది myGamePiece:

నమూనా

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);
}

亲自试一试

ఈ కాంపోనెంట్లు వాటి రూపం మరియు చర్యలను నియంత్రించే లక్షణాలు మరియు పద్ధతులు కలిగి ఉన్నాయి.

ఫ్రేమ్

ఆటను ప్రతికాలికి చర్యాశీలమైంది చేయడానికి, మేము ప్రతికాలికి 50 సార్లు ప్రదర్శించడానికి ఉద్దేశించాము, ఇది చలనచిత్రాలలో ఫ్రేమ్స్ వలె ఉంటుంది.

మొదటగా, ఒక నామక ఫంక్షన్ ని జోడించడం జరుగుతుంది updateGameArea() ను జోడించడం జరుగుతుంది.

లో జోడించబడింది. myGameArea మీగా గేమ్ ఏరియా లో జోడించడం జరుగుతుంది. updateGameArea() ఫంక్షన్ ని జోడించడం జరుగుతుంది (ప్రతి సెకన్లో 50 సార్లు). మరియు మరొక నామక ఫంక్షన్ ని జోడించడం జరుగుతుంది clear(); ఫంక్షన్ ని జోడించడం జరుగుతుంది, దీనివల్ల మొత్తం కాంవాస్ ను శుభ్రపరచబడుతుంది.

లో జోడించబడింది. component కాంపోనెంట్ నామక ఫంక్షన్ ని కాంపోనెంట్ లో జోడించడం జరుగుతుంది. update() ఫంక్షన్ యొక్క ఉపయోగం, దీనివల్ల కాంపోనెంట్ చిత్రం చేయబడుతుంది.

updateGameArea() ఫంక్షన్ కాల్స్ clear(); మరియు update() పద్ధతి.

ఫలితంగా కాంపోనెంట్ ప్రతి సెకన్లో 50 సార్లు చిత్రం చేయబడుతుంది మరియు శుభ్రపరచబడుతుంది:

నమూనా

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

亲自试一试

దానిని కదిలించండి

ఎరీన్ బ్లాక్ ప్రతి సెకన్లో 50 సార్లు చిత్రం చేయబడుతుంది అని నిరూపించడానికి, ప్రతి నవీకరణకు గాను మానవ స్థానాన్ని (హోరిజంటల్) ఒక పిక్సెల్ మార్పు చేస్తాము:

నమూనా

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

亲自试一试

గేమ్ ఏరియాను శుభ్రపరచాలి ఎందుకు?

ప్రతి నవీకరణకు గాను గేమ్ ఏరియాను శుభ్రపరచడానికి అవసరం లేదు. అయితే, మనం విస్మరించినట్లయితే మనం శుభ్రపరచబడదు: clear(); పద్ధతి, కాంపోనెంట్ యొక్క అన్ని చలనాలు చివరి ఫ్రేమ్ లో ఉన్న స్థానాన్ని మార్పు చేస్తాయి:

నమూనా

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

亲自试一试

పరిమాణం మార్చుము

మీరు కాంపోనెంట్ల వెడల్పు మరియు పొడవును నియంత్రించవచ్చు:

నమూనా

10x140 పిక్సెల్స్ రెండును సృష్టించుము:

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

亲自试一试

రంగు మార్చుము

మీరు కాంపోనెంట్ల రంగును నియంత్రించవచ్చు:

నమూనా

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

亲自试一试

మీరు ఇతర రంగు విలువలను కూడా ఉపయోగించవచ్చు, ఉదాహరణకు హెక్సడెసిమల్, rgb లేదా rgba:

నమూనా

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

亲自试一试

స్థానం మార్చుము

మేము x మరియు y కోఆర్డినేట్లను ఉపయోగించి కాంపోనెంట్లను గేమ్ ఏరియాపై స్థానించడానికి ఉపయోగించబడుతుంది.

కాంవాస్ యొక్క ఎడమ పైకి కోఆర్డినేట్ (0,0) ఉంటుంది.

క్రింది గేమ్ ఏరియాపై మౌస్ ను ఆకర్షించినప్పుడు దాని x మరియు y కోఆర్డినేట్లను చూడవచ్చు:

మీరు గేమ్ ఏరియాలో ఏదైనా స్థానంలో కాంపోనెంట్లను చేర్చవచ్చు:

నమూనా

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

亲自试一试

పలు కాంపోనెంట్లు

మీరు గేమ్ ఏరియాలో ఏదైనా సంఖ్యలో కాంపోనెంట్లను చేర్చవచ్చు:

నమూనా

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

亲自试一试

కదిలుతున్న కాంపోనెంట్

మూడు కాంపోనెంట్లను వివిధ దిశలుగా కదిలించుట చేయుము:

నమూనా

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

亲自试一试