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 canvasWidth = 900;
var canvasHeight = 600;
var blockSize = 30;
var ctx;
var delay = 100; //fonction qui créée du temps (0.1 secondes).
var snakee;
init();//j'exécute ma fonction 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]);//le body c'est [6,4],[5,4],[4,4].
refreshCanvas();
}
function refreshCanvas()//On dessine un serpent et non plus des rectangles.
{
ctx.clearRect(0, 0, canvasWidth, canvasHeight);//On veux effacer le contenu.
snakee.draw();
setTimeout(refreshCanvas, delay);//On veut éxécuter la fonction refreshCanvas. Le delay c'est 0.1 sec.
}
function drawBlock(ctx, position)
{
var x = position[0] * blockSize;
var y = position[1] * blockSize;
ctx.fillRect(x, y, blockSize, blockSize);
}
function Snake(body)//notre serpent a un corps qui sera 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();
};
}
} |
Partager