我们继续这一系列文章,使用HTML5的canvas组件进行游戏开发。今天,这是相当完整的游戏例子 – 它会回顾经典的旧电脑游戏 – 坦克大战。我会教你使用阵列地图并教你如何检测活动对象(坦克)与环境(基于阵列的地图)的碰撞。 你可以点击这里阅读这一系列教程的前一篇文章:html5游戏制作入门系列教程(四)。我们的将基于之前的程序和代码进行开发。 这里有我们的演示和下载包: 在线演示…
April 29, 2015
html5游戏制作入门系列教程(四)
今天,我们继续一系列文章,使用HTML5的canvas组件进行游戏开发。今天我们要学习下元素:声音控制与动画。在我们的演示中,你会 看到一个飞龙。我们会听到持续的翅膀拍打的声音(我们将循环这个声音),和龙的怒吼声(mouseup事件)。最后,我们会让我们的龙不断的接近鼠标光标 (当我们按住鼠标)。
你可以点击这里阅读这一系列教程的前一篇文章:html5游戏制作入门系列教程(三)。我们的将基于之前的程序和代码进行开发。
这里有我们的演示和下载包:
好吧,下载所需文件,让我们开始编码!
步骤1: HTML
这里是我演示的HTML
<!DOCTYPE html> <html lang="en" > <head> <meta charset="utf-8" /> <title>html5游戏制作入门系列教程(四)</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游戏制作入门系列教程(四)</h2> <a href="http://html5gamedev.org/?p=318" class="stuts">返回原文<span>html5游戏制作入门系列教程(四)</span></a> </footer> </body> </html>
步骤2:CSS
下面是使用CSS样式。
css/main.css
今天就不把css样式贴出来了,和以前的一样,没有什么特别之处。你可以在下载包里找到它。
步骤3:JS
js/script.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 });
它是如何工作的呢?首先,我们定义的画布,背景,并载入背景图片和两个声音文件,然后我们初始化飞龙并绑定各种鼠标事件。在我们的主循环的绘制函数中,循环移动背景图像(循环),并不断更新精灵的位置,重新绘制飞龙。在我们的代码中,你可以找到一些新的有趣的方法:
1)循环背景音,使用下面的代码:
// 'Wings' music init wingsSound = new Audio('wings.wav'); wingsSound.volume = 0.9; wingsSound.addEventListener('ended', function() { // looping wings sound this.currentTime = 0; this.play(); }, false); wingsSound.play();
2)绘制动画,使用下面的代码:
var oDragonImage = new Image(); oDragonImage.src = '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);