(译)开发第一个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游戏开发的五个最佳实践.pdf是一篇关于HTML5游戏开发的文章,文章中提到了HTML5的特点和优势,以及五个最佳实践来提高HTML5游戏开发的效率和质量。下面是对文章的详细解读和知识点的总结。 HTML5的特点和优势 ...
1. **Canvas元素**:HTML5的Canvas是一个二维可绘图区域,通过JavaScript来绘制图形,包括游戏中的角色、背景和动态效果。开发者可以通过`context`对象的各种方法如`fillRect()`、`strokeRect()`、`beginPath()`等...
HTML5 移动游戏开发是近年来随着移动设备普及和技术进步而兴起的一个重要领域。HTML5技术以其跨平台、易学习和高效的特点,为开发者提供了一种便捷的方式,可以在多个平台上创建丰富的互动体验,尤其是游戏。Pascal ...
随着HTML5标准的不断成熟和完善,它已经成为一个非常有吸引力的游戏开发平台,特别是在移动设备上。 - **特点**: - **开放性**:HTML5是一种开放的技术,无需任何插件即可在现代浏览器中运行。 - **跨平台性**:...
HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,为创建丰富的交互式应用和游戏提供了可能。在这个“HTML5 Canvas游戏开发实战”中,我们将深入探讨如何利用Canvas API来构建游戏,...
吃豆人(Pacman)是一款经典的街机游戏,用HTML5来重制这个游戏,可以深入理解HTML5的潜力和游戏开发的基本原理。 1. **HTML5 Canvas** 吃豆人游戏的核心在于图形绘制。HTML5的Canvas元素提供了一个二维绘图表面,...
《Cocos2d-Js开发之旅-从HTML5到原生手机游戏》是一本深入探讨Cocos2d-Js框架的书籍,旨在帮助开发者从HTML5游戏开发过渡到原生移动平台的游戏制作。Cocos2d-Js是Cocos2d-x家族的一员,是一个跨平台的、基于...
2. Canvas游戏开发:Canvas是HTML5中的一个绘图元素,通过JavaScript进行动态绘图,实现游戏场景、角色动画和交互效果。开发者需要掌握路径绘制、图像处理、定时器事件等技巧。 3. Web Audio API:HTML5的Web Audio...
接下来,lufylegend框架是一个专门用于HTML5游戏开发的库,它简化了HTML5 Canvas的使用,提供了更加方便的游戏开发接口和组件。lufylegend包含了一系列的游戏开发工具,如场景管理、动画系统、物理引擎等,帮助...
◆ 阐释如何择机选用三种主要方法(CSS3、SVG或画布)之一来构建HTML游戏 ◆ 介绍使用HTML5构建实时多玩家游戏的标准模式 ◆ 讲述JavaScript游戏开发基础知识 ◆ 分步讲解如何创建2D平台动作游戏以及构建非传统多人...
01 HTML5 Canvas核心技术—图形、动画与游戏开发 02 HTML5 Games Development by Example 03 HTML5 Games Most Wanted (HTML5游戏编程必备) 04 HTML5 在游戏开发中的应用
近年来,基于HTML5技术的游戏开发已经成为游戏行业最热门的关键词之一。基于HTML5技术的游戏开发有其独特的跨平台性和轻量性,获得了很好的用户体验。 HTML5游戏开发的优势包括: 1. 安全:HTML5游戏与APP游戏的...
【标题】基于lufylegend.js开发的HTML5小游戏 HTML5小游戏的开发近年来变得越来越流行,这得益于HTML5技术的不断成熟以及浏览器对它的广泛...这对于想要踏入HTML5游戏开发领域的初学者来说,是一个很好的实践案例。
总的来说,财神HTML5游戏源码是一个可以让你深入了解HTML5游戏开发的实践案例,通过对源码的学习和实践,你可以提升自己在Web游戏开发领域的技能,同时也能了解到如何将HTML5的新特性应用到实际项目中。
《UE5 100%蓝图开发Steam 多人孤岛生存游戏》是一门专注于使用虚幻引擎5(UE5)进行游戏开发的课程。在这个课程中,开发者将学习如何利用UE5强大的蓝图系统,完全不涉及任何编程语言,来构建一款在Steam平台上发布的...
1. **HTML5 Canvas**: HTML5的Canvas元素是一个二维绘图表面,允许开发者通过JavaScript进行动态图形绘制。在这些小游戏案例中,大部分的游戏逻辑和动画效果都是通过Canvas API实现的,例如`drawImage()`用于绘制...
HTML5 Canvas核心技术 图形、动画与游戏开发.pdf 原书电子版
[Wrox] HTML5 移动游戏开发 高级编程 (英文版) [Wrox] Professional HTML5 Mobile Game Development (E-Book) ☆ 出版信息:☆ [作者信息] Pascal Rettig [出版机构] Wrox [出版日期] 2012年09月19日 [图书...
HTML5作为现代网页开发的标准,引入了一系列增强网页体验的功能,对于初学者来说,它提供了一个友好的学习平台,尤其是对想要尝试游戏开发的人来说。 Canvas是HTML5中的一个核心元素,它是一个二维绘图上下文,允许...