בשלב זה נרצה לגרום לתגובה לפעולות המשתמש.
בעת הלחיצה על הלהבה עצמת הלהבה וצליל האש יגברו והאור המרצד על הקירות יתרחב. בעת עזיבת לחצן העכבר המצב יחזור לקדמותו.
דבר ראשון ניצור אלמנט שישמש מעין כפתור נסתר בדיוק מעל הלהבה ללא תלות ברזולוציית המסך.
את האפקט הזה נקבל מהגדרות מיקום יחסיות.
לאחר משחק עם האפשרויות הצלחתי להוסיף אלמנט <div> במיקום טוב. במהלך החיפוש שיניתי את צבע הרקע לצבע שניתן להבחין בו ולאחר קבלת התוצאה הרצויה הסרתי את צבע הרקע: <div style="padding: 10px; width: 10%;
height: 13%; position: absolute; top: 75%; left: 43%;">
</div>
בקובץ fire.js נקרא לראשונה לפונקציות של jQuery.
$("div").mousedown(function () {
particle_count = 500;
for (var i = 0; i < particle_count; i++) {
particles.push(new particle());
}
snd.volume = 1;
});
$("div").mouseup(function () {
particle_count = 100;
particles.splice(0, particle_count);
particles.length = particle_count;
snd.volume = 0.2;
});
לחיצה על הלחצן על מיקומו של אלמנט <div> תגרום להוספת 500 חלקיקים חדשים למערך החלקיקים particles בנוסף לקיימים.
עוצמת השמע תהיה מירבית.
עזיבת הלחצן תחתוך ממערך החלקיקים ותשמור רק את 100 החלקיקים הראשונים במערך.
עוצמת השמע תרד שוב, כמו בהגדרה הראשונית, ל- 20%.
רדיוס האור המרצד סביב המדורה גם כן יגדל, לפונקציית ()glow נוספה השורה התלויה במספר החלקיקים:
//location
r = (x1 > y1 ? x1 : y1);
r = (particle_count > 100 ? 1.5 * r: r);
t = Math.random() * 0.02;
לאחר העלאת האפליקציה לטלפון אנדרואיד התגלו 2 בעיות:
- הקול כלל לא נשמע.
- פונקציית הקליק של העכבר במסך מגע לא יוצרת תוצאה רצוייה במקרה הזה.
בינתיים ניתן להתרשם מהתוצאה כאן.