<canvas> ne s'affiche pas
Bonjour,
J'ai un code que je n'arrive pas à faire marcher . Le code html est :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
| <!DOCTYPE html>
<html>
<head>
<title>Jeu du serpent</title>
<h1>hello</h1>
<script src="script4.js"></script>
</head>
<body>
</body>
</html> |
et le javascript :
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
| window.onload = function()
{
var cancasWidth = 900;
var canvasHeigth = 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]]);
refreshCanvas();
}
function refreshCanvas()
{
ctx.clearRect(0,0,canvasWidth, canvasHeight);
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)
{
this.body = body;
this.draw = function()
{
ctx.save();
ctx.fillStyle = "#ff0000";
for (var i = 0; i < this.body.length; i++)
{
drawBlock(ctx, this.body[i]);
}
ctx.restore();
};
}
} |
Est-ce que ça marche pour vous? Je viens de vérifier toutes les lignes 3 fois et je n'arrive pas à déboguer la situation. Je n'ai qu'une page avec hello qui s'affiche et nommé jeu du serpent. Normalement selon la démo, je devrais avoir un cadre noir et un serpent sous la forme de trois carrés rouge les uns à côtés des autres.
Merci d'avance de vos réponses.
Diego
