סיכום הוראות Touch touchend יקרא לפונקציה כשיסתיים המגע עם הסמארטפון. - touchmove יקרא לפונקציה במהלך תזוזת המגע עם הסמארטפון. touchstart יקרא לפונקצי

תמליל

1 סיכום הוראות Touch touchend יקרא לפונקציה כשיסתיים המגע עם הסמארטפון. - touchmove יקרא לפונקציה במהלך תזוזת המגע עם הסמארטפון. touchstart יקרא לפונקציה כשיתחיל המגע עם הסמארטפון. preventdefault() נטרול תזוזת מסך מגע. document.addeventlistener("touchmove", InitTouch, false); document.addeventlistener("touchstart", ApplyTouch, false); שם הפונקציה שתבוצע האירוע arr = event.touches; arr.length>0 מערך מיקומי קורדינטות של נגיעות עכבר בדיקה אם המערך לא ריק האם קיימת נגיעת עכבר maxtouch = arr[arr.length - 1]; המקום האחרון במערך נגיעות האצבע x = maxtouch.pagex; שליפת מיקום קורדינטה x y = maxtouch.pagey; שליפת מיקום קורדינטה Y נטרול תזוזה של כל המסך בעת מעבר אצבע. event.preventdefault(); המטרה הפעלת הפונקציה שכתבנו בלבד בעת מעבר אצבע. var canvas ; var context; document.addeventlistener("touchstart", start, false); function start(event) { event.preventdefault(); touches = event.touches; if (touches.length > 0) { var maxtouch = touches[touches.length - 1]; canvas = document.getelementbyid("my_canvas"); context = canvas.getcontext("2d"); x = maxtouch.pagex; // Get X position y = maxtouch.pagey; // Get Y position drawsquare(x, y); דוגמא - בדוגמא זו קיימת קריאה לפונקציה start בכל פעם שנוגעים במסך המגע. הפונקציה - start מבטלת את אפשרויות התזוזה של כל המסך בעת מגע.maxTouch מכניסה את המיקום האחרון של המגע למשתנה מאתרת את נקודות x,y של המיקום האחרון של המגע. שליחה לפונקציה שתצייר ריבוע, במקום ה-"נגיעה".

2 הסבר פרוייקט canvasballtouch שימוש במשתנים גלובליים, מסייע במעבר מידע בין הפונקציות. var contextobj; var circlecenterx = 200; var circlecentery = 150; מיקום התחלתי של הכדור var dx = 1; var dy = 1; var radius = 10; הגדרת ההתקדמות של x,y גודל רדיוס הכדור var WIDTH = 400; var HEIGHT = 300; אורך ורוחב ה canvas, במהלך התוכנית נוודא שאין גלישה בתזוזה מגודל זה var PADDLE_WIDTH = 75; var PADDLE_HEIGHT = 10; מימדי המחבט var paddalex = WIDTH / 2; ; var paddaley = HEIGHT - PADDLE_HEIGHT; מיקום Y של המחבט הינו אורך הקנבאס פחות רוחב המחבט כך שתמיד המחבט צמוד לבסיס הקנבאס )לא ישתנה במהלך התוכנית( מיקום X התחלתי הינו אמצע הקנבאס )ישתנה במהלך התוכנית( var rightdown = false; var leftdown = false; מצב התחלתי מקש חץ שמאלי לא לחוץ, מקש חץ ימין לא לחוץ var intervalid; var canvaminx; var canvamaxx; var canvascolor = "white"; var paddlecolor = "#272068"; var ballcolor = "#00CE90"; var points = 0; var touches = []; משתנה הטיימר גבולות הקנבאס ביחס למסך עקרוני לגבי תזוזת המחבט ע"י העכבר נתונים התחלתיים של צבע קנבאס,מחבט, כדור, כמות נקודות הגדרת מערך נקודות המגע עם הסמארטפון document.onkeydown = onkeydown; document.onkeyup = onkeyup; document.onmousemove = onmousemove; כאשר ילחץ מקש כלשהו יקרא לפונקציה onkeydown כאשר ישוחרר מקש כלשהו מלחיצה יקרא לפונקציה onkeyup כאשר העכבר יזוז יקרא לפונקציה onmousemove document.addeventlistener("touchmove", applytouch, false);

3 function start() { canvasobj = document.getelementbyid("canvasframe"); הנקודה המינימלית הינה ה"הסט" בין הקנבאס למסך כולו. canvasobj.offsetleft; canvaminx = canvamaxx = canvaminx + WIDTH; הנקודה המקסימלית הינה המינימלית + רוחב הקבאס הדבר דרוש על מנת לדעת את מיקום לחיצת העכבר ביחס למשטח הקנבאס. )האלמנטים של הקנבאס נקבעים ביחס למערכת הצירים הפנימית של הקנבאס בעוד שקורדינטות לחיצת העכבר נקבעות ביחס לכל שטח המסך( יקרא לפונקציה במהלך תזוזת המגע עם הסמארטפון. contextobj = canvasobj.getcontext("2d"); intervalid = setinterval(gameloop, 2); canvasobj.addeventlistener("touchmove",applytouch,false); function gameloop() { clearcanvas(); movepaddles(); moveball(); document.getelementbyid('score').innerhtml = points; כל 2 מילישניות, פונקציה זו תבוצע, המחבט והכדור יצויירו במיקום ה"חדש" מספר הנקודות יתעדכן בהתאם. function clearcanvas() { drawrect(0, 0, WIDTH, HEIGHT, canvascolor); ציור מלבן בגודל ובצבע הקנבאס מעל הקנבאס. ציור "שכבות". מדמה ניקוי מסך. function movepaddles() { if (leftdown == true) { שינוי מיקום המחבט if (paddalex > 0) { שולחים לפונקציה שמציירת ריבוע paddalex = paddalex - 5; עידכון נתונים לגבי Y X, רק במידה ולא חורגים מגבולות הקנבאס. else { if (rightdown == true) { if (paddalex + PADDLE_WIDTH < WIDTH) { paddalex = paddalex + 5; drawrect(paddalex, paddaley, PADDLE_WIDTH, PADDLE_HEIGHT, paddlecolor);

4 function moveball() { drawcircle(circlecenterx, circlecentery, radius,ballcolor); if (circlecenterx + radius >= WIDTH) { dx = -dx; else if (circlecenterx - radius <= 0) { dx = -dx; else if (circlecentery - radius <= 0) { dy = -dy; else if ((circlecentery + radius >= paddaley) && (paddalex <= circlecenterx) && (circlecenterx <= paddalex + PADDLE_WIDTH)) { dy = -dy; points = points + 1; else if (circlecentery + radius >= HEIGHT) { dy = -dy; points = points - 10; circlecenterx = circlecenterx + dx; circlecentery = circlecentery + dy; function drawcircle(x, y, r, color) { contextobj.beginpath(); contextobj.fillstyle = color; contextobj.arc(x, y, r, 0, Math.PI *2, false); contextobj.fill(); פונקציה המציירת את ה"כדור" לפי פרמטרים function drawrect(x, y, w, h, color) { contextobj.fillstyle = color; contextobj.beginpath(); contextobj.rect(x, y, w, h); contextobj.fill(); פונקציה המציירת את ה"מחבט" לפי פרמטרים function onmousemove(event) { event = window.event; if ((canvaminx < (event.clientx - PADDLE_WIDTH / 2)) && ((event.clientx + PADDLE_WIDTH / 2) < canvamaxx)) paddalex = event.clientx - canvaminx - PADDLE_WIDTH / 2; בדיקה אם נקודת הלחיצה נמצאת בגבולות הקנבאס נקודת הציור הינה במונחים של מערכת הצירים של הקנבאס ואילו נקודת הלחיצה של העכבר הינה במונחים של כל המסך.ולכן יש לתרגם את הנקודה למונחים של הקנבאס. )להוריד משיעור ה- X של הנקודה את ההיסט מהמסך כולו.( מחסרים את מחצית מרוחב המחבט מנקודת הלחיצה כדי לקבל מחבט סימטרי/במרכז נק' הלחיצה.

5 function applytouch(event) { event.preventdefault(); touches = event.touches; if (touches.length>0) { var maxtouch = touches[touches.length - 1]; if ((canvaminx < (maxtouch.pagex - PADDLE_WIDTH / 2)) && ((maxtouch.pagex + PADDLE_WIDTH / 2) < canvamaxx)) בדיקה אם נקודת ה"נגיעה" נמצאת בגבולות הקנבאס paddalex = maxtouch.pagex - canvaminx - PADDLE_WIDTH / 2; במונחים של כל נקודת הציור הינה במונחים של מערכת הצירים של הקנבאס ואילו נקודת ה"מגע" הינה המסך.ולכן יש לתרגם את הנקודה למונחים של הקנבאס. )להוריד משיעור ה- X של הנקודה את ההיסט מהמסך כולו.( מחסרים את מחצית מרוחב המחבט מנקודת הלחיצה כדי לקבל מחבט סימטרי/במרכז נק' ה"נגיעה". //LEFT =37 RIGHT=39 function onkeydown(evt) { if (evt.keycode == 37) { leftdown = true; else { if (evt.keycode == 39) { rightdown = true; פונקציה המקבלת כפרמטר את האירוע בודקת איזה מקש נלחץ לפי טבלת - Unicode עדכון משתנה בוליאני בהתאם. פונקציית movepaddles תשתמש בנתונים אלו. function onkeyup(evt) { if (evt.keycode == 37) { leftdown = false; else { if (evt.keycode == 39) { rightdown = false; פונקציה המקבלת כפרמטר את האירוע בודקת איזה מקש שוחרר מלחיצה לפי טבלת - Unicode עדכון משתנה בוליאני בהתאם. פונקציית movepaddles תשתמש בנתונים אלו.

6 touchstart/end תרגיל 1 כתבו תוכנית ש-"בנגיעה" בנקודה עם ערך X זוגי, יצייר ריבוע, אי-זוגי יצייר עיגול. תרגיל 2 כתבו תוכנית שתצייר קווים, מנקודת מגע לנקודת מגע. תרגיל 3 כתבו תוכנית שיהיה במרכזה מלבן. המלבן ישנה צבע בכל קליק. תרגיל 4 כתבו תוכנית שיהיה במרכזה מלבן. לחיצה בתוך המלבן תגדיל אותו ב- 5 פיקסלים. לחיצה מחוץ למלבן תקטין אותו ב 5 פיקסלים. תרגיל 4 "ים יבשה" - כתבו תוכנית שיהיה במרכזה מלבן)יבשה(, ויופיע נקודות. במידה ונוגעים בתוך גבולות המלבן )יבשה(הניקוד יעלה, במידה ונוגעים מחוץ לגבולות המלבן )ים( הניקוד ירד. תרגיל 5 פגע בבלון. 3 ריבועים בתזוזה על ציר X+Y/Y נגיעה בתוך הריבוע "מעלים" את הריבוע מעלה את מספר הנקודות הריבוע "יופיע" שוב בתחילת המסלול תרגיל 6 פאקמן בורח ממפלצות כתבו תוכנית שבה הריבוע ממוקם בנקודת התחלה 0,0 קיימים 4 "מפלצות" )כדורים הנעים לפי )Y+X עליו לנגוע בגבולות "האוצר" )מלבן הממוקם בנקודה 350,250( ללא מגע עם "מפלצות". מגע עם "מפלצת" מחזיר לנקודת ההתחלה. ורושם "נסה שוב" מגע עם "גבולות האוצר" משנה את צבע הקנבאס, גורם לכך שיהיה רשום "ניצחת"