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

ئالدىنقى يازمىلىرىمىزدا HTML5 نىڭ بىر قىسىم ئاساسىي بىلىملىرىنى كۆرۈپ ئۆتتۇق. مونۇ يازمىمىزدا يەڭنى تۈرۈپ، مىسال تەرىقىسدە ئاددى بىر ئويۇن – "ئاچكۆز يىلان" نى(يىلان دەمتى يا؟) ياساپ چىقىمىز.ئاۋۋال ئۈنۈمىنى كۆرمىسەك بولماس: مانا بۇيەر

بۇ ئويۇننى كىچىك ۋاقىتلىرىمىزدا ھىلىقى كىچىك ئويۇنچۇقلاردا تولا ئوينايىتتۇق، كېيىن نوكىيا تېىلىفۇنلىرى تېخىمۇ ئەۋجىگە چىقىرىۋەتتى. يەنى ئېكىران دائىرىسىدە تويماس يىلان يورغىلايدۇ- يورغىلايدۇ، بىز كونۇپكا ئارقىلىق ئۇيان – بۇيانغا بۇرايمىز، ئېكىراننىڭ خالىغان يېرىدە موگودەك بىر نەرسە پەيدا بولىدۇ، يىلانچاق شۇنى يەيدۇ -يەيدۇ، يىگەنسىرى ئۇزىرايدۇ، ئۇزىرىغانسىرى قۇيرۇقىنى ئاسان چىشلەپ سالىدۇ...تامام، بۇ ئويۇننىڭ پىرىنسىپى تولىمۇ ئاددىي، خۇددى تۆۋەندىكىدەك:

ئاۋۋال، ئالدىنقى يازمىمىزدا تونۇشتۇرغان Jscex بىلەن پۈتكۈل ئويۇننىڭ ئاساىي دەۋرىي قۇرۇلمىسىنى قۇرۇۋالىمىز:

var moveAsync = eval(Jscex.compile("async", function (p) {
 while (true) {
    //...
    // oyunning asasliq kodi 
    //...
 $await(Jscex.Async.sleep(100));
        }
    }));

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

if (direction == "right") {
                p.push({
                    x: p[p.length - 1].x + 1,
                    y: p[p.length - 1].y
                });
            }
if (direction == "left") {
                p.push({
                    x: p[p.length - 1].x - 1,
                    y: p[p.length - 1].y
                });
            }
            if (direction == "up") {

                p.push({
                    x: p[p.length - 1].x,
                    y: p[p.length - 1].y - 1
                });
            }
            if (direction == "down") {
                p.push({
                    x: p[p.length - 1].x,
                    y: p[p.length - 1].y + 1
                });
            }

ئوڭغا بۇراش بۇيرۇقى بېرىلگەندە p نىڭ ئەڭ ئاخىرقى ئېلمىنىتىنىڭy كوردىناتىنى ئۆزگەرتمەي، x كوردىناتىغا 1 كاتەك قوشۇپ بەرسەكلا ئوڭغا بۇرالغان، 1 كاتەك ئېلىۋەتسەكلا سولغا بۇرالغان ئۈنۈم چىقىدۇ. ئوخشاشلا x كوردىناتىنى ئۆزگەرتمەي، y كوردىناتىغا 1 نى قوشۇپ ئېلىپ، ئاستى – ئۈستى يۆنىلىشكا بۇراشقا بولىدۇ.
بايا دېگەندەك قۇيرۇقىدىن كېسىپ بېشىغا چاپلاپ بەرسەك يىلاننىڭ يورغىلىغان ئۈنۈمى چىقاتتى، بىراق، يىلان يىمەكلىكنى يىگەندىن كېيىن ئۇزىرىشى كېرەك، دېمەك، بىز بىر ھۆكۆمگە ئاساسەن، يىلان يىمەكنى يېگەندە قۇيرۇقىنى كەسمەي، بېشىغا يىمەك كاتەكچىسىنى ئۇلىۋەتسەكلا بولىدۇ:

if (p[p.length - 1].x == foodPositions.x && p[p.length - 1].y == foodPositions.y) {
                foodPositions.x = -1;
                foodPositions.y = -1;
            }
            else {
                clearColor(p[0]);
                p.shift();
            }

مۇنداق گەپ: ئەگەرلەردە-ئەگەرلەردە، يىلاننىڭ باش قىسمى كوردىنات قىممىتى بىلەن ئىختىيارى ئورۇنغا ھاسىل بولغان يىمەكنىڭ ئورۇن كوردىنات قىممىتى ئوخشاش بولسا، يىمەك ئورۇن كوردىنات قىممىتىگە -1 نى قايتۇرىمىز(-1 قايتۇرۇلغاندىن كېيىن سىزىش فۇنكىسيەسى ئارقىلىق باشقا ئورۇنغا يىمەكلىك سىزىمىز) ۋە يىمەكنى يىلاننىڭ بېشغا قوشۇپ، قۇيرۇقىدىن كىسىۋەتمەيمىز(شۇنىڭ بىلەن يىلان ئۇزىرايدۇ). ئورۇن كوردىنات قىممىتى ئوخشاش بولمىسا بۇرۇنقىدەكلا قۇيرۇقدىن كېسىپ بېشىغا چاپلاپ، يورغىلىغان ئۈنۈمنى چىقىرىمىز.
ئەمدىكى ئىش ئىختىيارى ئورۇنغا يىمەك ھاسىللاشقا كەلدى.(بۇ يەردە بىر قايتىلانما (递归) ئىشلىتىپ، ئەگەر ھاسىللىغان يىمەكنىڭ ئورنى يىلاننىڭ ئورنى بىلەن ئۈستىمۇ – ئۈستى چۈشۈپ قالسا، يىمەك سىزىش فۇنكىسىيەسىنى قايتا يۈرگۈپ باشقا ئورۇنغا سىزىمىز، تاكى يىلان بىلەن ئۈستىمۇ – ئۈستى چۈشۈپ قالمىغۇچە شۇنداق.

function IsInSnake(ps, p) {
        for (i = 0; i < ps.length - 1; i++) {
            if (ps[i].x == p.x && ps[i].y == p.y) {
                return true;
            }
        }
        return false;
    }

يەنى يىلاننى ھاسىل قىلغان ھەربىر كاتەكچىنىڭ ئورنىنى يىمەكنىڭ ئورنى بىلەن بىرمۇ – بىر سىلىشتۇرۇپ، ئوخشاش بولسا true بولمىسا false نى قايتۇرىمىز ۋە قايتۇرۇلغان ھۆكۈم نەتىجىسىگە ئاساسەن يىمەكنى ھاسىللاش فۇنكىسىيەسىنى بىر تەرەپ قىلىمىز.
ئەمدى يەنە بىر مەسىلە، يىلاننىڭ تامغا ئۈسسۈۋالغىنىغا ھۆكۈم قىلىش كېرەك. يەنى يورغىلاپ يۈرۈپ بېشى قىيىپ كېتىپ، سولغا بۇرالدىم دەپ ئوڭغا بۇرۇلۇپ قالسا تامغا ئۈسسىۋىلىشى مۇمكىن، ئۈسسۈپلاۋالسا ئويۇن ئاخىرلىشىدۇ. بۇنىڭغا ھۆكۈم قىلىشتا مەن canvas دائىرىسىنى 320*320 قىلىپ بەلگىلىگىنىم ۋە يىلان – يىمەك شەكىللەندۈرىدىغان كاتەكچىنى 8*8 بەلگىلىگىنىم ئۈچۈن تۆۋەندىكىدەك ھۆكۈم قىلساملا بولىدۇ:

if (p[p.length - 1].x < 0 || p[p.length - 1].x > 39 || p[p.length - 1].y < 0 || p[p.length - 1].y > 39) {
                gameOver = true;
            }

يەنى يىلاننىڭ ئەڭ بېشىدىكى بىر كاتەكچىنىڭ x,y كوردىناتى 0 دىن كىچىك بولسا سول تامغا، 39 دىن چوڭ بولسا ئوڭ تامغا ئۈسسۈگەن بولىدۇ. y كوردىناتىمۇ ئوخشاش گەپ. ئەمدى قايسى مەسىلىگە كەلدۇق؟! ھەراست، ئويۇن باشلانغاندا يىلاننىڭ دەسلەپكى ئۇزۇنلىقىنى 3 كاتەكنى چېتىپ شەكىللەندۈرىمىز. يەنى يىلانچاق ئۈستى، سول تەرەپتىن ئۈستىنى بويلاپ ئوڭ تەرەپكە يورغىلاشقا باشلايدۇ. دېمەك بۇنى تۆۋەندىكىدەك سۈكۈتلەيمىز:

var height = 8;
    var width = 8;
    var direction = "right";
    positions[0] = {
        x: 0,
        y: 0
    };
    positions[1] = {
        x: 1,
        y: 0
    };
    positions[2] = {
        x: 2,
        y: 0
    };

ئەلۋەتتە ئاۋۇ ئىككى 8 قىممەتتىكى پارامىتىر دەل بايا تىلغا ئالغان ھەربىر كاتەكنىڭ ئىگىزلىك – كەڭلىك قىممىتىدۇر. ئاندىن positions[] نىڭ ئىچىگە 3 دانە كاتەكنى پوتلاپ تىقىپ، چېتىپ بەرسەكلا يىلاننىڭ دەسلەپكى ھالىتى تامام بولىدۇ.
ئاندىن باشقا يەرلىرى ئاساسەن بىر قاراشتىلا چۈشىنىشلىك، بۇ يەردە ئارتۇق سۆزلەپ ئولتۇرمايلى. ئەسلىي كودنى Github بېتىمدىن كۆرسەڭلار بولىدۇ: مانا بۇيەر