(译)开发第一个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
分享到:
相关推荐
1. **Canvas元素**:HTML5的Canvas是一个二维可绘图区域,通过JavaScript来绘制图形,包括游戏中的角色、背景和动态效果。开发者可以通过`context`对象的各种方法如`fillRect()`、`strokeRect()`、`beginPath()`等...
首先,我们来看标题中的"蘑菇熊",这很可能是游戏的主题或主角,展示了如何设计和创建一个游戏的角色和场景。在HTML5游戏中,角色和场景通常通过CSS3来定义样式,用JavaScript来实现动态行为。源码中的每个"index...
HTML5游戏开发素材 HTML5游戏开发素材 HTML5游戏开发素材 HTML5游戏开发素材
Phaser是一个流行的游戏开发框架,它基于HTML5 Canvas构建,提供了丰富的游戏开发功能,包括精灵、动画、物理引擎、碰撞检测等。开发者可以利用Phaser快速搭建游戏结构,减少底层实现的复杂性,专注于游戏逻辑和用户...
HTML5 移动游戏开发高级编程
HTML5游戏开发还具备三点优势:第一,HTML5游戏能够移植至各种采用HTML5界面的设备;第二,HTML5平台覆盖面广,能够兼容采用各种操作系统的个人电脑、所有采用Android和iOS系统的手机设备、及其他任何连网智能设备;...
GameMaker HTML5游戏开发是国内首个以中文编写的教程,旨在帮助中文用户轻松掌握游戏制作技能,利用GameMaker Studio这一强大的工具创建跨平台的HTML5游戏。GameMaker Studio是一款流行的2D游戏开发软件,它提供了...
HTML5跨平台游戏开发
HTML5游戏开发是一种基于Web平台的游戏制作技术,它利用HTML5、CSS3和JavaScript等现代Web标准构建游戏,使得玩家无需下载安装即可在浏览器中直接游玩。本资源提供了一个名为"街霸"的HTML5游戏实例,对于开发者来说...
1. **Canvas元素**:HTML5的Canvas是一个基于矢量图形的画布,通过JavaScript进行动态绘图。在这个游戏中,Canvas可能被用来绘制成语图片,供用户猜测。开发者会使用`drawImage()`函数加载并显示图片,以及`context....
财神HTML5游戏源码是一种基于HTML5技术开发的在线小游戏资源,它的核心在于使用了HTML5这一现代网页标准来构建游戏的用户界面、逻辑控制和互动功能。HTML5是超文本标记语言(HTML)的第五次重大修订,带来了许多新...
总的来说,"纸飞机HTML5游戏源码"涵盖了HTML5游戏开发的多个方面,从基本的HTML5语法到复杂的JavaScript编程,再到服务器环境的构建和资源管理,都是开发者需要掌握的关键技能。通过学习和分析这个源码,可以深入...
HTML5游戏开发实战涉及多个关键方面,包括游戏设计、用户体验、性能优化以及利用HTML5的特性来实现各种游戏功能。以下是一些关于HTML5游戏开发实战的要点和建议: 游戏设计: 确定游戏类型和玩法,如动作、益智、...
【疯狂植树HTML5游戏源码】是一款基于HTML5技术开发的游戏,它展示了HTML5在游戏领域的强大潜力。HTML5作为一种跨平台的标记语言,能够直接在浏览器中运行,无需插件支持,使得游戏的开发和分发变得更加便捷。这款...
HTML5微信小游戏是一种基于HTML5技术开发的轻量级游戏,它们可以在微信内置浏览器中运行,无需用户下载安装,只需扫一扫或点击链接即可快速体验。这些小游戏通常利用了HTML5的Canvas、WebGL等图形渲染技术,以及Web ...
总结来说,这个"html5实现拼图小游戏"是一个很好的学习案例,它展示了HTML5、JavaScript以及可能的第三方库(如LufyLegend)如何协同工作来创建一个互动娱乐项目。通过分析和理解这个项目的源码,我们可以深入了解...
HTML5微信游戏“读心术”是一款基于HTML5技术开发的互动娱乐应用,它利用了微信平台的强大社交功能,为用户提供了一种新颖的娱乐体验。这款游戏的开发与运行完全依赖于HTML5语言及其相关技术,如Canvas、Web Audio、...
在游戏设计上,《健康消消乐》遵循了经典的三消规则:玩家需要在同一行或列中匹配三个相同图案的方块,以消除它们并得分。这种玩法简单易懂,适合各年龄段的玩家。此外,游戏可能还包含各种特殊元素,如可以消除一行...
这个游戏可能包含了HTML5、CSS3和JavaScript等技术,它们共同构建了一个动态、交互性强的游戏环境。 1. HTML5基础:HTML5是超文本标记语言的第五次重大修订,新增了许多语义化元素,如`<header>`、`<nav>`、`...