html5背景切换效果,html5 游戏背景切换

游戏的背景图可以是只有一个(很长很长)，也可以是分开有几个相同大小的小图。

这里写两个小例子，第一个是单次移动一张很长很长的背景图：

/p>

"http://www.w3.org/TR/html4/loose.dtd">

var w = 900;

var h = 400;

var x0 = 0;

var y0 = 0;

var ctx0;

var image0= new Image();

image0.src ="background.jpg";

function init()

{

ctx0 = document.getElementById('canvas').getContext('2d');

setInterval(paintback,50);

}

function paintback()

{

x0 +=10;

ctx0.clearRect(0,0,w,h);

ctx0.drawImage(image0,x0,y0,w,h,0,0,w,h);

}

I am sorry that YOU CAN'T USE the html5

另一个是循环场景的切换：

/p>

"http://www.w3.org/TR/html4/loose.dtd">

var w = 900;

var h = 600;

var x0 = 0;

var y0 = 0;

var x1 = w;

var y1 = 0;

var x2 = 2*w;

var y2 = 0;

var move = 100;

var ctx0;

var image0= new Image();

image0.src ="0.jpg";

var image1 = new Image();

image1.src = "0.jpg"

var image2 = new Image();

image2.src = "0.jpg"

function init()

{

ctx0 = document.getElementById('canvas').getContext('2d');

setInterval(paintback,100);

}

function paintback()

{

ctx0.clearRect(0,0,w,h);

x0 +=move;

x1 +=move;

x2 +=move;

if(x0>=2*w)

{

x0=move-w;

}

if(x1>=2*w)

{

x1=move-w;

}

if(x2>=2*w)

{

x2=move-w;

}

ctx0.drawImage(image0,x0,y0,w,h);

ctx0.drawImage(image1,x1,y1,w,h);

ctx0.drawImage(image2,x2,y2,w,h);

}

I am sorry that YOU CAN'T USE the html5

当然了，如果添加逻辑的话，setInterval果断改成事件触发就好了。