使用html5 canvas创建太空游戏的示例


Posted in HTML / CSS onMay 08, 2014

HTML5 Canvas 可以快速创建出有助于游戏开发的轻型图片。 本部分说明如何使用 Canvas 创建将在网页中运行的怀旧风格外太空飞行游戏。 此游戏的设计主要是为了展示使用 Canvas 功能开发 Web 游戏的基本原则。 此太空游戏的目标是,使您的宇宙飞船穿过分布着爆炸小行星的星域,安全返回基地。
本教程包含运行游戏的完整代码。代码是使用 HTML5 Canvas 和 JavaScript 编写的,包含四个独立的有注释代码示例。 每个示例都涉及一项关键的编程任务,这些任务是开发游戏的不同方面所必需的。 第四个代码示例将所有任务组合在一起,创建了一个完整有效的游戏,您可以使用箭头键移动飞船,穿越分布着爆炸红色小行星的星域迷宫。 如果您的飞船撞到行星,则将被毁坏。 为了安全返回基地,您必须避开小行星,或在您撞上小行星之前将其炸毁。 将根据您移动飞船的次数和您发射的炸弹数来进行计分。
本主题包括一个独立的有注释代码示例,为您演示如何使用 HTML5 Canvas 和 JavaScript 创建包含白色星星的随机区域,以及绘制外形像飞盘一样的橙绿相间的宇宙飞船。 此游戏图像是使用像素创建的。 通过使用即时模式,Canvas 具有将像素直接放在屏幕上的能力。 此功能您能够轻松地在需要的位置,以选择的颜色绘制点、线和形状。 此代码示例将为您演示如何通过在形状中组合数学贝塞尔曲线和颜色来创建宇宙飞船。 然后,它将说明如何使用由弧形组成的小圆圈来绘制星星。
此代码示例包含以下任务来演示使用Canvas 绘制这些游戏元素的基本原则:
1.向网页添加 Canvas 元素
2.创建黑色背景
3.在背景上绘制随机星星
4.向背景添加宇宙飞船
代码示例的末尾是讨论材料,说明有关这些任务的设计和结构以及工作方式的详细信息。
Canvas 代码示例:

复制代码
代码如下:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
// This function is called on page load.
function canvasSpaceGame() {
// Get the canvas element.
canvas = document.getElementById("myCanvas");
// Make sure you got it.
if (canvas.getContext)
// If you have it, create a canvas user inteface element.
{
// Specify 2d canvas type.
ctx = canvas.getContext("2d");</p> <p>// Paint it black.
ctx.fillStyle = "black";
ctx.rect(0, 0, 300, 300);
ctx.fill();</p> <p>// Paint the starfield.
stars();</p> <p>// Draw space ship.
makeShip();
}
}</p> <p>// Paint a random starfield.</p> <p>
function stars() {</p> <p>// Draw 50 stars.
for (i = 0; i <= 50; i++) {
// Get random positions for stars.
var x = Math.floor(Math.random() * 299)
var y = Math.floor(Math.random() * 299)</p> <p>// Make the stars white
ctx.fillStyle = "white";</p> <p>// Give the ship some room.
if (x < 30 || y < 30) ctx.fillStyle = "black";</p> <p>// Draw an individual star.
ctx.beginPath();
ctx.arc(x, y, 3, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();
}
}</p> <p>function makeShip() {</p> <p>// Draw saucer bottom.
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();</p> <p>// Draw saucer top.
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();
}
</script>
</head>
<body onload="canvasSpaceGame()">
<h1>
Canvas Space Game
</h1>
<canvas id="myCanvas" width="300" height="300">
</canvas>
</body>
</html>

Canvas 代码示例讨论

本节说明本代码示例的设计和结构。 它为您讲解代码的不同部分,以及整合它们的方式。 Canvas 示例使用标准 HTML5 标头 ,以便浏览器可以将它作为 HTML5 规格的一部分加以区别。

代码分成两个主要部分:
1.主体代码
2.脚本代码

主体代码
在页面加载时,主体标记使用 onload 函数调用 canvasSpaceGame 函数。 Canvas 标记是主体的一部分。 指定了 Canvas 初始宽度和高度,还指定了 ID 属性。 必须使用 ID,才能将 canvas 元素添加到页面的对象模型中。

脚本代码
脚本代码包括三个函数: canvasSpaceGame、stars 和 makeShip。 加载页面时将调用 canvasSpaceGame 函数。 stars 和 makeShip 都是从 canvasSpaceGame 调用的。

canvasSpaceGame 函数
加载页面时将调用此函数。 它通过在主体代码中使用 Canvas 元素 ID 来获取画布, 然后获取画布的上下文,并准备好接受绘图。 将上下文初始化为 2D 画布后,使用 fillStyle、rect 和 fill 方法将画布绘制为黑色。

stars 函数
此函数是从 canvasSpaceGame 调用的。 它使用 for loop 在二维平面上生成 50 个潜在的星星位置,然后使用 fillStyle 创建白色。 随后,会进行一项检查,确认 x,y 坐标是否与左上角过于靠近。 如果星星绘制得与左上角过于靠近,则会将 fillStyle 更改为黑色,使其不会妨碍宇宙飞船。 随后,使用 arc 方法绘制每个星星并使用相应的填充颜色。
makeShip
此函数是从 canvasSpaceGame 调用的。 使用一系列的 beginPath、moveTo、bezierCurveTo、closePath、fillStyle 和 fill 方法,绘制一个简单的宇宙飞船。
飞船是通过绘制两个椭圆来创建的,一个椭圆在另一个的上面。 它首先在 Adobe Illustrator CS5 中绘制,然后使用 的 Ai2Canvas 插件将图像导出到 Canvas。 生成的 Canvas 代码已复制并粘贴到此示例的代码中。

HTML / CSS 相关文章推荐
CSS3 3D制作实战案例分析
Sep 18 HTML / CSS
实列教程 一款基于jquery和css3的响应式二级导航菜单
Nov 13 HTML / CSS
深入浅析css3 border-image边框图像详解
Nov 24 HTML / CSS
CSS3过渡transition效果实例介绍
May 03 HTML / CSS
CSS3中新增的对文本和字体的设置
Feb 03 HTML / CSS
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
Mar 14 HTML / CSS
html5 button autofocus 属性介绍及应用
Jan 04 HTML / CSS
html5摇一摇代码优化包括DeviceMotionEvent等等
Sep 01 HTML / CSS
HTML5 video标签(播放器)学习笔记(一):使用入门
Apr 24 HTML / CSS
html5如何在Canvas中实现自定义路径动画示例
Sep 18 HTML / CSS
HTML5逐步分析实现拖放功能的方法
Sep 30 HTML / CSS
css之clearfix的用法深入理解(必看篇)
May 21 HTML / CSS
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
May 08 #HTML / CSS
Data URI scheme详解和使用实例及图片base64编码实现方法
May 08 #HTML / CSS
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
May 08 #HTML / CSS
html5实现canvas阴影效果示例
May 07 #HTML / CSS
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
May 07 #HTML / CSS
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
May 07 #HTML / CSS
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
May 07 #HTML / CSS
You might like
PHP+DBM的同学录程序(4)
2006/10/09 PHP
php使用ffmpeg获取视频信息并截图的实现方法
2016/05/03 PHP
使用JS进行目录上传(相当于批量上传)
2010/12/05 Javascript
html+css+js实现xp window界面及有关功能
2013/03/26 Javascript
当鼠标移动时出现特效的JQuery代码
2013/11/08 Javascript
Javascript 按位与运算符 (&amp;)使用介绍
2014/02/04 Javascript
javascript实现rgb颜色转换成16进制格式
2015/07/10 Javascript
js获取隐藏元素的宽高
2017/02/24 Javascript
JS中Attr的用法详解
2017/10/09 Javascript
浅谈Vue.js路由管理器 Vue Router
2018/08/16 Javascript
深入理解JS中Number(),parseInt(),parseFloat()三者比较
2018/08/24 Javascript
Vue动态生成el-checkbox点击无法赋值的解决方法
2019/02/21 Javascript
angular4+百分比进度显示插件用法示例
2019/05/05 Javascript
JS设置自定义快捷键并实现图片上下左右移动
2019/10/17 Javascript
nginx部署多个vue项目的方法示例
2020/09/06 Javascript
如何在vue中使用video.js播放m3u8格式的视频
2021/02/01 Vue.js
Python返回真假值(True or False)小技巧
2015/04/10 Python
Python常用知识点汇总
2016/05/08 Python
Python内置模块turtle绘图详解
2017/12/09 Python
python 格式化输出百分号的方法
2019/01/20 Python
对Python中的条件判断、循环以及循环的终止方法详解
2019/02/08 Python
Python django搭建layui提交表单,表格,图标的实例
2019/11/18 Python
解决Jupyter Notebook使用parser.parse_args出现错误问题
2020/04/20 Python
python中time tzset()函数实例用法
2021/02/18 Python
香港No.1得奖零食网:香港零食大王
2016/07/22 全球购物
英国领先的隐形眼镜在线供应商:Lenstore.co.uk
2019/11/24 全球购物
统计每一学生的平均成绩
2014/06/06 面试题
公司综合部的成员自我评价分享
2013/11/05 职场文书
个人素质的自我评价分享
2013/12/16 职场文书
电子技术专业中专生的自我评价
2013/12/17 职场文书
应届毕业生求职自荐书
2014/01/03 职场文书
房产代理公证处委托书
2014/04/04 职场文书
生态养殖创业计划书
2014/05/06 职场文书
市政管理求职信范文
2014/05/07 职场文书
保险公司增员口号
2015/12/25 职场文书
python可视化分析绘制带趋势线的散点图和边缘直方图
2022/06/25 Python