(译)开发第一个Html5游戏(三)
这一章加入了图片滚动功能,已经实现了一个游戏对话框。
JS代码:(完整代码请看文章结尾链接)
// inner variables
var canvas, ctx;
var button;
var backgroundImage;
var spaceShip;
var iBgShiftX = 1024;
var bDrawDialog = true;
var iDialogPage = 1;
// -------------------------------------------------------------
// objects :
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;
}
// -------------------------------------------------------------
// draw functions :
function clear() { // clear canvas function
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}
function drawDialog() { // draw dialog function
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(); // custom shape begin
ctx.fillStyle = bg_gradient;
ctx.moveTo(100, 100);
ctx.lineTo(700, 100);
ctx.lineTo(700, 500);
ctx.lineTo(100, 500);
ctx.lineTo(100, 100);
ctx.closePath(); // custom shape end
ctx.fill(); // fill custom shape
ctx.lineWidth = 2;
ctx.strokeStyle = 'rgba(128, 128, 128, 0.5)';
ctx.stroke(); // draw border
// draw the title text
ctx.font = '42px DS-Digital';
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 DS-Digital';
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 DS-Digital';
ctx.fillText('Any another text', ctx.canvas.width/2, 250);
}
}
}
function drawScene() { // main drawScene function
clear(); // clear canvas
// draw background
iBgShiftX -= 10;
if (iBgShiftX <= 0) {
iBgShiftX = 1024;
}
ctx.drawImage(backgroundImage, 0 + iBgShiftX, 0, 1024, 768, 0, 0, 800, 600);
// draw space ship
ctx.drawImage(spaceShip.image, 0, 0, spaceShip.w, spaceShip.h, spaceShip.x-128, spaceShip.y-128, spaceShip.w, spaceShip.h);
// draw dialog
drawDialog();
// draw button
ctx.drawImage(button.image, 0, button.imageShift, button.w, button.h, button.x, button.y, button.w, button.h);
// draw button's text
ctx.font = '22px DS-Digital';
ctx.fillStyle = '#ffffff';
ctx.fillText('next/hide/show', 400, 465);
ctx.fillText('dialog', 400, 500);
}
// -------------------------------------------------------------
// 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/stars.jpg';
backgroundImage.onload = function() {
}
backgroundImage.onerror = function() {
console.log('Error loading the background image.');
}
// initialization of space ship
var oSpShipImage = new Image();
oSpShipImage.src = 'images/space_ship.png';
oSpShipImage.onload = function() {
}
spaceShip = new SpaceShip(400, 300, 256, 256, oSpShipImage);
// load the button sprite image
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) { // binding mousedown event (for dragging)
var mouseX = e.layerX || 0;
var mouseY = e.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;
}
// button behavior
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) { // binding mousemove event
var mouseX = e.layerX || 0;
var mouseY = e.layerY || 0;
if (!bDrawDialog && spaceShip.bDrag) {
spaceShip.x = mouseX;
spaceShip.y = mouseY;
}
// button behavior
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) { // binding mouseup event
spaceShip.bDrag = false;
// button behavior
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); // loop drawScene
});
原文地址 http://www.script-tutorials.com/html5-game-development-navigating-your-spaceship-lesson-3/
Demo地址 http://www.script-tutorials.com/demos/166/index.html
源码下载 http://www.script-tutorials.com/demos/166/source.zip
分享到:
相关推荐
HTML5游戏开发的五个最佳实践.pdf是一篇关于HTML5游戏开发的文章,文章中提到了HTML5的特点和优势,以及五个最佳实践来提高HTML5游戏开发的效率和质量。下面是对文章的详细解读和知识点的总结。 HTML5的特点和优势 ...
随着HTML5标准的不断成熟和完善,它已经成为一个非常有吸引力的游戏开发平台,特别是在移动设备上。 - **特点**: - **开放性**:HTML5是一种开放的技术,无需任何插件即可在现代浏览器中运行。 - **跨平台性**:...
HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,为创建丰富的交互式应用和游戏提供了可能。在这个“HTML5 Canvas游戏开发实战”中,我们将深入探讨如何利用Canvas API来构建游戏,...
在这批源码中,Canvas尤其值得关注,它是HTML5中的一个二维绘图上下文,允许开发者通过JavaScript直接在网页上绘制图形,实现游戏中的动态效果和交互。 CSS3则扩展了CSS的功能,提供了更丰富的样式控制,包括但不...
吃豆人(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...
◆ 阐释如何择机选用三种主要方法(CSS3、SVG或画布)之一来构建HTML游戏 ◆ 介绍使用HTML5构建实时多玩家游戏的标准模式 ◆ 讲述JavaScript游戏开发基础知识 ◆ 分步讲解如何创建2D平台动作游戏以及构建非传统多人...
3. 不需要插件:HTML5的Canvas标签允许进行更多的交互和动画,就像人们用Flash实现的效果一样,用户不需要预先安装第三方插件Flash来玩游戏。 基于HTML5技术的连连看游戏是一款休闲益智类的小游戏,主要利用了HTML5...
HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制...通过这个游戏,开发者可以学习到Canvas的基本绘图操作、事件处理以及游戏开发框架的应用,而用户则能体验到HTML5带来的流畅游戏体验。
01 HTML5 Canvas核心技术—图形、动画与游戏开发 02 HTML5 Games Development by Example 03 HTML5 Games Most Wanted (HTML5游戏编程必备) 04 HTML5 在游戏开发中的应用
【标题】基于lufylegend.js开发的HTML5小游戏 HTML5小游戏的开发近年来变得越来越流行,这得益于HTML5技术的不断成熟以及浏览器对它的广泛...这对于想要踏入HTML5游戏开发领域的初学者来说,是一个很好的实践案例。
财神HTML5游戏源码是一种基于HTML5技术开发的在线小游戏资源,它的核心在于使用了HTML5这一现代网页标准来构建游戏的用户界面、逻辑控制和互动功能。HTML5是超文本标记语言(HTML)的第五次重大修订,带来了许多新...
《UE5 100%蓝图开发Steam 多人孤岛生存游戏》是一门专注于使用虚幻引擎5(UE5)进行游戏开发的课程。在这个课程中,开发者将学习如何利用UE5强大的蓝图系统,完全不涉及任何编程语言,来构建一款在Steam平台上发布的...
HTML5 Canvas核心技术 图形、动画与游戏开发.pdf 原书电子版
1. **HTML5 Canvas**: HTML5的Canvas元素是一个二维绘图表面,允许开发者通过JavaScript进行动态图形绘制。在这些小游戏案例中,大部分的游戏逻辑和动画效果都是通过Canvas API实现的,例如`drawImage()`用于绘制...
[Wrox] HTML5 移动游戏开发 高级编程 (英文版) [Wrox] Professional HTML5 Mobile Game Development (E-Book) ☆ 出版信息:☆ [作者信息] Pascal Rettig [出版机构] Wrox [出版日期] 2012年09月19日 [图书...
HTML5作为现代网页开发的标准,引入了一系列增强网页体验的功能,对于初学者来说,它提供了一个友好的学习平台,尤其是对想要尝试游戏开发的人来说。 Canvas是HTML5中的一个核心元素,它是一个二维绘图上下文,允许...
HTML5游戏开发中,加载图片和显示进度条是至关重要的技术环节,特别是在处理大量资源或者大型游戏时。本文将深入探讨这两个主题,并提供相应的实践应用。 首先,让我们了解HTML5如何加载图片。在HTML中,我们可以...