htwkmooc/codeocean
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

allow Turtle graphic to use arrow keys

Browse Source
This commit is contained in:
Sebastian Serth
2020-02-02 12:36:52 +01:00
parent f07cad4da5
commit e3e27f454d
1 changed files with 35 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
app/assets/javascripts/turtle.js
View File

@ -9,6 +9,40 @@ function Turtle(pipe, canvas) {
this.canvas = canvas; // jQuery object
this.items = [];
this.canvas.off('click');
let sendEvent = function (x, y) {
pipe.send(JSON.stringify({
'cmd': 'canvasevent',
'type': '<Button-1>',
'x': x,
'y': y
}));
pipe.send('\n');
};
$(document).keydown(function(e) {
switch(e.which) {
case 37: // left
sendEvent(150, 170);
break;
case 38: // up
sendEvent(170, 150);
break;
case 39: // right
sendEvent(190, 170);
break;
case 40: // down
sendEvent(170, 190);
break;
default: return; // exit this handler for other keys
}
e.preventDefault(); // prevent the default action (scroll / move caret)
});
this.canvas.click(function (e) {
if (e.eventPhase !== 2) {
return;
@ -27,13 +61,7 @@ function Turtle(pipe, canvas) {
xpos = e.offsetX;
ypos = e.offsetY;
}
pipe.send(JSON.stringify({
'cmd': 'canvasevent',
'type': '<Button-1>',
'x': xpos - dx,
'y': ypos - dy
}));
pipe.send('\n');
sendEvent(xpos - dx, ypos - dy);
});
}