`
gutou9
  • 浏览: 144453 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

(译)开发第一个Html5游戏(三)

    博客分类:
  • Web
阅读更多

HTML5 Game Development - Lesson 3

(译)开发第一个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游戏开发指南

    1. **Canvas元素**:HTML5的Canvas是一个二维可绘图区域,通过JavaScript来绘制图形,包括游戏中的角色、背景和动态效果。开发者可以通过`context`对象的各种方法如`fillRect()`、`strokeRect()`、`beginPath()`等...

    新手入门级html5游戏开发源码(蘑菇熊)

    首先,我们来看标题中的"蘑菇熊",这很可能是游戏的主题或主角,展示了如何设计和创建一个游戏的角色和场景。在HTML5游戏中,角色和场景通常通过CSS3来定义样式,用JavaScript来实现动态行为。源码中的每个"index...

    HTML5游戏开发素材

    HTML5游戏开发素材 HTML5游戏开发素材 HTML5游戏开发素材 HTML5游戏开发素材

    开发html5 2d 赛车游戏以及打包发布为手机APP 第一话 工欲善其事

    Phaser是一个流行的游戏开发框架,它基于HTML5 Canvas构建,提供了丰富的游戏开发功能,包括精灵、动画、物理引擎、碰撞检测等。开发者可以利用Phaser快速搭建游戏结构,减少底层实现的复杂性,专注于游戏逻辑和用户...

    HTML5 移动游戏开发高级编程.pdf

    HTML5 移动游戏开发高级编程

    基于HTML5游戏开发的研究与实现.pdf

    HTML5游戏开发还具备三点优势:第一,HTML5游戏能够移植至各种采用HTML5界面的设备;第二,HTML5平台覆盖面广,能够兼容采用各种操作系统的个人电脑、所有采用Android和iOS系统的手机设备、及其他任何连网智能设备;...

    GameMaker HTML5游戏开发国内首个中文教程

    GameMaker HTML5游戏开发是国内首个以中文编写的教程,旨在帮助中文用户轻松掌握游戏制作技能,利用GameMaker Studio这一强大的工具创建跨平台的HTML5游戏。GameMaker Studio是一款流行的2D游戏开发软件,它提供了...

    HTML5跨平台游戏开发

    HTML5跨平台游戏开发

    html5游戏开发实力-街霸(用浏览器打开即可开玩,供开发学习使用)

    HTML5游戏开发是一种基于Web平台的游戏制作技术,它利用HTML5、CSS3和JavaScript等现代Web标准构建游戏,使得玩家无需下载安装即可在浏览器中直接游玩。本资源提供了一个名为"街霸"的HTML5游戏实例,对于开发者来说...

    看图猜成语HTML5游戏源码

    1. **Canvas元素**:HTML5的Canvas是一个基于矢量图形的画布,通过JavaScript进行动态绘图。在这个游戏中,Canvas可能被用来绘制成语图片,供用户猜测。开发者会使用`drawImage()`函数加载并显示图片,以及`context....

    财神HTML5游戏源码

    财神HTML5游戏源码是一种基于HTML5技术开发的在线小游戏资源,它的核心在于使用了HTML5这一现代网页标准来构建游戏的用户界面、逻辑控制和互动功能。HTML5是超文本标记语言(HTML)的第五次重大修订,带来了许多新...

    纸飞机HTML5游戏源码

    总的来说,"纸飞机HTML5游戏源码"涵盖了HTML5游戏开发的多个方面,从基本的HTML5语法到复杂的JavaScript编程,再到服务器环境的构建和资源管理,都是开发者需要掌握的关键技能。通过学习和分析这个源码,可以深入...

    学习html5游戏开发demo.zip

    HTML5游戏开发实战涉及多个关键方面,包括游戏设计、用户体验、性能优化以及利用HTML5的特性来实现各种游戏功能。以下是一些关于HTML5游戏开发实战的要点和建议: 游戏设计: 确定游戏类型和玩法,如动作、益智、...

    疯狂植树HTML5游戏源码

    【疯狂植树HTML5游戏源码】是一款基于HTML5技术开发的游戏,它展示了HTML5在游戏领域的强大潜力。HTML5作为一种跨平台的标记语言,能够直接在浏览器中运行,无需插件支持,使得游戏的开发和分发变得更加便捷。这款...

    95个HTML5微信小游戏源码

    HTML5微信小游戏是一种基于HTML5技术开发的轻量级游戏,它们可以在微信内置浏览器中运行,无需用户下载安装,只需扫一扫或点击链接即可快速体验。这些小游戏通常利用了HTML5的Canvas、WebGL等图形渲染技术,以及Web ...

    html5实现拼图小游戏

    总结来说,这个"html5实现拼图小游戏"是一个很好的学习案例,它展示了HTML5、JavaScript以及可能的第三方库(如LufyLegend)如何协同工作来创建一个互动娱乐项目。通过分析和理解这个项目的源码,我们可以深入了解...

    HTML5微信游戏,读心术!

    HTML5微信游戏“读心术”是一款基于HTML5技术开发的互动娱乐应用,它利用了微信平台的强大社交功能,为用户提供了一种新颖的娱乐体验。这款游戏的开发与运行完全依赖于HTML5语言及其相关技术,如Canvas、Web Audio、...

    HTML5手机端健康消消乐小游戏.zip

    在游戏设计上,《健康消消乐》遵循了经典的三消规则:玩家需要在同一行或列中匹配三个相同图案的方块,以消除它们并得分。这种玩法简单易懂,适合各年龄段的玩家。此外,游戏可能还包含各种特殊元素,如可以消除一行...

    神枪手HTML5游戏源码

    这个游戏可能包含了HTML5、CSS3和JavaScript等技术,它们共同构建了一个动态、交互性强的游戏环境。 1. HTML5基础:HTML5是超文本标记语言的第五次重大修订,新增了许多语义化元素,如`&lt;header&gt;`、`&lt;nav&gt;`、`...

Global site tag (gtag.js) - Google Analytics