HTML5游戏开发系列教程4(译)
2013-07-06 09:00
507 查看
原文地址：http://www.script-tutorials.com/html5-game-development-lesson-4/
这篇文章是我们继续使用canvas来进行HTML5游戏开发系列的文章，我们要学习下一个元素：精灵动画和基本的声音处理。在我们这个示例中，你将看见一直正在飞的龙，我们能一直听见它翅膀扇动的声音，当鼠标释放事件发生时还有龙咆哮的声音。最后我们将教会龙移动到鼠标按下处。
前一篇的的介绍在HTML5游戏开发系列教程3(译)。
第一步：HTML
index.html
第二步：CSS
css/main.css
这次我将不会写出css的代码了--它仅仅是页面布局设计样式而已，没有啥特殊的，可以从源代码包中获取。
第三步：JS
js/script.js
程序是怎样实现的：首先我们定义了画布，上下文，然后加载了背景图片，两个声音，再初始化我们的龙和绑定了不同的鼠标事件。在我们主循环重绘方法中，我移动了背景图片，并更新了帧的位置，最后画龙。在我们的代码里你可以发现几个有趣的方法：
循环背景音乐：
Draw sprites
所以是这样的，我们加载原始的图片(有许多子图像的图片)，然后剪切图片的一部分内容用来显示，再移动它的位置，接着循环这样画。
源代码下载地址：http://www.script-tutorials.com/demos/186/source.zip
下面介绍：context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); 参考：http://www.w3school.com.cn/html5/canvas_drawimage.asp
该方法主要剪切图像，并在画布上定位被剪切的部分
这篇文章是我们继续使用canvas来进行HTML5游戏开发系列的文章，我们要学习下一个元素：精灵动画和基本的声音处理。在我们这个示例中，你将看见一直正在飞的龙，我们能一直听见它翅膀扇动的声音，当鼠标释放事件发生时还有龙咆哮的声音。最后我们将教会龙移动到鼠标按下处。
前一篇的的介绍在HTML5游戏开发系列教程3(译)。
第一步：HTML
index.html
<!DOCTYPE html> <html lang="en" > <head> <meta charset="utf-8" /> <title>HTML5 Game Development - Lesson 4 | Script Tutorials</title> <link href="css/main.css" rel="stylesheet" type="text/css" /> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript" src="js/script.js"></script> </head> <body> <div class="container"> <canvas id="scene" width="1000" height="600"></canvas> </div> <footer> <h2>HTML5 Game Development - Lesson 4</h2> <a href="http://www.script-tutorials.com/html5-game-development-lesson-4/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a> </footer> </body> </html>
第二步：CSS
css/main.css
这次我将不会写出css的代码了--它仅仅是页面布局设计样式而已，没有啥特殊的，可以从源代码包中获取。
第三步：JS
js/script.js
// 内部变量
var canvas, ctx;
var backgroundImage;
var iBgShiftX = 100;
var dragon;
var dragonW = 75; // 龙的宽度
var dragonH = 70; // 龙的高度
var iSprPos = 0; // 龙的初始动画帧
var iSprDir = 4; // 龙的初始方向(朝左)
var dragonSound; // 龙的声音
var wingsSound; // 翅膀声音
var bMouseDown = false; //鼠标是否按下
var iLastMouseX = 0; //鼠标移动前一个位置的x坐标
var iLastMouseY = 0; //鼠标移动前一个位置的y坐标
// -------------------------------------------------------------
// 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;
}
// -------------------------------------------------------------
// 清除整个画布
function clear() {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}
//画整个屏幕
function drawScene() {
clear(); // 清楚画布
// 画背景图片
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;
}
// 一旦鼠标按下，龙就朝那个方向移动
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;
// 加载背景图片
backgroundImage = new Image();
backgroundImage.src = 'images/hell.jpg';
backgroundImage.onload = function() {
}
backgroundImage.onerror = function() {
console.log('Error loading the background image.');
}
// 龙声音初始化
dragonSound = new Audio('media/dragon.wav');
dragonSound.volume = 0.9;
// 翅膀声音初始化
wingsSound = new Audio('media/wings.wav');
wingsSound.volume = 0.9;
wingsSound.addEventListener('ended', function() { // 循环播放翅膀扇动的声音
this.currentTime = 0;
this.play();
}, false);
wingsSound.play();
//龙的初始化
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;
}
// 保存最后移动的坐标
iLastMouseX = mouseX;
iLastMouseY = mouseY;
// 拖动龙
if (dragon.bDrag) {
dragon.x = mouseX;
dragon.y = mouseY;
}
// 根据鼠标的位置改变龙的方向
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;
// 播放龙的声音
dragonSound.currentTime = 0;
dragonSound.play();
});
setInterval(drawScene, 30); // loop drawScene
});程序是怎样实现的：首先我们定义了画布，上下文，然后加载了背景图片，两个声音，再初始化我们的龙和绑定了不同的鼠标事件。在我们主循环重绘方法中，我移动了背景图片，并更新了帧的位置，最后画龙。在我们的代码里你可以发现几个有趣的方法：
循环背景音乐：
// 翅膀声音初始化
wingsSound = new Audio('media/wings.wav');
wingsSound.volume = 0.9;
wingsSound.addEventListener('ended', function() { // 循环播放翅膀扇动的声音
this.currentTime = 0;
this.play();
}, false);
wingsSound.play();Draw sprites
var oDragonImage = new Image();
oDragonImage.src = 'images/dragon.gif';
oDragonImage.onload = function() {
}
....
// update sprite positions
iSprPos++;
if (iSprPos >= 9) {
iSprPos = 0;
}
// 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);所以是这样的，我们加载原始的图片(有许多子图像的图片)，然后剪切图片的一部分内容用来显示，再移动它的位置，接着循环这样画。
源代码下载地址：http://www.script-tutorials.com/demos/186/source.zip
下面介绍：context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); 参考：http://www.w3school.com.cn/html5/canvas_drawimage.asp
该方法主要剪切图像，并在画布上定位被剪切的部分
参数说明：
| 参数 | 描述 |
|---|---|
| img | 规定要使用的图像、画布或视频。 |
| sx | 可选。开始剪切的 x 坐标位置。 |
| sy | 可选。开始剪切的 y 坐标位置。 |
| swidth | 可选。被剪切图像的宽度。 |
| sheight | 可选。被剪切图像的高度。 |
| x | 在画布上放置图像的 x 坐标位置。 |
| y | 在画布上放置图像的 y 坐标位置。 |
| width | 可选。要使用的图像的宽度。（伸展或缩小图像） |
| height | 可选。要使用的图像的高度。（伸展或缩小图像） |
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTML5游戏开发系列教程6(译)
- 【html5 2.5d游戏】卡丁车山寨版开发教程系列-1
- HTML5游戏开发系列教程7(译)
- HTML5游戏开发系列教程2(译)
- HTML5游戏开发系列教程8(译)
- HTML5游戏开发系列教程5(译)
- HTML5游戏开发系列教程3(译)
- HTML5游戏开发系列教程1(译)
- HTML5开发 页游/手游动画及游戏系列教程(Game Tutorial):（一）物体动起来吧
- HTML5开发 页游/手游动画及游戏系列教程(Game Tutorial):（二）基本动画（canvas先生很忙）
- HTML5游戏开发系列教程9(译)
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial)：(四十七)远距离单体攻击与单体魔法
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial)：(四十三)制作游戏主菜单面板及鼠标左右键快捷技能栏
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial)：(六)完美移动
- cocos2d-x游戏开发系列教程-坦克大战游戏之坦克的显示
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial)：(二十九) 人工智能（AI）之追踪者
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial)：(三十八)地图间的传送与切换
- cocos2d-x游戏开发系列教程-超级玛丽10-怪物与马里奥冲突检测
- CitrusEngine系列教程二：结合starling和Box2D开发游戏