canvas小游戏,html5 canvas游戏开发实战
HTMLCanvas可以快速创建对游戏开发有帮助的轻量级图片。本节解释了如何使用Canvas创建一个将在网页中运行的老式太空飞行游戏。这个游戏的设计主要是展示开发具有画布功能的网页游戏的基本原理。这款太空游戏的目标是让你的飞船穿过有爆炸小行星的星域，安全返回基地。
本教程包含运行游戏的完整代码。代码用HTML5 Canvas和JavaScript编写，包含四个独立的带注释的代码示例。每个例子都涉及一个关键的编程任务，这是开发游戏的不同方面所必需的。第四个代码示例组合了所有任务，以创建一个完整而有效的游戏。你可以使用箭头键移动飞船，穿越爆炸的红色小行星的星域迷宫。如果你的宇宙飞船撞上这个星球，它将被摧毁。为了安全返回基地，你必须避开小行星，或者在撞上它之前炸掉它。根据你移动飞船的次数和发射炸弹的数量来打分。
本主题包括一个独立的带注释的代码示例，向您展示如何使用HTML5 Canvas和JavaScript创建一个包含白色星星的随机区域，并绘制一个看起来像飞盘的橙色和绿色的飞船。这个游戏图像是使用像素创建的。通过使用即时模式，Canvas能够将像素直接放在屏幕上。使用此功能，您可以轻松地在所需的位置和颜色绘制点、线和形状。这个代码示例将向您展示如何通过在一个形状中结合数学贝塞尔曲线和颜色来创建一个宇宙飞船。然后，它将解释如何使用由圆弧组成的小圆来绘制星星。
此代码示例包含以下任务，以演示用Canvas绘制这些游戏元素的基本原则：
1.向网页添加画布元素
2.创建一个黑色背景
3.在背景上随机绘制星星
4.在背景中添加一艘宇宙飞船
在代码的最后，讨论材料解释了关于这些任务的设计和结构以及它们如何工作的细节。
画布代码示例：复制代码代码，如下所示：
！声明文档类型
超文本标记语言
头
脚本类型=文本/javascript
//在页面加载时调用此函数。
函数canvasSpaceGame() {
//获取画布元素。
canvas=document . getelementbyid( my canvas )；
//确定你拿到了。
if (canvas.getContext)
//如果有，创建一个canvas用户界面元素。
{
//指定2d画布类型。
CTX=canvas . get context( 2d )；/pp//涂成黑色。
ctx.fillStyle= black
ctx.rect(0，0，300，300)；
CTX . fill()；/pp//画星空。
stars()；/pp//画宇宙飞船。
make ship()；
}
}/pp//画一个随机星域。/pp
函数stars() {/pp//画50颗星。
for(I=0；i=50i ) {
//获取星星的随机位置。
var x=math . floor(math . random()* 299)
var y=math . floor(math . random()* 299)/PP//让星星变白
ctx.fillStyle= white/pp//给船一点空间。
if(x 30 y 30)CTX . fillstyle= black ；/pp//画一个单独的星星。
CTX . begin path()；
ctx.arc(x，y，3，0，数学。PI * 2，真)；
CTX . close path()；
CTX . fill()；
}
}/ppfunction makeShip() {/pp//绘制飞碟底部。
CTX . begin path()；
ctx.moveTo(28.4，16.9)；
ctx.bezierCurveTo(28.4，19.7，22.9，22.0，16.0，22.0)；
ctx.bezierCurveTo(9.1，22.0，3.6，19.7，3.6，16.9)；
ctx.bezierCurveTo(3.6，14.1，9.1，11.8，16.0，11.8)；
ctx.bezierCurveTo(22.9，11.8，28.4，14.1，28.4，16.9)；
CTX . close path()；
ctx.fillStyle=rgb(222，103，0)；
CTX . fill()；/pp//画茶托顶。
CTX . begin path()；
ctx.moveTo(22.3，12.0)；
ctx.bezierCurveTo(22.3，13.3，19.4，14.3，15.9，14.3)；
ctx.bezierCurveTo(12.4，14.3，9.6，13.3，9.6，12.0)；
ctx.bezierCurveTo(9.6，10.8，12.4，9.7，15.9，9.7)；
ctx.bezierCurveTo(19.4，9.7，22.3，10.8，22.3，12.0)；
CTX . close path()；
ctx.fillStyle=rgb(51，190，0)；
CTX . fill()；
}
/脚本
/头
body onload=canvasSpaceGame()
氕
画布空间游戏
/h1
画布id=myCanvas 宽度=300 高度=300
/画布
/body
/html
画布代码示例讨论
本节解释该代码示例的设计和结构。它解释了代码的不同部分以及如何集成它们。Canvas示例使用标准的HTML5标题，以便浏览器可以将其作为HTML5规范的一部分进行区分。
该代码分为两个主要部分：
1.主体代码
2.脚本代码
主题代码
当页面加载时，body标记用onload函数调用canvasSpaceGame函数。画布标记是主体的一部分。指定了画布的初始宽度和高度，还指定了ID属性。您必须使用ID将画布元素添加到页面的对象模型中。
脚本代码
该脚本包括三个功能：canvasSpaceGame、stars和makeShip。加载页面时将调用canvasSpaceGame函数。Stars和makeShip都是从canvasSpaceGame调用的。
CanvasSpaceGame函数
这个函数将在页面加载时被调用。它通过使用主代码中的Canvas元素ID来获取画布，然后获取画布的上下文，并准备好接受绘图。在将上下文初始化为2D画布后，使用fillStyle、rect和fill方法将画布涂成黑色。
星星功能
这个函数是从canvasSpaceGame调用的。它使用for循环在2D平面上生成50个潜在的星位置，然后使用fillStyle创建白色。然后，将进行检查以确认x和y坐标是否离左上角太近。如果星星画得离左上角太近，fillStyle会改成黑色，这样就不会干扰飞船了。然后，使用弧形方法绘制每个星形，并使用相应的填充颜色。
制造船
这个函数是从canvasSpaceGame调用的。使用一系列beginPath、moveTo、bezierCurveTo、closePath、fillStyle和fill方法绘制一个简单的宇宙飞船。
宇宙飞船是通过绘制两个椭圆，一个在另一个的上面来创建的。它首先在Adobe Illustrator CS5中绘制，然后使用Ai2Canvas插件将图像导出到画布。生成的画布代码已经被复制并粘贴到本例的代码中。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。