(译)开发第一个Html5游戏(四)
本章我们继续学习用Html5 canvans 开发游戏,本章我们将加入播放声音功能,以及让游戏精灵跟随我们的鼠标运动。
JS代码:(完整代码请看文章结尾链接)
// inner variables
var canvas, ctx;
var backgroundImage;
var iBgShiftX = 100;
var dragon;
var dragonW = 75; // dragon width
var dragonH = 70; // dragon height
var iSprPos = 0; // initial sprite frame
var iSprDir = 4; // initial dragon direction
var dragonSound; // dragon sound
var wingsSound; // wings sound
var bMouseDown = false; // mouse down state
var iLastMouseX = 0;
var iLastMouseY = 0;
// -------------------------------------------------------------
// objects :
function Dragon(x, y, w, h, image) {
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.image = image;
this.bDrag = false;
}
// -------------------------------------------------------------
// draw functions :
function clear() { // clear canvas function
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}
function drawScene() { // main drawScene function
clear(); // clear canvas
// draw background
iBgShiftX -= 4;
if (iBgShiftX <= 0) {
iBgShiftX = 1045;
}
ctx.drawImage(backgroundImage, 0 + iBgShiftX, 0, 1000, 940, 0, 0, 1000, 600);
// update sprite positions
iSprPos++;
if (iSprPos >= 9) {
iSprPos = 0;
}
// in case of mouse down - move dragon more close to our mouse
if (bMouseDown) {
if (iLastMouseX > dragon.x) {
dragon.x += 5;
}
if (iLastMouseY > dragon.y) {
dragon.y += 5;
}
if (iLastMouseX < dragon.x) {
dragon.x -= 5;
}
if (iLastMouseY < dragon.y) {
dragon.y -= 5;
}
}
// draw dragon
ctx.drawImage(dragon.image, iSprPos*dragon.w, iSprDir*dragon.h, dragon.w, dragon.h, dragon.x - dragon.w/2, dragon.y - dragon.h/2, dragon.w, dragon.h);
}
// -------------------------------------------------------------
// initialization
$(function(){
canvas = document.getElementById('scene');
ctx = canvas.getContext('2d');
var width = canvas.width;
var height = canvas.height;
// load background image
backgroundImage = new Image();
backgroundImage.src = 'images/hell.jpg';
backgroundImage.onload = function() {
}
backgroundImage.onerror = function() {
console.log('Error loading the background image.');
}
// 'Dragon' music init
dragonSound = new Audio('media/dragon.wav');
dragonSound.volume = 0.9;
// 'Wings' music init
wingsSound = new Audio('media/wings.wav');
wingsSound.volume = 0.9;
wingsSound.addEventListener('ended', function() { // looping wings sound
this.currentTime = 0;
this.play();
}, false);
wingsSound.play();
// initialization of dragon
var oDragonImage = new Image();
oDragonImage.src = 'images/dragon.gif';
oDragonImage.onload = function() {
}
dragon = new Dragon(400, 300, dragonW, dragonH, oDragonImage);
$('#scene').mousedown(function(e) { // binding mousedown event (for dragging)
var mouseX = e.layerX || 0;
var mouseY = e.layerY || 0;
if(e.originalEvent.layerX) { // changes for jquery 1.7
mouseX = e.originalEvent.layerX;
mouseY = e.originalEvent.layerY;
}
bMouseDown = true;
if (mouseX > dragon.x- dragon.w/2 && mouseX < dragon.x- dragon.w/2 +dragon.w &&
mouseY > dragon.y- dragon.h/2 && mouseY < dragon.y-dragon.h/2 +dragon.h) {
dragon.bDrag = true;
dragon.x = mouseX;
dragon.y = mouseY;
}
});
$('#scene').mousemove(function(e) { // binding mousemove event
var mouseX = e.layerX || 0;
var mouseY = e.layerY || 0;
if(e.originalEvent.layerX) { // changes for jquery 1.7
mouseX = e.originalEvent.layerX;
mouseY = e.originalEvent.layerY;
}
// saving last coordinates
iLastMouseX = mouseX;
iLastMouseY = mouseY;
// perform dragon dragging
if (dragon.bDrag) {
dragon.x = mouseX;
dragon.y = mouseY;
}
// change direction of dragon (depends on mouse position)
if (mouseX > dragon.x && Math.abs(mouseY-dragon.y) < dragon.w/2) {
iSprDir = 0;
} else if (mouseX < dragon.x && Math.abs(mouseY-dragon.y) < dragon.w/2) {
iSprDir = 4;
} else if (mouseY > dragon.y && Math.abs(mouseX-dragon.x) < dragon.h/2) {
iSprDir = 2;
} else if (mouseY < dragon.y && Math.abs(mouseX-dragon.x) < dragon.h/2) {
iSprDir = 6;
} else if (mouseY < dragon.y && mouseX < dragon.x) {
iSprDir = 5;
} else if (mouseY < dragon.y && mouseX > dragon.x) {
iSprDir = 7;
} else if (mouseY > dragon.y && mouseX < dragon.x) {
iSprDir = 3;
} else if (mouseY > dragon.y && mouseX > dragon.x) {
iSprDir = 1;
}
});
$('#scene').mouseup(function(e) { // binding mouseup event
dragon.bDrag = false;
bMouseDown = false;
// play dragon sound
dragonSound.currentTime = 0;
dragonSound.play();
});
setInterval(drawScene, 30); // loop drawScene
});
原文地址 http://www.script-tutorials.com/html5-game-development-lesson-4/
Demo地址 http://www.script-tutorials.com/demos/186/index.html
源码下载 http://www.script-tutorials.com/demos/186/source.zip
分享到:
相关推荐
《HTML5 Canvas游戏开发实战》在介绍每个游戏开发的过程时,都会包括游戏分析、开发过程、代码解析和小结等相关内容,以帮助读者了解每种类型游戏开发的详细步骤,让读者彻底掌握各种类型游戏的开发思想。...
html5游戏开发进阶指南源码,Pro HTML5 Games [Aditya Ravi Shankar]著 谢光磊 译
HTML5+CSS+WEBGL网页3D游戏开发,经典教程
《HTML游戏开发》里面所有的源代码,整理成册。欢迎大家下载交流!
HTML5 移动游戏开发高级编程
《html5游戏开发》的全部源代码 有十个游戏开发的所有源码
Html5+CSS3+js动画小游戏全部源码,HTML5游戏开发,补充了上一版的欠缺的两个小程序代码。为全部《HTML+CSS3+JS动画小游戏开发》文档的源码
HTML 5 CANVAS游戏开发实战pdf电子书 随书源代码
《HTML5 Canvas游戏开发实战》在介绍每个游戏开发的过程时,都会包括游戏分析、开发过程、代码解析和小结等相关内容,以帮助读者了解每种类型游戏开发的详细步骤,让读者彻底掌握各种类型游戏的开发思想。...
基瑞编著的《HTML5Canvas核心技术:图形动画与游戏开发》是HTML5 Canvas领域的标杆之作,也是迄今为止该领域内容最为全面和深入的著作之一,是公认的权威经典、Amazon五星级超级畅销书、资深技术专家David Geary*...
Html5 CSS3 js canvas 动画小游戏源码,HTML5游戏开发,压缩包中的文件,配套《HTML5游戏开发》这本书。csdn可以找到这个书。如果找不到,联系我,我可以提供
《Cocos2d-Js开发之旅-从HTML5到原生手机游戏》源码
本人从华章图书网站下的资源 为了与大家分享 遂上传 有兴趣游戏开发的朋友可看看
《HTML5 Canvas核心技术:图形、动画与游戏开发》是HTML5 Canvas领域的标杆之作,也是迄今为止该领域内容最为全面和深入的著作之一,是公认的经典、五星级畅销书、资深技术专家David Geary新力作。它不仅全面讲解了...
新手教学,注释很详细,手把手教您,一步步实现最终效果。适合入门学习html5游戏开发的朋友源码学习,相信物有所值。
GameMaker HTML5游戏开发国内首个中文教程 图文的哦
本书共分为四大部分,第一部分主要讲述Web技术的发展及HTML5标准在移动Web技术中的应用;第二部分主要介绍HTML5的新功能和新特性如何在移动设备浏览器中使用及相关展望;第三部分主要介绍目前比较流行的两套...
HTML5 Canvas核心技术 图形、动画与游戏开发.pdf 原书电子版
HTML5有望成为网络游戏开发的热门新平台,其跨平台性已奠定了其未来发展的基础。本资源为那些愿意学习或使用HTML5及相关Web技术开发交互式游戏的开发者而编写,为大家讲解HTML5游戏开发基础教程及分享实战经验。