Déplacement en courbe avec le clavier

Bonjour,

Je suis un débutant en JavaScript et dans le cadre d une formation en Wedévelopper. On m'a demander de recrée un Curvytron mais en mode solo, le seul problème que je rencontre actuellement se situe au niveau des déplacement avec le clavier et je me demandais comment le résoudre ? Car j ai trouver de nombreux tutoriel pour les déplacement avec le clavier mais des mouvement en courbe comme dans cette exemple je n en ai jamais vu.

Je laisse mon code si dessous et le lien de l exemple du jeu
site jeu : http://www.curvytron.com/#/

Mon Code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
///VARIABLE/////////////////////////////////////////
 
//Definis les standard ou cree le jeu//
	var canvas = document.getElementById("mygame");
	var ball = canvas.getContext("2d");
	var boxbonus = canvas.getContext("2d");
// position de depart de la ball//
	var x = Math.random()*canvas.width-50;
	var y = Math.random()*canvas.height-50;
// position de depart de la ball//
	var boxx = Math.random()*canvas.width-50;
	var boxy = Math.random()*canvas.height-50;
//deplacement //
	var dx=+1;
	var dy=-1;
 
//Touche//
	var rightPressed = false;
	var leftPressed = false;
 
//Defini l emplacement
	var BallX = (canvas.width)/2;
 
//Defini les valeur bonus
	var bonus=Math.floor(Math.random() * 10) + 1;
	var speed=10;
	var strong= 7;
	var point=0;
 
////CREATION DE LA BALL///////////////////////////////
 
// parametre//
 
	function draw() {
	ball.beginPath();
	    ball.arc(x, y, strong, point, Math.PI*2);
	    ball.fillStyle = "#0095DD";
	    ball.fill();
	    ball.closePath();
	    x += dx;
	    y += dy;
	}
 
 
////CREATION DE LA BALL///////////////////////////////
 
// parametre//
 
	function spawn() {
		boxbonus.beginPath();
	    boxbonus.arc(boxx, boxy, 10, 0, Math.PI*2);
	    boxbonus.fillStyle = "GoldenRod ";
	    boxbonus.fill();
	    boxbonus.closePath();
	}
 
//// LES CONTROLES /////////////////////////////////////
// section touche//
 
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);
 
	function keyDownHandler(e) {
	    if(e.keyCode == 39) {
	        rightPressed = true;
	    }
 
	    else if(e.keyCode == 37) {
	        leftPressed = true;
	    }
	}
 
	function keyUpHandler(e) {
	    if(e.keyCode == 39) {
	        rightPressed = false;
	    }
	    else if(e.keyCode == 37) {
	        leftPressed = false;
	    }
	}
 
	if(rightPressed) {
	    dx += 7;
	}
	else if(leftPressed) {
	    dx -= 7;
}