פיתוח משחקים ב JavaScript – מבוסס על משחק סופר 8 – חלק 5

24/03/2013

זהו החלק האחרון בנושא סופר 8 , אני אמשיך להרחיב בנושא JavaScript ופיתוח מחשקים בכללי אבל היום אני רוצה לסגור את הדברים הבסיסיים בפיתוח משחק סופר 8.

בחלק הקודם פיתוח משחקים ב JavaScript – מבוסס על משחק סופר 8 – חלק 4 דיברנו על איך להפוך את המשחק ליותר אינטרקטיבי ע”י הוספת רקעים ואלמנטים נוספים למשחק,  ראינו איך אפשר בצורה קלה ונוחה לטעון את כל הגרפיקה (ועוד) בעזרת ספריית PreloadJS ולהתחיל את המשחק כאשר קיבלנו את כל הדברים בנחוצים למשחק.

בפוסט היום נראה איך אפשר לבצע קפיצה של המשתמש (לא רק אנימציה) וכמובן אחר הנושאים החשובים ביותר- התנגשות עם אובייקטים – Collision.

image

לדוגמא המלאה

בהמשך מהפוסט הקודם נוסיף את הקוד הבא תחת פונקציית handleComplete על מנת לטעון אבן למשחק שלנו:

image

case "rock":
    var g = new createjs.Graphics()
    g.beginBitmapFill(result);
    g.drawRect(0, 0, 45, 44)
    rock = new createjs.Shape(g);
    rock.y = h - 119;
    rock.x = w;
    rock.height = 44;
    rock.width = 45;
    break;

כעת נשאר להוסיף אותה לאובייקט Stage על מנת שתופיע במשחק:

stage.addChild(sky, ground, hill, sun, player, rock);

עכשיו שיש אבן במשחק בואו נכניס אפשרות תלקפוץ מעליה, על מנת לבצע זאת נירשם ל – stagemousedown על מנת לתפוס לחיצה של העכבר של המשחק, כאשר נקבל פעולה זאת ננגן את פעולה הקפיצה ונשנה את הערך של isJumping ל – true.

נוסיף את הקוד הבא תחת פונקציית handleComplete לפני הפעלת הטיימר – setFPS.

stage.addEventListener("stagemousedown", function () {
    if (isJumping) return;
    play("jump_h");
    gameOver = false;
    isJumping = true;
});

כעת נוסיף את הקוד שישנה את מיקום הדמות על ציר Y כך שנוכל לקפוץ מעל האבן, הקוד הבא אינו הפתרון הנכון יותר אבל לדוגמא שלנו הוא פשוט ועובד, בעיקרון אפשר להוסיף הרבה קוד נוסף לביצוע פעולה זאת על ידי טיימר או מיקום הדמות אבל בשבילנו זה מספיק כרגע.

הקוד בודק שהדמות לא נמצאת באוויר (אין קפיצה כפולה), ומפעיל טיימר של שניה אחת, לאחר אותה שניה הטיימר יחזיר את הדמות לקרקע, אבל לפני זה המאפיין ה – y של השחקן יעלה ב – 4 פיקסלים כלפי מעלה עד לגובה מקסימלי, כאשר הדמות תגיע לגובה מקסימלי הדמות תתחיל בירידה כלפי מטה.

function handleJump() {
    if (isJumping) {
        if (onTheAir == null) {
            onTheAir = setTimeout(function () {
                isJumping = false;
                player.y = playerBaseY;
                onTheAir = null;
                goingDown = false;
                top = false;
            }, 1000);
        }

        if (goingDown && player.y <= playerBaseY) {
            player.y += 4;
        }
        else {
            player.y -= 4;
            if (player.y <= maxJumpHeight)
                goingDown = true;
        }
    }
}

על מנת לבצע את הקוד נוסיף קריאה לפונקציית handleJump תחת tick:

function tick() {
    handleJump();
    ...
}

כעת נוכל לבצע קפיצה בעזרת לחיצה על מקש שמאלי על המשחק.

דבר אחרון שנשאר לנו הוא להתמודד עם התנגשות של שני אובייקטים במשחק, כלומר עם השחקן יתנגש באבן אז הדמות תיפול.

ממליץ לכם לקרוא – Object/Object Intersection, ולהתעניין קצת יותר בנושא כי הוא בהחלט קצת מורכב, הרעיון המרכזי הוא לדעת מתי הדמות או אבן מתנגשות אחת בשניה, יש נוסחאות שונות לחשב את זה (תלוי גם עם הדמות מרובעות או מעגליות).

 

function checkRectIntersection(r1, r2) {
    var deltax = r1.x - r2.x;
    var deltay = r1.y - r2.y;
    var dist = 25;
    if (Math.abs(deltax) < dist && Math.abs(deltay) < dist) {
        if (Math.sqrt(deltax * deltax + deltay * deltay) < dist) {
            return true;
        }
    }
    return false;
}

עכשיו לחלק הקוד האחרון של המשחק, פונקציית HandleCollision אשר תקרא מתוך פונקציית tick:

function HandleCollisions() {
    var a = getCollideableItemBounds(player);
    var b = getCollideableItemBounds(rock);

    var oppss = checkRectIntersection(a, b);

    if (oppss && !gameOver) {
        console.log(oppss);
        gameOver = true;
        play("fall_h");
    }
}

וסיימנו…. כעת כאשר הדמות תגיע למרחב של האבן המשחק יעצר ודמות תיפול לרצפה, לחיצה על קפיצה תמשיך את המשחק.

לדוגמא המלאה

Add comment
facebook linkedin twitter email

Leave a Reply