HTML5 精灵8方向移动+背景滚动+音效播放+鼠标事件响应

如何清空画布

通过调用函数

ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

 

如何实现背景滚动

首先我们准备了一张2532*940的背景图片。

我们规定画布的大小是1000*600。

因此我们的画布背景其实是背景图片的一个截图。

在每一帧当中,我们通过向左边移动截图窗口一定的距离，就可以制造处屏幕不断向右滚动的效果。

 

如何绘制精灵和背景图片

通过调用函数

context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)

函数说明

将一个由(image)指定的IMG 元素以(sx, sy, sw, sh)裁剪并缩放绘制到当前上下文的(dx, dy, dw, dh)指定的区域

首先，在加载完整个html文档之后，创建一个image对象

backgroundImage = new Image();

backgroundImage.src = 'image/hell.jpg';

backgroundImage.onLoad = function () {

backgroundImage.onError = function () {

console.log('Error loading the background image.');

}}

然后，在每一帧当中用这个对象进行绘图

ctx.drawImage(backgroundImage, 0 + iBgShiftX, 0, 1000, 940, 0, 0, 1000, 600);

这里要注意，image对象不能够在每一帧的更新函数中创建，因为频繁地创建对象将会导致绘图的闪烁。

 

 

如何播放音乐并为音乐播放添加事件响应

wingSound = new Audio('media/wins.wav');

wingSound.volume = 0.9;

wingSound.addEventListener('ended', function(){

this.currentTime = 0;

this.play();

}, false);

wingSound.play();

 

如何添加鼠标事件响应以及获得鼠标点击位置的坐标

$('#scene').mousedown(){function(e){

});

$('#scene').mousemove(){function(e){

});

$('#scene').mouseup(){function(e){

});

这里要注意不要把mousedown写成mouseDown。

如何获得鼠标点击位置的坐标

var mouseX = e.layerX || 0;

var mouseY = e.layerY || 0;

if (e.originalEvent.layerX) {

mouseX = e.originalEvent.layerX;

mouseY = e.originalEvent.layerY;

 

如何实现定时更新

通过

setInterval(drawScene, 30);//loop drawScene

实现更新，这里定义每一帧的间隔是30ms

也就是每秒大概有33帧。

源文件

点击打开链接