تەشنا تېخنىكا كۇلۇبى

ئالدىنقى يازمىمىزدا HTML5 نىڭ Canvas ئارقىلىق چەمبەر سىزىش ۋە خالىغان كوردىنات بويىچە چەمبەرلەرنى ئورۇنلاشتۇرۇش ھەققىدە توختالغان ئىدۇق. مۇنۇ يازمىمىزدا بىر ئاز مۇرەككەپلەشتۈرۈپ، چەمبەر ئاساسىدا بىليارد شارچىلىرىنى سىزىمىز ۋە ئۈستەلگە ئويۇن قائىدىسى بويىچە تىزىپ چىقىمىز. ئاۋۋال ئۈنۈمىنى كۆرۈپ تۇرايلى: كۆرۈش
خوش، ئالدىنقى يازمىمىزدا بىز Html5 نىڭ CanvasRendringContext2D دا تەمىنلەنگەن stroke() ئۇسسۇلى ئارقىلىق چەمبەر سىزىپ چىققان ئىدۇق. ئوخشاشلا fill() ئۇسسۇلى ئارقىلىق چەمبەر ئىچىنى بوياپ، شارچە سىزالايمىز. مەسىلەن تۆۋەندە ئاددىيلا بىر شارچە سىزىپ باقايلى:

ئۈنۈمى مونۇ رەسىمدىكىدەك:

دېمەك، ئالدىنقى قېتىم ئولىمپىك ھالقىسدىكى چەمبەرلەرنى سىزغان بىلەن ئاساسەن ئوخشاش، پەقەت stroke() ئۇسسۇلىنىڭ ئورنىغا fill() ئۇسسۇلى ئالماشتى.
شۇنىڭ بىلەن شارچە سىزىشنىمۇ ئۆگىنىۋالدۇق. ئەمدى بىليارد ئۈستىلىدىكى شارچىلارنى سىزىشنى باشلايمىز! ئويناپ باققانلار بىلدۇ، ئۈستەلدە جەمئىي 16 دانە شارچە بولىدۇ(بىرسى ئانا شارچە). سىزىشنى باشلاشتىن ئاۋۋال گىئومىتىرىيە بىلىملىرىنى ئەسلەپ چىقىشقا توغرا كېلىۋاتىدۇ:
بىر تىك بۇلۇڭلۇق ئۈچبۇلۇڭنىڭ مەلۇم بىر بۇلۇڭى 30 گرادۇس بولسا، ئۈچ تەرىپىنىڭ  كۋادرات نىسبىتى   1:3:4 بولىدۇ. ئۈستەلگە تىزىلغان بىليارد شارچىلىرى تەڭ بۇلۇڭلۇق ئۈچ بۇلۇڭ ھالىتىدە بولىدۇ، ئۇنى  ئوتتۇرا تىك سىزىقتا بۆلىسەك، بىر بۇلۇڭى 30 گىرادۇس بولغان ئىككى دانە تىك بۇلۇڭلۇق ئۈچ بۇلۇڭ ھاسىل بولىدۇ. دېمەك شارچىلارنى موشۇ نىسبەت بويىچە ئورۇنلاشتۇرۇپ چىقساقلا بولىدۇ:

var parenBall={
	position:{x:200,y:200},
	r:r,
	color:"#fff"
    };
    var firstBall={
    position:{x:550,y:200},
	r:r,
	color:randomColor()
    };

يۇقىرىقى كودتا كۆرسىتىلگەندەك، ئاۋۋال Canvas رايۇنىغا ئانا شارچە(ھىلىقى ئاق شارچە) ۋە تىزىلغاندىكى بىرىنچى شارچەنىڭ ئورنى، رادىيۇسى ۋە رەڭگىنى بىكىتىۋالدۇق. ئاندىن ئۇ ئىككىسىنىڭ ئورنىنى ئاساس قىلىپ، يۇقىرىدا تەھلىل قىلغان ئۈچ بۇلۇڭلۇق مۇناسىۋەت بويىچە باشقا شارچىلارنىمۇ ئورۇنلاشتۇرساق بولىدۇ.  كودى تۆۋەندىكىدەك:

for (var j = 1; j <5; j++){
	for (var k = 0; k
يەنى ئاددىيلا چۈشەنگەندە: تۇنجى شارچىنىڭ مەركىزىدىن باشلاپ، x كوردىنات بويىچە رادىيۇسنىڭ sqrt(3) كە كۆپەيتمىسىنى قوشۇپ، y كوردىنات بويىچە تۇنجى شارچىنىڭ مەركىزىدىن باشلاپ ھەربىر شارچىنىڭ دىئامىتىرىنى قوشۇپ ماڭساقلا شارچىلار بەش رەتكە كۆڭۈلدىكىدەك تىزىلغان بولىدۇ. ئاندىن ھەربىر شارچىنى balls ناملىق مىقدار گۇرۇپپىسىغا ساقلاپ، ھەربىر شارچىنىڭ x,y كوردىنات قىممىتى، رادىيۇسى ۋە رەڭگى بويىچە Canvas رايۇنىغا سىزىپ بەرسەكلا ئىش تامام:
for (i in balls) {
		ctx.fillStyle=balls[i].color;
		ctx.beginPath();
		ctx.arc(balls[i].position.x,balls[i].position.y,balls[i].r,0,Math.PI*2,true);
		ctx.closePath();
		ctx.fill();

	}

بۇ يەرگە كەلگەندە ئۈنۈمىگە قاراپ باقساق، ھەممە شارچىنى ئاق رەڭدە سىزىپ قويدۇق. ئەمەلىيەتتە بىليارد شارچىلىرى رەڭلىك بولىدۇ. ئۇنداقتا بىز 16 لىك قىممەت بويىچە ئىختىيارىي رەڭ ھاسىللاش فۇنكىسىيەسىدىن بىرنى يېزىۋالايلى – دە، ھەربىر توپنىڭ رەڭگىگە بىراقلا شۇ فۇكىسىيەنى توغىرلاپ بىرەيلى، ئاندىن رەڭگارەڭ بىليارد شارچىلىرى كۆز ئالدىمىزدا نامايەن بولسۇن:
function randomColor(){
	var arrHex=["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F"];
	var strHex="#";
	var index;
	for (var i = 0; i < 6; i++) {
		index=Math.round(Math.random()*15);
		strHex+=arrHex[index];
	}

دېمەك شۇنىڭ بىلەن بۇ قېتىمقى يازمىمىزنىڭ مەزمۇنى تامام. ئاخىرىدا تولۇق كودىنى Github دىكى  Chapter1/myBall.html دىن كۆرۈڭ: بۇيەردىن