▲

جاوا اسکرپٹ کی مدد سے رنگ گننے والی گیم بنائیں

Javascript کی مدد سے ایسے کام بھی کیے جا سکتے ہیں جن کی طرف عموماً‌ توجہ نہیں جاتی۔ اس ٹٹوریل میں جاوااسکرپٹ استعمال کرتے ہوئے ایک بہت سادی سی گیم بنائی گئی ہے۔ اس گیم میں ایک خانہ دکھایا گیا ہے جس کا رنگ ہر کلک پر بدل سکتا ہے، یعنی یہ رنگ سبز ہو سکتا ہے یا جامنی۔ آپ اس خانے پر کلک یا ٹیپ کرتے جائیں گے اور ساتھ گنتے جائیں گے کہ کس رنگ پر آپ نے کتنی مرتبہ کلک کیا ہے۔ پھر See Result بٹن پر کلک کر کے دیکھا جا سکتا ہے کہ کیا نتیجہ آپ کی یاد داشت کے مطابق ہے۔ ٹٹوریل کے آخر میں یہ نمونے کی گیم کھیلنے کے لیے مہیا کی گئی ہے۔



جاوا اسکرپٹ کی مدد سے بنائی جانے والی رنگ گننے والی گیم

کوڈ کی وضاحت

درج ذیل کوڈ میں کامنٹس کی لائنوں میں نمبر دیے گئے ہیں، ان نمبروں کے اعتبار سے کوڈ کی وضاحت دیکھیں:

  1. ویب پیج کے head سیکشن میں سب سے پہلے آپ دیکھ رہے ہیں کہ ایک اسٹائل شیٹ فائل کو ویب پیج کے ساتھ منسلک کیا گیا ہے۔ اس CSS فائل میں دیے گئے اسٹائل رولز کی مدد سے HTML ایلیمنٹس کو بہتر انداز میں دکھایا گیا ہے۔
  2. پھر آپ script ٹیگ دیکھ رہے ہیں جس کے اندر Javascript کوڈ موجود ہے۔ سب سے پہلے تین ویری ایبلز ڈیفائن کیے گئے ہیں جو اگلے مرحلے میں کوڈ میں استعمال کیے جائیں گے۔
  3. جاوا اسکرپٹ کوڈ میں پھر ()clickCounts فنکشن ہے، اس پر تب عمل ہوگا جب آپ رنگ والے خانے پر کلک کریں گے۔
    پہلے result ایلیمنٹ کو خالی کیا گیا ہے۔
    پھر If-statement کی مدد سے دیکھا گیا ہے کہ اگر اس وقت خانے کا رنگ سبز ہے تو پھر green_clicks ویری ایبل کی گنتی میں اضافہ کر دیا جائے، اگر نہیں تو پھر purple_clicks ویری ایبل کی گنتی میں اضافہ کر دیا جائے۔
    پھر ایک Random نمبر اور If-statement کی مدد سے خانے کا رنگ بدلا گیا ہے، یعنی کسی بھی کلک پر خانے کا رنگ تبدیل ہو سکتا ہے۔
    فنکشن کے آخر میں total_clicks ویری ایبل کی گنتی میں اضافہ کیا گیا ہے، اور پھر ویب پیج کے total-clicks ٹیگ میں کل گنتی دکھائی گئی ہے۔
  4. اس کے بعد جاوا اسکرپٹ کوڈ میں ()seeResult فنکشن ہے، اس پر تب عمل ہوگا جب ویب پیج کے See Result بٹن پر کلک کیا جائے گا۔
    پہلے ویب پیج کے total-clicks ٹیگ کو خالی کیا گیا ہے۔
    پھر result ٹیگ میں سبز اور جامنی رنگ کی کل گنتی دکھائی گئی ہے۔
    اس کے بعد گنتی کے تمام ویری ایبلز کی ویلیوز صفر مقرر کی گئی ہیں تاکہ نئے سرے سے گیم شروع کی جا سکے۔
  5. ویب پیج کے body والے سیکشن میں مختلف ٹیگز موجود ہیں۔ یہ ٹیگز خالی اس لیے ہیں کہ ان میں ہر ٹیگ کی id استعمال کرتے ہوئے جاوا اسکرپٹ کوڈ کی مدد سے اس کی ویلیو مقرر کی گئی ہے۔ color-box کی id والے ٹیگ میں onclick ایٹری بیوٹ کی مدد سے بتایا گیا ہے کہ جب اس ٹیگ پر کلک کیا جائے تو جاوا اسکرپٹ کا ()countClicks بٹن کال ہو جائے۔ اسی طرح input ٹیگ کے onclick ایٹری بیوٹ کی مدد سے بتایا گیا ہے کہ اس بٹن پر کلک کرنے سے ()seeResult فنکشن کال ہو جائے۔ 

<!DOCTYPE html>
<html>
<head>
	<!-- 1 -->
	<link rel="stylesheet" href="styles.css">
	<!-- 2 -->
	<script>
		var total_clicks = 0;
		var green_clicks = 0;
		var purple_clicks = 0;
 
		// 3
		function countClicks() {
 
			document.getElementById("result").innerHTML = "";
 
			if (document.getElementById("color-box").style.backgroundColor == "green") {
				green_clicks++;
			} else {
				purple_clicks++;
			}
 
			random_number = Math.floor((Math.random() * 100) + 1);
			if (random_number % 2 == 0) {
				document.getElementById("color-box").style.backgroundColor = "purple";
			} else {
				document.getElementById("color-box").style.backgroundColor = "green";
			}
 
			total_clicks++;
			document.getElementById("total-clicks").innerHTML = 
				total_clicks + " total clicks so far";
		}
 
		// 4
		function seeResult() {
			document.getElementById("total-clicks").innerHTML = "";
			document.getElementById("result").innerHTML = 
					green_clicks + " green clicks<br>" + 
					purple_clicks + " purple clicks";
			total_clicks = 0;
			green_clicks = 0;
			purple_clicks = 0;
		}
	</script>
</head>
 
<body>
	<!-- 5 -->
	<div id="color-box" onclick="countClicks();"></div>
	<div id="total-clicks"></div>
	<input type="button" value="See Result" onclick="seeResult();"><br><br>
	<div id="result"></div>
</body>
</html>


اسٹائل شیٹ رولز درج ذیل ہیں۔ جب یہ ویب پیج پہلی مرتبہ براؤزر میں لوڈ ہوگا تو ویب پیج کے color-box ٹیگ کا سائز اور رنگ پہلے سے مقرر ہو جائے گا۔ اس کے بعد جب اس خانے پر کلک کیا جائے گا تو جاوا اسکرپٹ کے فنکشن کی مدد سے اس کا رنگ تبدیل کیا جائے گا۔ 

body {
	font-family:Arial;
	font-size:18px;
	color:#888;
	text-align:center;
}
#color-box {
	max-width:300px;
	margin:0 auto;
	height:100px;
	background-color:green;
}
div {
	margin:20px 0 20px 0;
}


یہ گیم کھیلیں

درج ذیل باکس پر کلک کرتے جائیں اور گنتے جائیں کہ کس رنگ پر آپ نے کتنی مرتبہ کلک کیا ہے۔ اور پھر See Result بٹن پر کلک کر کے نتیجہ دیکھیں۔










Categories: 
Javascript
Web Development
Created: Mon, 02/16/2015 - 10:17
Modified: Mon, 02/16/2015 - 18:50