多语言展示
当前在线:1552今日阅读:112今日分享:19

HTML5 精灵移动

HTML5 精灵8方向移动+背景滚动+音效播放+鼠标事件响应实现功能实现精灵(一只小火龙)会向着鼠标点击的位置移动,同时在鼠标释放时小龙会发出叫声。背景是滚动的地狱图片。同时也可以直接将鼠标放在小龙身上拖动小龙
工具/原料
1

电脑一台

2

支持HTML5的浏览器 如chrome safari firefox opera

方法/步骤
1

如何清空画布通过调用函数ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

2

如何绘制精灵和背景图片通过调用函数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对象不能够在每一帧的更新函数中创建,因为频繁地创建对象将会导致绘图的闪烁。

3

如何播放音乐并为音乐播放添加事件响应wingSound = new Audio('media/wins.wav');       wingSound.volume = 0.9;       wingSound.addEventListener('ended', function(){           this.currentTime = 0;           this.play();       }, false);       wingSound.play();

4

如何添加鼠标事件响应以及获得鼠标点击位置的坐标$('#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;

6

index.html

7

script.js

推荐信息