html5游戏制作入门系列教程（四）

最新推荐文章于 2025-04-07 23:50:16 发布

原创最新推荐文章于 2025-04-07 23:50:16 发布 · 386 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

Div / Css / XML / HTML5 专栏收录该内容

177 篇文章

订阅专栏

本文介绍如何在HTML5游戏中实现循环背景音乐与角色动画。通过实例展示了一个飞龙角色，利用HTML5 Canvas API实现了角色跟随鼠标移动、不同方向的动画切换以及连续播放背景音乐等功能。

今天，我们继续一系列文章，使用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);

结论
超级酷，不是吗？我会很高兴看到您的评论和意见。祝你好运！

在线演示源码下载

转载请注明：HTML5游戏开发者社区 » html5游戏制作入门系列教程（四）