Hindi (हिंदी) translation by Ade Khairul Umam (you can also view the original English article)
इस ट्यूटोरियल में, हम EaselJS लाइब्रेरी का उपयोग करके HTML5 में क्लासिक गेम, पोंग, का क्लोन बनाएंगे । खेल कई स्क्रीन, ध्वनि प्रभाव, और एक (बहुत ही सरल) ऐ प्रतिद्वंद्वी होगा ।
चरण 1: संक्षिप्त अवलोकन
पूर्व निर्मित ग्राफिक्स का उपयोग हम html5 में एक मनोरंजक पांग खेल कोड होगा EaselJS पुस्तकालय है, जो html5 कैनवास के लिए एक फ्लैश की तरह इंटरफेस प्रदान करता है का उपयोग कर । EaselJS के लिए एक परिचय के लिए, इस Activetuts + लेख देखें ।
खिलाड़ी माउस का उपयोग कर एक चप्पू को नियंत्रित करने और अंक प्राप्त करने के लिए कंप्यूटर नियंत्रक प्रतिद्वंद्वी के खिलाफ खेलने के लिए सक्षम हो जाएगा ।
चरण 2: इंटरफ़ेस
एक नव भविष्य शैली के साथ एक सरल अंतरफलक का इस्तेमाल किया जाएगा; यह एकाधिक आकृतियों, बटंस, बिटमैप्स और अधिक शामिल हैं ।
इस ट्यूटोरियल के लिए आवश्यक ग्राफिक्स संलग्न डाउनलोड में पाया जा सकता है ।
चरण 3: EaselJS प्राप्त करें
EaselJS पुस्तकालय हमारे खेल का निर्माण करने के लिए इस्तेमाल किया जाएगा सुनिश्चित करें कि आप इस पुस्तकालय के लिए नए हैं, तो ट्यूटोरियल शुरू हो रही पढ़ें ।
आप अपनी ऑफिशियल वेबसाइट से EaselJS का लेटेस्ट वर्जन डाउनलोड कर सकते हैं । हालांकि, यह कोड यहां के साथ असंगत हो सकता है, इसलिए मैं सुझाव है कि स्रोत डाउनलोड के साथ शामिल है लायब्रेरी के संस्करण का उपयोग कर ।
चरण 4: HTML संरचना
चलो हमारे HTML दस्तावेज़ तैयार करते हैं । हम बहुत मूल बातें, बस एक barebones रूपरेखा के साथ शुरू करेंगे:
<!DOCTYPE html> <html> <head> <title>Pong</title> </head> <body> </body> </html>
चरण 5: मोबाइल हाइलाइट छुपाएं
हम सीएसएस का एक छोटा सा भी जोड़ने के लिए, डिफ़ॉल्ट हाइलाइट है कि लागू है जब आप एक मोबाइल ब्राउज़र में एक तत्व पर नल को हटाने चाहिए । इस के बिना, मोबाइल अनुभव काफी कम हो जाएगा ।
<!DOCTYPE html>
<html>
<head>
<title>Pong</title>
<style>*{-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}</style>
</head>
<body>
</body>
</html> चरण 6: जावास्क्रिप्ट पुस्तकालयों
निंनलिखित कोड हमारे app के लिए आवश्यक जावास्क्रिप्ट पुस्तकालयों के लिए काम कहते हैं ।
<!DOCTYPE html>
<html>
<head>
<title>Pong</title>
<style>*{-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}</style>
<script src="easel.js"></script>
<script src="Tween.js"></script>
<script src="sound.js"></script>
<script src="Main.js"></script>
</head>
<body>
</body>
</html>/ साथ ही EaselJS, हम भी TweenJS (स्क्रीन संक्रमण और खेल पाश से निपटने के लिए) और SoundJS (ध्वनि प्रभाव के लिए) का उपयोग किया जाएगा.
Main. js फ़ाइल हम अपने जे एस कोड पकड़ का उपयोग करेंगे है ।
चरण 7: कॉल मुख्य फ़ंक्शन
अगली पंक्तियों में हम अपने मुख्य () समारोह कहते हैं । यह हमारे आवेदन शुरू कर देंगे कि समारोह है; यह बाद में मुख्य. js के अंदर, ट्यूटोरियल में बनाया जाएगा ।
<!DOCTYPE html>
<html>
<head>
<title>Pong</title>
<style>*{-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}</style>
<script src="easel.js"></script>
<script src="Tween.js"></script>
<script src="sound.js"></script>
<script src="Main.js"></script>
</head>
<body onload="Main();">
</body>
</html> चरण 8: कैनवास टैग
इस लाइन में एक HTML5 कैनवास बनाया गया है; हम इसे एक आईडी निरुपित तो हम इसे बाद में संदर्भ और भी इसकी चौड़ाई और ऊंचाई निर्धारित कर सकते हैं ।
<!DOCTYPE html>
<html>
<head>
<title>Pong</title>
<style>*{-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}</style>
<script src="easel.js"></script>
<script src="Tween.js"></script>
<script src="sound.js"></script>
<script src="Main.js"></script>
</head>
<body onload="Main();">
<canvas id="Pong" width="480" height="320"></canvas>
</body>
</html> चरण 9: Main. js बनाएं
चलो हमारे खेल निर्माण शुरू!
ओपन अपने पसंदीदा जावास्क्रिप्ट संपादक (किसी भी पाठ संपादक काम करेंगे, लेकिन आप वाक्यविंयास उजागर नहीं होगा) और कोड लिखने के लिए तैयार करते हैं । फ़ाइल को अपने प्रोजेक्ट फ़ोल्डर में मुख्य. js के रूप में सहेजना याद रखें ।
चरण 10: कैनवास निर्धारित करें
हम सभी ग्राफिक और तर्क चर को परिभाषित करने से शुरू करेंगे ।
अगले चर HTML कैनवास तत्व और मंच है कि यह करने के लिए जोड़ा जाएगा प्रतिनिधित्व करते हैं । स्टेज चर AS3 चरण के रूप में एक समान तरीके से व्यवहार करेंगे ।
/* Define Canvas */ var canvas; var stage;
चरण 11: पृष्ठभूमि
यह चर शीर्षक पृष्ठभूमि छवि संग्रहीत करता है ।
/* Background */ var bgImg = new Image(); var bg;
चरण 12: शीर्षक दृश्य
यह शीर्षक देखने के लिए, पहली इंटरैक्टिव स्क्रीन हमारे खेल में प्रदर्शित करने के लिए है । ये चर इसके घटकों को संग्रहीत करते हैं ।
/* Title View */ var mainImg = new Image(); var main; var startBImg = new Image(); var startB; var creditsBImg = new Image(); var creditsB; var TitleView = new Container();
चरण 13: क्रेडिट
इस दृश्य क्रेडिट, वर्ष और खेल के कॉपीराइट दिखाएगा, इन चर इसे स्टोर करने के लिए इस्तेमाल किया जाएगा ।
/* Credits */ var creditsViewImg = new Image(); var credits;
चरण 14: गेम दृश्य
अगले चर अलग ग्राफिक्स है कि खेल दृश्य में दिखाई देते है स्टोर:
/* Game View */ var playerImg = new Image(); var player; var ballImg = new Image(); var ball; var cpuImg = new Image(); var cpu; var winImg = new Image(); var win; var loseImg = new Image(); var lose;
चरण 15: स्कोर
स्कोर मूल्यों अगले चर द्वारा नियंत्रित किया जाएगा:
/* Score */ var playerScore; var cpuScore;
चरण 16: चर
ये हम उपयोग करेंगे चर रहे हैं, कोड में टिप्पणी पढ़ने के लिए वे क्या कर रहे है समझने के लिए:
var xSpeed = 5; //Horizontal speed of the ball var ySpeed = 5; //Vertical speed of the ball var gfxLoaded = 0; //used as a preloader, counts the already loaded items var tkr = new Object; //used as an event listener to the Ticker
चरण 17: ध्वनि प्रभाव बनाएं
हम खेल की भावना को बढ़ाने के लिए ध्वनि प्रभाव का उपयोग करेंगे । इस उदाहरण में लगता है उत्कृष्ट मुफ्त उपकरण as3sfxr का उपयोग कर बनाया गया और दुस्साहस का उपयोग कर एमपी 3 में परिवर्तित ।
आवश्यक लगता है सभी स्रोत डाउनलोड में पाया जा सकता है । यदि आप अपना स्वयं का बनाना चाहते हैं, तो आपको चार की आवश्यकता होगी:
-
मारो. mp3: खेला जब गेंद एक चप्पू हिट -
playerScore. mp3: जब वे खिलाड़ी स्कोर खेला -
enemyScore. mp3: खेला जब दुश्मन स्कोर -
वाल. mp3: खेला जब गेंद ऊपर या नीचे सीमा हिट
चरण 18: मुख्य समारोह
मुख्य () फ़ंक्शन जाएगा निष्पादित करने के लिए पहले जब वेब पेज लोड है, क्योंकि यह करने के लिए HTML दस्तावेज़ की onload विशेषता में संदर्भित किया जाता है (चरण 7 देखें) ।
यह खेल शुरू करने के लिए आवश्यक कार्यों को फोन करेंगे ।
function Main()
{
//code...
} चरण 19: कैनवास लिंक
इस कोड HTML कैनवास आईडी हो जाता है और यह EaselJS चरण वर्ग के लिए लिंक । यह चरण चर व्यवहार AS3 में मंच वर्ग की तरह कर देगा । इस जोड़ें करने के लिए मुख्य () ।
/* Link Canvas */
canvas = document.getElementById('Pong');
stage = new Stage(canvas); चरण 20: माउस ईवेंट्स सक्षम करें
प्रदर्शन में सुधार करने के लिए EaselJS में डिफ़ॉल्ट रूप से माउस ईवेंट्स अक्षम हैं । चूंकि हम इस खेल में उन की जरूरत है, हम निंनलिखित पंक्ति जोड़ें । इस जोड़ें करने के लिए मुख्य () ।
stage.mouseEventsEnabled = true;
चरण 21: लोड लगता है
हम अपने खेल के लिए ध्वनियों को जोड़ने के लिए SoundJS का उपयोग करेंगे; लगता है हम का उपयोग करेंगे आयात करने के लिए निंनलिखित कोड लिखें । इस जोड़ें करने के लिए मुख्य () ।
/* Sound */
SoundJS.addBatch([
{name:'hit', src:'hit.mp3', instances:1},
{name:'playerScore', src:'playerScore.mp3', instances:1},
{name:'enemyScore', src:'enemyScore.mp3', instances:1},
{name:'wall', src:'wall.mp3', instances:1}]); चरण 22: लोड ग्राफिक्स
इस कोड को ग्राफिक्स प्रीलोड के लिए प्रयोग किया जाता है, एक समारोह है कि हम बाद में लिखेंगे की मदद से । यह हम हमारे दस्तावेज़ फ़ोल्डर में प्रासंगिक स्रोत PNG फ़ाइलों को इंगित करने से पहले बनाया छवि वस्तुओं सेट ।
एक नाम प्रत्येक के लिए दिया जाता है, तो हम जो छवि बाद में भरी हुई है पता लगा सकते हैं, और अंत में समारोह है कि लोड छवियों को संभालती है कहा जाता है ।
इस जोड़ें करने के लिए मुख्य () ।
/* Load GFX */ bgImg.src = 'bg.png'; bgImg.name = 'bg'; bgImg.onload = loadGfx; mainImg.src = 'main.png'; mainImg.name = 'main'; mainImg.onload = loadGfx; startBImg.src = 'startB.png'; startBImg.name = 'startB'; startBImg.onload = loadGfx; creditsBImg.src = 'creditsB.png'; creditsBImg.name = 'creditsB'; creditsBImg.onload = loadGfx; creditsViewImg.src = 'credits.png'; creditsViewImg.name = 'credits'; creditsViewImg.onload = loadGfx; playerImg.src = 'paddle.png'; playerImg.name = 'player'; playerImg.onload = loadGfx; ballImg.src = 'ball.png'; ballImg.name = 'ball'; ballImg.onload = loadGfx; cpuImg.src = 'paddle.png'; cpuImg.name = 'cpu'; cpuImg.onload = loadGfx; winImg.src = 'win.png'; winImg.name = 'win'; winImg.onload = loadGfx; loseImg.src = 'lose.png'; loseImg.name = 'lose'; loseImg.onload = loadGfx;
चरण 23: टिकर सेट करें
टिकर वर्ग एक केंद्रीकृत टिक या धड़कन प्रसारण एक सेट अंतराल पर प्रदान करता है । यह खेल पाश ट्रिगर करने के लिए इस्तेमाल किया जा सकता है ।
निम्न कोड 30 करने के लिए फ़्रेम दर सेट करता है और ticks के लिए श्रोता के रूप में चरण को परिभाषित करता है ।
TweenJS वर्ग इस टिक को सुनने के लिए एनिमेशन प्रदर्शन करेंगे । इस जोड़ें करने के लिए मुख्य () ।
/* Ticker */ Ticker.setFPS(30); Ticker.addListener(stage);
चरण 24: प्रीलोड फ़ंक्शन
हर बार जब कोई ग्राफ़िक लोड होता है तो यह फ़ंक्शन चलेगा । यह एक बिटमैप ऑब्जेक्ट के लिए प्रत्येक छवि प्रदान करेगा और जांच thatall तत्वों आगे बढ़ने से पहले लोड कर रहे हैं ।
function loadGfx(e)
{
if(e.target.name = 'bg'){bg = new Bitmap(bgImg);}
if(e.target.name = 'main'){main = new Bitmap(mainImg);}
if(e.target.name = 'startB'){startB = new Bitmap(startBImg);}
if(e.target.name = 'creditsB'){creditsB = new Bitmap(creditsBImg);}
if(e.target.name = 'credits'){credits = new Bitmap(creditsViewImg);}
if(e.target.name = 'player'){player = new Bitmap(playerImg);}
if(e.target.name = 'ball'){ball = new Bitmap(ballImg);}
if(e.target.name = 'cpu'){cpu = new Bitmap(cpuImg);}
if(e.target.name = 'win'){win = new Bitmap(winImg);}
if(e.target.name = 'lose'){lose = new Bitmap(loseImg);}
gfxLoaded++;
if(gfxLoaded == 10) // remember to change this if you add more images
{
addTitleView();
}
} चरण 25: शीर्षक दृश्य जोड़ें
जब सभी ग्राफ़िक्स लोड किए जाते हैं, तो शीर्षक दृश्य निम्न फ़ंक्शन द्वारा चरण में जोड़ा जाता है:
function addTitleView()
{
startB.x = 240 - 31.5;
startB.y = 160;
startB.name = 'startB';
creditsB.x = 241 - 42;
creditsB.y = 200;
TitleView.addChild(main, startB, creditsB);
stage.addChild(bg, TitleView);
stage.update(); चरण 26: प्रारंभ बटन श्रोताओं
इस समारोह TitleView बटन को आवश्यक श्रोताओं कहते है (यह addTitleView () का हिस्सा है):
startB.onPress = addGameView; creditsB.onPress = showCredits; }
चरण 27: दिखाएं क्रेडिट
क्रेडिट स्क्रीन दिखाया गया है जब उपयोगकर्ता क्रेडिट बटन पर क्लिक करता है; माउस श्रोता इसे निकालने के लिए पूर्ण छवि के लिए जोड़ा गया है ।
function showCredits()
{
// Show Credits
credits.x = 480;
stage.addChild(credits);
stage.update();
Tween.get(credits).to({x:0}, 300);
credits.onPress = hideCredits;
} 28 कदम: क्रेडिट छुपाएं
जब क्रेडिट स्क्रीन क्लिक किया है यह वापस के बीच होगा और मंच से हटा दिया ।
// Hide Credits
function hideCredits(e)
{
Tween.get(credits).to({x:480}, 300).call(rmvCredits);
}
// Remove Credits
function rmvCredits()
{
stage.removeChild(credits);
} चलो यहां बंद परीक्षण क्या हम अब तक किया है । एक मील का पत्थर डेमो के लिए यहां क्लिक करें ।
ध्यान रखें कि कुछ लाइनों के बाहर टिप्पणी की गई है के रूप में कुछ कार्य अभी तक नहीं बनाया गया है ।
याद रखें कि मील का पत्थर स्रोत फ़ाइलों में शामिल है, इसलिए अगर किसी कारण से अपनी फ़ाइल यह एक नकल नहीं करता है के लिए, अपने स्रोत की तुलना करने के लिए मेरा क्या हो सकता है देखने के लिए ।
चरण 29: दिखाएं खेल देखें
निंन पंक्तियां TitleView को चरण से निकालती है और GameView आइटंस को चरण में जोड़ता है । एक माउस श्रोता पृष्ठभूमि में जोड़ा जाता है, खेल शुरू करने के लिए जब क्लिक किया ।
function addGameView()
{
// Destroy Menu & Credits screen
stage.removeChild(TitleView);
TitleView = null;
credits = null;
// Add Game View
player.x = 2;
player.y = 160 - 37.5;
cpu.x = 480 - 25;
cpu.y = 160 - 37.5;
ball.x = 240 - 15;
ball.y = 160 - 15;
// Score
playerScore = new Text('0', 'bold 20px Arial', '#A3FF24');
playerScore.maxWidth = 1000; //fix for Chrome 17
playerScore.x = 211;
playerScore.y = 20;
cpuScore = new Text('0', 'bold 20px Arial', '#A3FF24');
cpuScore.maxWidth = 1000; //fix for Chrome 17
cpuScore.x = 262;
cpuScore.y = 20;
stage.addChild(playerScore, cpuScore, player, cpu, ball);
stage.update();
// Start Listener
bg.onPress = startGame;
} कदम 30: खिलाड़ी आंदोलन
खिलाड़ी माउस की ऊर्ध्वाधर स्थिति के साथ साथ कदम होगा:
function movePaddle(e)
{
// Mouse Movement
player.y = e.stageY;
} चरण 31: खेल प्रारंभ करें
इस कोड को चलाता है जब खिलाड़ी खेल पृष्ठभूमि क्लिक करता है, यह माउस श्रोता कि पिछले चरण में समारोह शुरु जोड़ता है, और एक टिकर के लिए खेल पाश नियंत्रण कहते हैं ।
टिकर बनाया जाता है जिस तरह से ध्यान देना: यह AS3 में एक टाइमर घटना के बराबर है ।
function startGame(e)
{
bg.onPress = null;
stage.onMouseMove = movePaddle;
Ticker.addListener(tkr, false);
tkr.tick = update;
} चरण ३२: रीसेट करें
जब एक बिंदु (खिलाड़ी या कंप्यूटर द्वारा), चप्पू और गेंद wil अपने मूल पदों पर लौटने और खेल को रोक दिया जाएगा रन बनाए है:
function reset()
{
ball.x = 240 - 15;
ball.y = 160 - 15;
player.y = 160 - 37.5;
cpu.y = 160 - 37.5;
stage.onMouseMove = null; //stop listening to the mouse
Ticker.removeListener(tkr); //pause the game
bg.onPress = startGame;
} चरण ३३: गेंद आंदोलन
यदि खेल रुका नहीं है, गेंद हर फ्रेम हम पहले बनाया चर का उपयोग कर ले जाया जाएगा ।
function update()
{
// Ball Movement
ball.x = ball.x + xSpeed;
ball.y = ball.y + ySpeed; चरण ३४: सीपीयू आंदोलन
यह कोड कंप्यूटर के मूवमेंट को नियंत्रित करता है; चप्पू एक तरीका है कि यह गेंद का पालन करेंगे, जबकि अभी भी त्रुटि के कुछ मार्जिन होने में ले जाया जाता है ।
if(cpu.y < ball.y) {
cpu.y = cpu.y + 2.5;
}
else if(cpu.y > ball.y) {
cpu.y = cpu.y - 2.5;
} चरण ३५: दीवार collisions
यहाँ हम जाँच करें कि क्या गेंद कैनवास के शीर्ष या निचली बॉर्डर पर है; यदि ऐसा है, ऊर्ध्वाधर गति उलट है और एक ध्वनि खेला जाता है ।
if((ball.y) < 0) { ySpeed = -ySpeed; SoundJS.play('wall');};//Up
if((ball.y + (30)) > 320) { ySpeed = -ySpeed; SoundJS.play('wall');};//down चरण ३६: स्कोर
अब लेफ्ट और राइट साइड्स । इस कोड को भी स्कोर को संशोधित करता है, रीसेट समारोह कॉल और गेंद को छुआ पक्ष के आधार पर एक अलग ध्वनि निभाता है ।
/* CPU Score */
if((ball.x) < 0)
{
xSpeed = -xSpeed;
cpuScore.text = parseInt(cpuScore.text + 1);
reset();
SoundJS.play('enemyScore');
}
/* Player Score */
if((ball.x + (30)) > 480)
{
xSpeed = -xSpeed;
playerScore.text = parseInt(playerScore.text + 1);
reset();
SoundJS.play('playerScore');
} चरण ३७: गेंद चप्पू collisions
निंनलिखित कोड की जांच करता है कि गेंद एक चप्पू के साथ टकरा रहा है, गेंद के निर्देशांक के लिए चप्पू की स्थिति की तुलना द्वारा । अगर दो एक दूसरे को काटना की सीमा बक्से, वहां एक टक्कर है, तो हम एक्स गेंद की गति रिवर्स और एक ध्वनि खेलते हैं ।
/* Cpu collision */
if(ball.x + 30 > cpu.x && ball.x + 30 < cpu.x + 22 && ball.y >= cpu.y && ball.y < cpu.y + 75)
{
xSpeed *= -1;
SoundJS.play('hit');
}
/* Player collision */
if(ball.x <= player.x + 22 && ball.x > player.x && ball.y >= player.y && ball.y < player.y + 75)
{
xSpeed *= -1;
SoundJS.play('hit');
} चरण ३८: जीत के लिए जांच/
आप अगली पंक्तियों में समाप्ति शर्त संशोधित कर सकते हैं-यह डिफ़ॉल्ट रूप से 10 बिंदुओं पर सेट है.
/* Check for Win */
if(playerScore.text == '10')
{
alert('win');
}
/* Check for Game Over */
if(cpuScore.text == '10')
{
alert('lose');
} चरण ३९: चेतावनी
इस समारोह में खेल बंद करो और एक चेतावनी दिखाने के लिए, की सामग्री है जो खेल परिणाम के लिए निर्भर करेगा ।
function alert(e)
{
Ticker.removeListener(tkr);
stage.onMouseMove = null;
bg.onPress = null
if(e == 'win')
{
win.x = 140;
win.y = -90;
stage.addChild(win);
Tween.get(win).to({y: 115}, 300);
}
else
{
lose.x = 140;
lose.y = -90;
stage.addChild(lose);
Tween.get(lose).to({y: 115}, 300);
}
} चरण ४०: परीक्षण
अपने काम को बचाने (यदि आप नहीं है) और ब्राउज़र में HTML फ़ाइल खोलने के लिए अपने खेल काम देख!
निष्कर्ष
खेल के अपने स्वयं के संस्करण बनाने के लिए है, इस गेम के चर को संशोधित करने का प्रयास करें!
मुझे आशा है कि आप इस ट्यूटोरियल पसंद आया, पढ़ने के लिए धन्यवाद!
