电脑一台
支持HTML5的浏览器 如chrome safari firefox opera
如何清空画布通过调用函数ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
如何绘制精灵和背景图片通过调用函数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;
index.html
script.js