گیم کینواس

ਅਧਿਐਨ ਸਿਫਾਰਸ਼:

ایچ تی ایم ایل کینواس

<canvas> HTML <canvas> ਐਲੀਮੈਂਟ ਵਾਲੇ HTML ਵਿੱਚ ਸਿੱਧੇ ਤੌਰ 'ਤੇ ਲੰਬੇ ਤੱਤ ਹੁੰਦੇ ਹਨ:

<canvas> ਐਲੀਮੈਂਟ ਨੇ ਗੇਮ ਬਣਾਉਣ ਲਈ ਸਾਰੀਆਂ ਸਹੂਲਤਾਂ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ。

ਜ਼ਰੂਰਤ ਹੈ ਕਿ ਤੁਸੀਂ <canvas> ਉੱਤੇ ਚਿੱਤਰਨ, ਲਿਖਣ, ਚਿੱਤਰ ਜੋੜਨ ਆਦਿ ਕਰਨਗੇ。

.getContext("2d")

<canvas> ਐਲੀਮੈਂਟ ਦਾ ਬੁਣਿਆਮੀ ਆਬਜੈਕਟ ਹੈ ਜਿਸ ਨੂੰ getContext("2d") ਆਬਜੈਕਟ ਪ੍ਰਿੰਟ ਕਰਨ, ਲਿਖਣ, ਚਿੱਤਰ ਜੋੜਨ ਆਦਿ ਲਈ ਮੈਥਾਡ ਅਤੇ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ。

ਸਾਡੇ Canvas ਟੂਰ ਵਿੱਚ ਸਿੱਖੋ <canvas> ਐਲੀਮੈਂਟ ਅਤੇ getContext("2d") ਆਬਜੈਕਟ ਦੀਆਂ ਹੋਰ ਜਾਣਕਾਰੀ

ਤਾਂ ਸ਼ੁਰੂ ਕਰੋ

ਗੇਮ ਬਣਾਉਣ ਲਈ ਪਹਿਲਾਂ ਗੇਮ ਖੇਤਰ ਬਣਾਓ ਅਤੇ ਚਿੱਤਰਨ ਲਈ ਤਿਆਰ ਹੋਓ:

ਇੰਸਟੈਂਸ

function startGame() {
  myGameArea.start();
}
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]);
  }
}

ਸਿੱਧੇ ਮੈਂਟਰੀ ਕਰੋ

ਇਸ ਟਿੰਕਰਾਰੀ ਦੇ ਬਾਅਦ ਹਿੱਸੇ ਵਿੱਚ، ਆਬਜੈਕਟ myGameArea ਹੋਰ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਅਤੇ ਮੈਥਾਡ ਪ੍ਰਾਪਤ ਕਰਨਗੇ。

ਫੰਕਸ਼ਨ startGame() ਕਿਰਤ myGameArea عنصر کا start() میتھد کا

start() میتھد ایک <canvas> عنصر، اور پہلے چائلڈ کے طور پر داخل کیا جاتا ہے <body> عنصر میں。