कैनवास कदम से कदम: पोंग

आज हम html5 कैनवास टैग का उपयोग करके एक छोटा पोंग गेम लिखने की कोशिश करेंगे। जो लोग पोस्ट नहीं पढ़ना चाहते हैं वे तुरंत PLAY कर सकते हैं।
यदि आप विकिपीडिया को मानते हैं, तो आप पता लगा सकते हैं कि पोंग टेबल टेनिस का सबसे सरल सिम्युलेटर है। पिंग-पोंग बॉल की जगह एक छोटा वर्ग रैखिक पथ के साथ स्क्रीन पर चलता है। यदि वह खेल के मैदान की परिधि या एक खींची गई दौड़ में से किसी एक पर चोट करता है, तो टक्कर के कोण के अनुसार उसका प्रक्षेपवक्र बदल जाता है।
गेमप्ले यह है कि खिलाड़ी अपने लक्ष्य की रक्षा के लिए अपने रैकेट को खड़ी करके चलते हैं। एक खिलाड़ी को एक बिंदु मिलता है यदि वह एक प्रतिद्वंद्वी के रैकेट के लिए एक गेंद भेजने का प्रबंधन करता है ...

हम खेल को लागू करने का प्रयास करेंगे ताकि इसे माउस से खेला जा सके, और प्रतिद्वंद्वी को कंप्यूटर द्वारा नियंत्रित किया जाए। तो चलिए शुरू करते हैं। इसके साथ शुरू करने के लिए, हम यह निर्धारित करेंगे कि इस पोस्ट में क्या हो रहा है, इसकी पूरी समझ के लिए, मूल बातें बताने वाले पोस्ट से खुद को परिचित करना उचित है।

हमारे मेगाप्रोजेक्ट में क्रमशः pong.htm और pong.js दो फाइलें शामिल होंगी, जिन्हें वास्तव में एक फ़ोल्डर में बनाने और सहेजने की आवश्यकता होती है।
Html फ़ाइल सामग्री:

< html >
< head >
< meta charset = "utf-8" >
< title > html5Pong < / title >
< script src = "pong.js" >< / script >
< / head >
< body >
<canvas id = "pong" > wtf?! < / canvas>
< script > init() < / script >
< / body >
< / html >

वास्तव में, खेल के सभी यांत्रिकी को pong.js फ़ाइल में स्थानांतरित कर दिया जाएगा और हम अपने भविष्य के खेल की पहली पंक्तियों को इसमें जोड़ देंगे:

//
function init ( ) {
canvas = document. getElementById ( "pong" ) ;
canvas. width = 480 ; //
canvas. height = 320 ; //
context = canvas. getContext ( '2d' ) ;
draw ( ) ;
}
//
function draw ( ) {
context. fillStyle = "#000" ;
context. fillRect ( 0 , 0 , 480 , 320 ) ;
}
init ( ) ;

यदि आप एक ब्राउज़र के साथ html फ़ाइल खोलते हैं, तो आप इस स्क्रिप्ट का काम देख सकते हैं जो वास्तव में हमारे कैनवास को काले रंग में पेंट करता है।

खेल की वस्तु

पोंग में सभी खेल वस्तुएं आयताकार हैं और यह हमारे कार्य को बहुत सुविधाजनक बनाएगी। आइए एक छोटे से वर्ग को परिभाषित करें जिसमें एक आयत खींचने के लिए सभी आवश्यक क्षेत्र होंगे, साथ ही ड्रा विधि भी होगी:

function rect ( color , x , y , width , height ) {
this . color = color ; //
this . x = x ; //
this . y = y ; //
this . width = width ; //
this . height = height ; //
this . draw = function ( ) //
{
context. fillStyle = this . color ;
context. fillRect ( this . x , this . y , this . width , this . height ) ;
}
}

अब खेल मैदान, खिलाड़ियों और "बॉल" में ऑब्जेक्ट्स जोड़कर इनिशियलाइज़ेशन और रेंडरिंग फ़ंक्शंस की सामग्री को थोड़ा बदल दें।

//
function init ( ) {
//
game = new rect ( "#000" , 0 , 0 , 480 , 320 ) ;
// -
ai = new rect ( "#fff" , 10 , game. height / 2 - 40 , 20 , 80 ) ;
player = new rect ( "#fff" , game. width - 30 , game. height / 2 - 40 , 20 , 80 ) ;
//
ai. scores = 0 ;
player. scores = 0 ;
// ""
ball = new rect ( "#fff" , 40 , game. height / 2 - 10 , 20 , 20 ) ;
canvas = document. getElementById ( "pong" ) ;
canvas. width = game. width ;
canvas. height = game. height ;
context = canvas. getContext ( "2d" ) ;
draw ( ) ;
}
//
function draw ( ) {
game. draw ( ) ; //
//
context. font = 'bold 128px courier' ;
context. textAlign = 'center' ;
context. textBaseline = 'top' ;
context. fillStyle = '#ccc' ;
context. fillText ( ai. scores , 100 , 0 ) ;
context. fillText ( player. scores , game. width - 100 , 0 ) ;
for ( var i = 10 ; i < game. height ; i += 45 ) //
{
context. fillStyle = "#ccc" ;
context. fillRect ( game. width / 2 - 10 , i , 20 , 30 ) ;
}
ai. draw ( ) ; //
player. draw ( ) ; //
ball. draw ( ) ; //
}

यदि आप अब फ़ाइल खोलते हैं, तो आप हमारे गेम के सभी तत्वों को देख सकते हैं।

जीवन हो सकता है

बेशक, इस स्तर पर सब कुछ बहुत अच्छा लग रहा है, लेकिन एक स्थिर तस्वीर वह नहीं है जो हमें चाहिए। तो अब हम गेंद को "पुनर्जीवित" करने जा रहे हैं। ऐसा करने के लिए, एक नया प्ले () फ़ंक्शन बनाएं जिसमें हम ड्रॉ () फ़ंक्शन के लिए कॉल करते हैं, और हम एक टाइमर (अर्थात् 1000/50) सेट टाइमर का उपयोग करके अपने आप को इनिट () से खेलेंगे। हम कैनवास के चारों ओर घूमते हुए माउस के समन्वय के लिए खिलाड़ी के y निर्देशांक को बांधते हैं। अपडेट फ़ंक्शन में परिवर्तन होते हैं जो किए जाने चाहिए, जैसे कि माउस निर्देशांक और अन्य खुशियाँ। नीचे दिए गए कार्यों में भ्रमित न होने के लिए, पूरे pong.js फ़ाइल का कोड जो हमें आउटपुट होना चाहिए:

//
function rect ( color , x , y , width , height ) {
this . color = color ;
this . x = x ;
this . y = y ;
this . width = width ;
this . height = height ;
this . draw = function ( ) {
context. fillStyle = this . color ;
context. fillRect ( this . x , this . y , this . width , this . height ) ;
} ;
}
//
function playerMove ( e ) {
var y = e. pageY ;
if ( player. height / 2 + 10 < y && y < game.height - player.height / 2 - 10 ) {
player. y = y - player. height / 2 ;
}
}
//
function draw ( ) {
game. draw ( ) ; //
//
context. font = 'bold 128px courier' ;
context. textAlign = 'center' ;
context. textBaseline = 'top' ;
context. fillStyle = '#ccc' ;
context. fillText ( ai. scores , 100 , 0 ) ;
context. fillText ( player. scores , game. width - 100 , 0 ) ;
for ( var i = 10 ; i < game. height ; i += 45 )
//
{
context. fillStyle = "#ccc" ;
context. fillRect ( game. width / 2 - 10 , i , 20 , 30 ) ;
}
ai. draw ( ) ; //
player. draw ( ) ; //
ball. draw ( ) ; //
}
//
function update ( ) {
//
ball. x += ball. vX ;
ball. y += ball. vY ;

}
function play ( ) {
draw ( ) ; //
update ( ) ; //
}
//
function init ( ) {
//
game = new rect ( "#000" , 0 , 0 , 480 , 320 ) ;
// -
ai = new rect ( "#fff" , 10 , game. height / 2 - 40 , 20 , 80 ) ;
player = new rect ( "#fff" , game. width - 30 , game. height / 2 - 40 , 20 , 80 ) ;
//
ai. scores = 0 ;
player. scores = 0 ;
// ""
ball = new rect ( "#fff" , 40 , game. height / 2 - 10 , 20 , 20 ) ;
//
ball. vX = 2 ; //
ball. vY = 2 ; //
canvas = document. getElementById ( "pong" ) ;
canvas. width = game. width ;
canvas. height = game. height ;
context = canvas. getContext ( "2d" ) ;
canvas. onmousemove = playerMove ;
setInterval ( play , 1000 / 50 ) ;
}

खेल झड़प

सबसे दिलचस्प बात अब शुरू होगी, हमें गेंद को खेल के मैदान से बाहर नहीं उड़ने की शिक्षा देना होगा, साथ ही साथ रैकेट को भी छूना होगा, इसके लिए मैंने एक छोटा सा फंक्शन लिखा है जो दो गेम ऑब्जेक्ट्स को छूने पर असली वैल्यू देता है। नीचे उसका कोड है

function collision ( objA , objB ) {
if ( objA. x + objA. width > objB. x &&
objA. x < objB. x + objB. width &&
objA. y + objA. height > objB. y &&
objA. y < objB. y + objB. height ) {
return true ;
}
else {
return false ;
}
}

अब, ताकि गेंद केवल खेल के मैदान के बाहर न उड़ जाए, हमें अपडेट फ़ंक्शन को थोड़ा समायोजित करने की आवश्यकता है, अर्थात्

function update ( ) {
//
//
if ( ball. y < 0 || ball. y + ball. height > game. height ) {
//
ball. vY = - ball. vY ;
}
//
if ( ball. x < 0 ) {
//
ball. vX = - ball. vX ;
player. scores ++;
}
if ( ball. x + ball. width > game. width ) {
//
ball. vX = - ball. vX ;
ai. scores ++;
}
//
if ( ( collision ( ai , ball ) && ball. vX < 0 ) || ( collision ( player , ball ) && ball. vX > 0 ) ) {
ball. vX = - ball. vX ;
}
//
ball. x += ball. vX ;
ball. y += ball. vY ;
}

अब हमारे खेल को खेलना लगभग संभव है, गेंद सही तरीके से उड़ती है, रैकेट इसे हरा सकते हैं, प्रतिद्वंद्वी के पास वास्तव में थोड़ा शव है, लेकिन हम इसे ठीक करेंगे, एक छोटे से कार्य के साथ

function aiMove ( ) {
var y ;
//
var vY = Math. abs ( ball. vY ) - 2 ;
if ( ball. y < ai. y + ai. height / 2 ) {
y = ai. y - vY ;
}
else {
y = ai. y + vY ;
}
if ( 10 < y && y < game. height - ai. height - 10 ) {
ai. y = y ;
}
}

फ़ंक्शन कॉल को अपडेट में रखा जाना चाहिए।

परिणाम

दरअसल, उन्होंने इसे लिखा था, यह केवल एक छोटे से पैच अप करने के लिए बना हुआ है और अब यह एक पूर्ण पोंग है। हम स्क्रीन पर स्कोर के साथ-साथ खेले जाने वाले खेलों के आंकड़े प्रदर्शित करेंगे, और हम माउस क्लिक करने की गति में बदलाव करेंगे। यहां आप पोंग को सरल आंकड़ों के साथ पा सकते हैं, टिप्पणियों से भरा हुआ है।