html5游戏开发案例大全太空游戏

　　很多游戏开发高手在进行html5游戏开发时都会先看一下html5游戏开发案例，以吸取一些灵感，更好的完成html5游戏开发工作。下面是一款太空游戏开发的案例，大家可以详细看看利用html5如何将太空游戏开发出来的。

　　本教程包含运行游戏的完整代码。代码是使用HTML5Canvas和JavaScript编写的，包含四个独立的有注释代码示例。每个示例都涉及一项关键的编程任务，这些任务是开发游戏的不同方面所必需的。第四个代码示例将所有任务组合在一起，创建了一个完整有效的游戏，您可以使用箭头键移动飞船，穿越分布着爆炸红色小行星的星域迷宫。如果您的飞船撞到行星，则将被毁坏。为了安全返回基地，您必须避开小行星，或在您撞上小行星之前将其炸毁。将根据您移动飞船的次数和您发射的炸弹数来进行计分。

　　本主题包括一个独立的有注释代码示例，为您演示如何使用HTML5Canvas和JavaScript创建包含白色星星的随机区域，以及绘制外形像飞盘一样的橙绿相间的宇宙飞船。此游戏图像是使用像素创建的。通过使用即时模式，Canvas具有将像素直接放在屏幕上的能力。此功能您能够轻松地在需要的位置，以选择的颜色绘制点、线和形状。此代码示例将为您演示如何通过在形状中组合数学贝塞尔曲线和颜色来创建宇宙飞船。然后，它将说明如何使用由弧形组成的小圆圈来绘制星星。

　　此代码示例包含以下任务来演示使用Canvas绘制这些游戏元素的基本原则：

　　1.向网页添加Canvas元素

　　2.创建黑色背景

　　3.在背景上绘制随机星星

　　4.向背景添加宇宙飞船

　　代码示例的末尾是讨论材料，说明有关这些任务的设计和结构以及工作方式的详细信息。

　　Canvas代码示例:

　　复制代码

　　代码如下:

　　//Thisfunctioniscalledonpageload.

　　functioncanvasSpaceGame(){

　　//Getthecanvaselement.

　　canvas=document.getElementById("myCanvas");

　　//Makesureyougotit.

　　if(canvas.getContext)

　　//Ifyouhaveit,createacanvasuserintefaceelement.

　　{

　　//Specify2dcanvastype.

　　ctx=canvas.getContext("2d");

//Paintitblack.

　　ctx.fillStyle="black";

　　ctx.rect(0,0,300,300);

　　ctx.fill();

//Paintthestarfield.

　　stars();

//Drawspaceship.

　　makeShip();

　　}

　　}

//Paintarandomstarfield.

　　functionstars(){

//Draw50stars.

　　for(i=0;i<=50;i++){

　　//Getrandompositionsforstars.

　　varx=Math.floor(Math.random()*299)

　　vary=Math.floor(Math.random()*299)

//Makethestarswhite

　　ctx.fillStyle="white";

//Givetheshipsomeroom.

　　if(x<30||y<30)ctx.fillStyle="black";

//Drawanindividualstar.

　　ctx.beginPath();

　　ctx.arc(x,y,3,0,Math.PI*2,true);

　　ctx.closePath();

　　ctx.fill();

　　}

　　}

functionmakeShip(){

//Drawsaucerbottom.

　　ctx.beginPath();

　　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.closePath();

　　ctx.fillStyle="rgb(222,103,0)";

　　ctx.fill();

//Drawsaucertop.

　　ctx.beginPath();

　　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.closePath();

　　ctx.fillStyle="rgb(51,190,0)";

　　ctx.fill();

　　}

　　stars函数

　　此函数是从canvasSpaceGame调用的。它使用forloop在二维平面上生成50个潜在的星星位置，然后使用fillStyle创建白色。随后，会进行一项检查，确认x,y坐标是否与左上角过于靠近。如果星星绘制得与左上角过于靠近，则会将fillStyle更改为黑色，使其不会妨碍宇宙飞船。随后，使用arc方法绘制每个星星并使用相应的填充颜色。

　　makeShip

　　此函数是从canvasSpaceGame调用的。使用一系列的beginPath、moveTo、bezierCurveTo、closePath、fillStyle和fill方法，绘制一个简单的宇宙飞船。

　　飞船是通过绘制两个椭圆来创建的，一个椭圆在另一个的上面。它首先在AdobeIllustratorCS5中绘制，然后使用的Ai2Canvas插件将图像导出到Canvas。生成的Canvas代码已复制并粘贴到此示例的代码中。

　　每一款html5游戏有好的一面也有不好的一面，好的一面自然是要借鉴了，不好的一面就要进行改良或是不要学习。买创意，买服务，上一品威客网，超600万威客人才随您挑，全方位、多领域的解决你的游戏开发需求和难题，还不赶快注册一品威客网账号。