HTML5游戏开发系列教程3
原文地址：http://www.script-tutorials.com/html5-game-development-navigating-your-spaceship-lesson-3/
今天我们将会增加动画，和一些其他有趣的功能。我们这个示例包括一个在太空飞行的太空船，然后还有个新的组件-对话框。这个对话框包含两页，按钮用来切换这两页，并且会隐藏该对话框当第二次点击时。
前一篇的的介绍在HTML5游戏开发系列教程2(译)。
第一步：HTML
<!DOCTYPE html> <html lang="en" > <head> <meta charset="utf-8" /> <title>HTML5 Game Development - Lesson 3 | 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 type="text/javascript" src="js/jquery-2.0.0.min.js"></script> <script type="text/javascript" src="js/script.js"></script> </head> <body> <div class="container"> <canvas id="scene" width="800" height="600"></canvas> </div> <footer> <h2>HTML5 Game Development - Lesson 3</h2> <a href="http://www.script-tutorials.com/html5-game-development-navigating-your-spaceship-lesson-3" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a> </footer> </body> </html>
第二步：CSS
css/main.css
/* general styles */
*{
margin:0;
padding:0;
}
@font-face {
font-family: "DS-Digital";
src: url("../fonts/Ds-digib.ttf");
}
body {
background-color:#bababa;
background-image: -webkit-radial-gradient(600px 300px, circle, #ffffff, #bababa 60%);
background-image: -moz-radial-gradient(600px 300px, circle, #ffffff, #bababa 60%);
background-image: -o-radial-gradient(600px 300px, circle, #ffffff, #bababa 60%);
background-image: radial-gradient(600px 300px, circle, #ffffff, #bababa 60%);
color:#fff;
font:14px/1.3 Arial,sans-serif;
min-height:1000px;
}
.container {
width:100%;
}
.container > * {
display:block;
margin:50px auto;
}
footer {
background-color:#212121;
bottom:0;
box-shadow: 0 -1px 2px #111111;
display:block;
height:70px;
left:0;
position:fixed;
width:100%;
z-index:100;
}
footer h2{
font-size:22px;
font-weight:normal;
left:50%;
margin-left:-400px;
padding:22px 0;
position:absolute;
width:540px;
}
footer a.stuts,a.stuts:visited {
border:none;
text-decoration:none;
color:#fcfcfc;
font-size:14px;
left:50%;
line-height:31px;
margin:23px 0 0 110px;
position:absolute;
top:0;
}
footer .stuts span {
font-size:22px;
font-weight:bold;
margin-left:5px;
}
h3 {
text-align:center;
}
#scene {
position:relative;
}
第三步：JS
js/jquery-2.0.0.min.js(原文中使用的是1.5.2)
// 内部变量 var canvas, ctx; var button; var backgroupImage; var spaceShip; var iBgShiftX = 1024; var bDrawDialog = true; //是否显示对话框 var iDialogPage = 1; // 按钮 function Button(x, y, w, h, state, image) { this.x = x; this.y = y; this.w = w; this.h = h; this.state = state; this.imageShift = 0; this.image = image; } //太空船 function SpaceShip(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 drawDialog() { if (bDrawDialog) { var bg_gradient = ctx.createLinearGradient(0, 200, 0, 400); bg_gradient.addColorStop(0.0, 'rgba(160, 160, 160, 0.8)'); bg_gradient.addColorStop(1.0, 'rgba(250, 250, 250, 0.8)'); //画一个矩形对话框 ctx.beginPath(); ctx.fillStyle = bg_gradient; ctx.moveTo(100, 100); ctx.lineTo(700, 100); ctx.lineTo(700, 500); ctx.lineTo(100, 500); ctx.closePath(); ctx.fill(); ctx.lineWidth = 2; ctx.strokeStyle = 'rgbs(128, 128, 128, 0.5)'; ctx.stroke(); ctx.font = '42px MONACO'; ctx.textAlign = 'center'; ctx.textBaseline = 'top'; ctx.shadowColor = '#000'; ctx.shadowOffsetX = 2; ctx.shadowOffsetY = 2; ctx.shadowBlur = 2; ctx.fillStyle = '#fff'; if (iDialogPage == 1) { ctx.fillText('Welcome to lesson #3', ctx.canvas.width/2, 150); ctx.font = '24px MONACO'; ctx.fillText('After closing dialog you will able', ctx.canvas.width / 2, 250); ctx.fillText('to handle with spaceship with your mouse', ctx.canvas.width / 2, 280); } else if (iDialogPage == 2) { ctx.fillText('Second page of dialog', ctx.canvas.width/2, 150); ctx.font = '24px MONACO'; ctx.fillText('Any another text', ctx.canvas.width / 2, 250); } } } //画整个屏幕 function drawScene() { clear(); iBgShiftX -= 10; if (iBgShiftX <= 0) { iBgShiftX = 1024; } ctx.drawImage(backgroundImage, 0 + iBgShiftX, 0, 1024, 768, 0, 0, 800, 600); //画太空船 ctx.drawImage(spaceShip.image, 0, 0, spaceShip.w, spaceShip.h, spaceShip.x - 128, spaceShip.y - 128, spaceShip.w, spaceShip.h); //画对话框 drawDialog(); //画按钮 ctx.drawImage(button.image, 0, button.imageShift, button.w, button.h, button.x, button.y, button.w, button.h); //画按钮上的文本 ctx.font = '22px MONACO'; ctx.fillStyle = '#ffffff'; ctx.fillText('next/hide/show', 400, 465); ctx.fillText('dialog', 400, 500); } //初始化 $(function() { canvas = document.getElementById('scene'); ctx = canvas.getContext('2d'); var width = canvas.width; var height = canvas.height; //加载背景图片 backgroundImage = new Image(); backgroundImage.src = 'images/stars.jpg'; backgroundImage.onload = function() { } backgroundImage.onerror = function() { console.log('Error loading the background image.') } //初始化太空船 var oSpShipImage = new Image(); oSpShipImage.src = 'images/space_ship.png'; oSpShipImage.onload = function() { } spaceShip = new SpaceShip(400, 300, 256, 256, oSpShipImage); //加载按钮的图片 var buttonImage = new Image(); buttonImage.src = 'images/button.png'; buttonImage.onload = function() { } button = new Button(310, 450, 180, 120, 'normal', buttonImage); $('#scene').mousedown(function(e) { var mouseX = e.originalEvent.layerX || 0; var mouseY = e.originalEvent.layerY || 0; //使太空船处于可拖动状态 if (!bDrawDialog && mouseX > (spaceShip.x - 128) && mouseX < (spaceShip.x - 128 + spaceShip.w) && mouseY > (spaceShip.y - 128) && mouseY < (spaceShip.y - 128 + spaceShip.h)) { spaceShip.bDrag = true; spaceShip.x = mouseX; spaceShip.y = mouseY; } //处理单击按钮 if (mouseX > button.x && mouseX < (button.x + button.w) && mouseY > button.y && mouseY < (button.y + button.h)) { button.state = 'pressed'; button.imageShift = 262; } }); $('#scene').mousemove(function(e) { var mouseX = e.originalEvent.layerX || 0; var mouseY = e.originalEvent.layerY || 0; //拖动太空船 if (!bDrawDialog && spaceShip.bDrag) { spaceShip.x = mouseX; spaceShip.y = mouseY; } if (button.state != 'pressed') { button.state = 'normal'; button.imageShift = 0; if (mouseX > button.x && mouseX < button.x + button.w && mouseY > button.y && mouseY < button.y + button.h) { button.state = 'hover'; button.imageShift = 131; } } }); $('#scene').mouseup(function(e) { spaceShip.bDrag = false; if (button.state == 'pressed') { if (iDialogPage == 0) { iDialogPage++; bDrawDialog = !bDrawDialog; } else if (iDialogPage == 2) { iDialogPage = 0; bDrawDialog = !bDrawDialog; } else { iDialogPage++; } } button.state = 'normal'; button.imageShift = 0; }); setInterval(drawScene, 30); });
源码下载地址：http://www.script-tutorials.com/demos/166/source.zip