Erreur sur affectation événement
Bonjour, c'est toujours relatif au même jeu du serpent. Je ne trouve pas l'erreur qui fait que ça ne marche après avoir suivi et répéter le tuto. Je pense qu'il s'agit d'un nombre impaire de d'accolade dans la 1ière partie du code. J'ai trouvé 12 ouvrantes et 11 fermantes. Avant document.onkeydown =
Le code html reste inchangé :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
| <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Jeu du serpent</title>
</head>
<body>
<h1>hello</h1>
<script src="script4.js"></script>
</body>
</html> |
et le code javascript est :
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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
| window.onload = function()
{
var canvasWidth = 900;
var canvasHeight = 600;
var blockSize = 30;
var ctx;
var delay = 100;
var snakee;
init();
function init()
{
var canvas = document.createElement('canvas');
canvas.width = canvasWidth;
canvas.height = canvasHeight;
canvas.style.border = "1px solid";
document.body.appendChild(canvas);
ctx = canvas.getContext('2d');
snakee = new Snake([[6,4],[5,4],[4,4]], "right");
refreshCanvas();
}
function refreshCanvas()
{
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
snakee.advance();
snakee.draw();
setTimeout(refreshCanvas,delay);
}
function drawBlock(ctx, position)
{
var x = position[0] * blockSize;
var y = position[1] * blockSize;
ctx.fillRect(x ,y ,blockSize ,blockSize);
}
function Snake(body, direction)
{
this.body = body;
this.direction = direction;
this.draw = function()
{
ctx.save();
ctx.fillStyle = "#ff0000";
for (var i = 0; i < this.body.length; i++)
{
drawBlock(ctx, this.body[i]);
}
ctx.restore();
};
this.advance = function()
{
var nextPosition = this.body[0].slice();
switch(this.direction)
{
case "left":
nextPosition[0]-= 1;
break;
case "right":
nextPosition[0]+= 1;
break;
case "down":
nextPosition[1]+= 1;
break;
case "up":
nextPosition[1]-= 1;
break;
default:
throw("Invalid Direction");
}
this.body.unshift(nextPosition);
this.body.pop();
};
this.setDirection = function(newDirection)
{
var allowedDirections;
switch(this.direction)
{
case "left":
case "right":
allowedDirections = ["up","down"];
break;
case "down":
case "up":
allowedDirections = ["left","right"];
break;
default:
throw("Invalid Direction");
}
if(allowedDirections.indexOf(newDirection) > -1)
{
this.direction = newDirection;
}
};
}
document.onkeydown = function.handelKeyDown(e)
{
var key = e.keyCode;
var newDirection;
switch(key)
{
case 37:
newDirection = "left";
break;
case 38:
newDirection = "up";
break;
case 39:
newDirection = "right";
break;
case 40:
newDirection = "down";
break;
default:
return;
}
snakee.setDirection(newDirection);
} |
J'ai une croix rouge à la ligne 100 : document.onkeydown = function.handelKeyDown(e)
Merci d'avance.
Diego
