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帧。
源文件
