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 {
        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;
        100%;
        z-index:100;
}

footer h2{
        font-size:22px;
        font-weight:normal;
        left:50%;
        margin-left:-400px;
        padding:22px 0;
        position:absolute;
        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

 

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/pigzhu/p/3130578.html