HTML5游戏开发–导航飞船-第3课

最新推荐文章于 2024-10-07 16:48:33 发布
最新推荐文章于 2024-10-07 16:48:33 发布
阅读量159 收藏
点赞数
文章标签： 游戏 js css html jquery ViewUI
原文链接：https://www.script-tutorials.com/html5-game-development-navigating-your-spaceship-lesson-3/
版权
HTML5 Game Development - Lesson 3
HTML5 Game Development - Lesson 3

HTML5 Game Development – Lesson 3 Today we continue a series of articles on game development in HTML5 using canvas. Finally, today we will start adding animation, and few more interesting features. Our demonstration will include a spaceship flying through space, and a new element – the Dialogue. The dialogue will contain two pages, and our button will toggle the dialog pages + hide the dialog on the second click. Our previous article you can read here: Developing Your First HTML5 Game – Lesson 2. Our base script will taken from previous letter.

HTML5游戏开发–第3课今天，我们继续使用画布在HTML5中开发游戏的一系列文章。 最后，今天我们将开始添加动画以及更多有趣的功能。 我们的演示将包括在太空中飞行的宇宙飞船，以及一个新元素–对话。 对话框将包含两个页面，并且我们的按钮将切换对话框页面，并在第二次单击时隐藏对话框。 您可以在此处阅读上一篇文章： 开发您的第一个HTML5游戏–第2课 。 我们的基本脚本将取自上一封信。

Here are our demo and downloadable package:

这是我们的演示和可下载的软件包：

现场演示

[sociallocker]

[社交储物柜]

打包下载

[/sociallocker]

[/ sociallocker]

Ok, download the example files and lets start coding !

好的，下载示例文件并开始编码！

步骤1. HTML (Step 1. HTML)

Here are all html of my demo

这是我的演示的全部html

index.html (index.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-1.5.2.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="https://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>


<!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-1.5.2.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="https://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>

步骤2. CSS (Step 2. CSS)

Here are used CSS styles.

这是使用CSS样式。

css / main.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;
}


/* 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;
}

Pay attention to ‘@font-face’. We will using this way to link custom font file (ttf) to our lesson (to draw at canvas).

注意“ @ font-face”。 我们将使用这种方式将自定义字体文件(ttf)链接到我们的课程(在画布上绘制)。

步骤3. JS (Step 3. JS)

js / jquery-1.5.2.min.js (js/jquery-1.5.2.min.js)

We will using jQuery for our demo. This allows easy bind different events (for mouse etc). Next file most important (here are all our html5 functional):

我们将使用jQuery进行演示。 这样可以轻松绑定不同事件(例如鼠标等)。 下一个最重要的文件(这是我们所有的html5功能)：

js / script.js (js/script.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
});


// 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
});

Here are several explanations about new features. 1. Drawing animated space with stars (pretty easy – we will shift image coordinates):

以下是有关新功能的几种说明。 1.用星星绘制动画空间(非常简单–我们将移动图像坐标)： 


    iBgShiftX -= 10;
    if (iBgShiftX <= 0) {
        iBgShiftX = 1024;
    }
    ctx.drawImage(backgroundImage, 0 + iBgShiftX, 0, 1024, 768, 0, 0, 800, 600);


    iBgShiftX -= 10;
    if (iBgShiftX <= 0) {
        iBgShiftX = 1024;
    }
    ctx.drawImage(backgroundImage, 0 + iBgShiftX, 0, 1024, 768, 0, 0, 800, 600);

Hope that all rest code pretty understandable. I added comments quite anywhere.

希望所有其余代码都可以理解。 我在任何地方都添加了评论。

步骤4.自定义文件 (Step 4. Custom files)

字体/Ds-digib.ttf、images/button.png、images/space_ship.png和images / stars.jpg (fonts/Ds-digib.ttf, images/button.png, images/space_ship.png and images/stars.jpg)

All these files will available in our package

所有这些文件将在我们的软件包中提供

现场演示

Separate big thanks to this book. This tell us about development of games in HTML5. Now it’s one of my favorite books :-)

非常感谢这本书 。 这告诉我们有关HTML5中游戏开发的信息。 现在，这是我最喜欢的书之一：-)

HTML5 Games Development by Example: Beginner's Guide

HTML5游戏开发示例：入门指南

结论 (Conclusion)

Are you like our new spaceship? :-) I will be glad to see your thanks and comments. Good luck!

你喜欢我们的新飞船吗？ :-)很高兴看到您的感谢和评论。 祝好运！

翻译自: https://www.script-tutorials.com/html5-game-development-navigating-your-spaceship-lesson-3/

cukengwei3786
关注
HTML5太空飞船游戏源码
07-18
HTML5有望成为网络游戏开发的热门新平台，其跨平台性已奠定了其未来发展的基础。本专题为那些愿意学习或使用HTML5及相关Web技术开发交互式游戏的开发者而编写，为大家讲解HTML5游戏开发基础教程及分享实战经验。 今时今日，我们将加入HTML5游戏开发的急先锋，明日将成为时代的弄潮儿。
html5 飞船动画
weixin_30315905的博客
07-17 133
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>Follow Mouse</title> <script type="text/javascript" src="utils.js"&gt...
宇宙飞船大战html5游戏,GitHub - WildDogTeam/demo-js-starwars: 基于WildDog的太空大战游戏...
weixin_35980523的博客
05-31 165
demo-js-starwars HTML5-太空大战demo-js-starwars 是一个基于wilddog JavaScript SDK实现的多人实时对战游戏。可以匿名对战，也可以使用微信账号登陆，以便于在积分排行榜上留名。在线示例本地运行可以直接用浏览器访问index.html。但是本地file://的方式只能匿名游戏，无法进行微信账号登陆。要使用微信账号登陆，需要启动http服务器。这里...
学习HTML5开发RPG游戏第三步>基本对象设计<三>
xidajiancun
12-18 128
4、图片 该对象用于显示图片，代码如下： JControls.PictureBox = Class.create(JControls.Object, { picture:null,//图片数据 picAlpha:null,//t透明度 picState:null,//显示方式（flex，cut） picPosition:null,//cut方式下，从该坐标开始截...
game-spaceship:egret 试水
06-30
egret 引擎试水 操作：移动 wasd，攻击 j
游戏开发-基于Python实现的怀旧游戏之飞船大战.zip
04-02
3. **碰撞检测**：游戏的核心部分是检测和处理各种碰撞，比如飞船与敌人的碰撞、子弹与敌人的碰撞等。pygame提供了基本的矩形碰撞检测，但可能需要自定义算法来处理更复杂的形状或更精确的碰撞。 4. **游戏逻辑**：...
Space-Jam:使用秋叶原游戏引擎开发HTML5游戏。 这个游戏的主要目的是摧毁敌人的飞船。 使用箭头键导航和“z”开火
06-30
本文将深入探讨如何利用秋叶原游戏引擎（Akihabara Game Engine）开发一款名为"太空堵塞"的游戏，该游戏旨在通过操控飞船摧毁敌方目标，体验者需使用箭头键导航并以"z"键开火。 一、秋叶原游戏引擎介绍 秋叶原游戏...
HTML5宇航员走进宇宙飞船动画
05-06
HTML5是一种先进的网页标记语言，它是HTML的第五个版本，主要设计用来提升用户体验，增加交互性和多媒体元素。在这个“HTML5宇航员走进宇宙飞船动画”实例中，我们可以看到HTML5的强大功能，尤其是在动态内容和动画...
SpaceShip:一款完全用 HTML5 和纯 JavaScript 制作的宇宙飞船 2D 游戏
06-20
飞船 一款完全用 HTML5 和纯 JavaScript 制作的 Spaceship 2D 游戏。 #Pending 上的作品： 启用声音 改进背景动画。 使用浏览器 API requestAnimationFrame() 重新实现
微信HTML5在线朋友圈游戏源码带安装部署教程-太空飞船.rar
06-24
"微信HTML5在线朋友圈游戏源码带安装部署教程-太空飞船.rar" 这个标题表明，这是一个关于微信平台上的HTML5游戏的源代码，具体是设计为在用户的朋友圈中进行分享和游玩的游戏。"太空飞船"是游戏的主题，暗示玩家将...
打通前后端全栈开发node+vue进阶【课程学习系统项目实战详细讲解】(2)：后台路由，导航，首页，退出登录
蜗牛小前的博客
06-29 454
打通前后端全栈开发node+vue进阶【课程学习系统项目实战详细讲解】(2)：后台路由，导航，首页，退出登录第二章 建议学习时间8小时      总项目预计10章 学习方式：详细阅读，并手动实现相关代码（如果没有node和vue基础，请学习前面的vue和node基础博客【共10章】演示地址：后台：demoback.lalalaweb.com  前台：demo.lalalaweb.com演示过程中可...
Unity游戏开发官方入门教程：飞机大战（五）——实现飞船控制脚本
...
11-18 1万+
Unity版本：Unity 2018.2.14f1 原视频链接：https://unity3d.com/cn/learn/tutorials/s/space-shooter-tutorial 教程目录（持续更新中）： Unity游戏开发官方入门教程：飞机大战（一）——创建新项目、导入资源、设置场景 Unity游戏开发官方入门教程：飞机大战（二）——创建飞船对象 Unity游戏开发官方入门教程...
使用原生JS 制作点击飞船加分小游戏
MrHuBingo的博客
06-05 412
制作效果如图所示 左上角为计分板 基本布置做出来后 下一步需要让飞机动起来 我们可以通过改变 飞机图片的相对于背景图的左 上端 位置值 img.style.left = '50px'; function move(){ // console.log(img.style.left) if( parseInt(img.style.left) > (screen.width - 50)) {
html5结合flash实现视频文件在所有主流浏览器兼容播放
热门推荐
freshlover的专栏
05-04 10万+
由于html5的出现，让网页中的视频、音频有了更加便捷的实现方式。但是video、audio标签只在IE 9+、Safari 3+、FireFox 4+、Opera 10+、Chrome 3+的浏览器版本得到了支持，并且各浏览器对于视频编码格式的支持不一致，这就需要我们考虑一个综合的实现方案，使得视频在不同浏览器中都能顺利播放，而且在老版本的浏览器中也能得到支持。 以下是结合项目经验，总结出
【Python游戏开发】贪吃蛇游戏demo拓展
qq_40878316的博客
10-05 852
拓展上一项目。
【光追模组】使命召唤7黑色行动光追mod，调色并修改光影，并且支持光追效果，游戏画质大提升
最新发布
u012373255的博客
10-07 437
【光追模组】使命召唤7黑色行动光追mod，调色并修改光影，并且支持光追效果，游戏画质大提升
中等多边形飞船模型-游戏开发完美选择
它不仅仅是一个简单的3D模型，而是一艘具有高度真实感的中等多边形飞船，特别适合用于游戏项目开发。该模型拥有4396个三角形，采用了多种高清纹理（2048x2048），可以为用户提供逼真的视觉效果。 这款飞船模型包含...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值