3

使用JavaScript和Canvas开发游戏

 2 years ago
source link: https://blogread.cn/it/article/4120?f=hot1
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

使用JavaScript和Canvas开发游戏

浏览:2343次  出处信息

    原文作者：Matthew Casperson o 编辑：Michele McDonough

     原文链接: http://www.brighthub.com/internet/web-development/articles/38364.aspx

    1、认识一下Canvas

     2、在Canvas上绘图

     3、基于Canvas的高级图像操作

     4、通过Canvas实现视差滚动

     5、写一个游戏框架(一)

     6、写一个游戏框架(二)

     8、JavaScript键盘输入

     9、综合运用

     10、定义级别

     11、跳跃与坠落

     12、添加道具

     13、加载资源

     14、添加主菜单

1、认识一下Canvas

    http://www.brighthub.com/internet/web-development/articles/38364.aspx

    Canvas元素以及JavaScript引擎中新增的一些特性，让Web开发人员不必借助第三方插件，即可设计开发出精细且具有交互性的2D网页。这篇文章就向大家介绍一下Canvas元素，以及它的一些可能的用途。

JavaScript与Canvas元素

    HTML是为创建静态页面而生的。HTML所能实现的动态效果，也仅限于显示GIF动画和闪烁的文本。JavaScript改变了这一切，通过它能够动态修改网页。今天，很多Web服务都利用AJAX来创建网页，为用户提供更加流畅的体验，也超越了标准HTML页面中常见的“点击－重新加载－点击”式的交互模式。

    然而，JavaScript的某些功能会受到其宿主浏览器的制约。尽管可以在网页中创建和修改任何元素，但JavaScript不能(轻易地)让浏览器显示一种新对象。通过JavaScript修改文本、插入图像或者缩放表格都很容易，因为这些对象本来就是HTML所支持的。如果你想再玩得刺激一点，比如写一个网页游戏，怎么办？那恐怕就得苦心积虑地改变标准HTML元素的用途，克服种种不测才能达到目的。要么，你就得求助于Flash或Silverlight这样的插件。

    Canvas元素登场了。这个新HTML元素为JavaScript开发者提供了一种无需插件即可在网页中直接绘图的机制。Canvas元素最早是由苹果公司在其WebKit框架中引入的，Safari浏览器和Dashboard微件都在使用。Canvas元素现在也被建议加入了HTML5规范，得到了最新的Chrome、Firefox、Opera以及Konqueror等浏览器的支持。Internet Explorer(至少在IE8之前)还不支持Canvas，但ExlporerCanvas项目倒是为IE提供了与Canvas元素类似的功能。

    Canvas元素对做过2D图形编程的人是小菜一碟。可以在这个元素上画线、画各种形状、画渐变，甚至可以利用与其他2D API中类似的函数来修改其中的每一个像素。得益于Chrome的V8、Firefox的SpiderMonkey以及Safari的Nitro等最新JavaScript引擎的性能，创建精细且具有交互性的Web应用已经完全没有问题。

    我们这一系列文章将教会大家使用JavaScript和Canvas元素创建一个简单的平台游戏。将要涉及的内容包括动画、加载资源、分层渲染、滚动和交互。通过一步一步地展示示例代码和实际效果，你可以很快学习如何驾驭强大的Canvas元素。

2、在Canvas上绘图

    http://www.brighthub.com/internet/web-development/articles/38364.aspx

    下面，我们就通过一个循序渐进的示例及实时演示，来介绍如何使用JavaScript在Canvas元素上绘图及实现动画。

    知道了什么是Canvas元素之后，该学习在屏幕上绘图了。首先，需要一个HTML页面来放置和显示Canvas元素。

<script type="text/javascript" src="jsplatformer1.js"></script>
<style type="text/css">
body { font-family: Arial,Helvetica,sans-serif;}
</style>
<p>
Game Development with Javascript and the canvas element
</a>
</p>
<canvas id="canvas" height="400" width="600">
<p>Your browser does not support the canvas element.</p>
</canvas>

    这些HTML代码很直观。其中有两个重要的元素。

<script type="text/javascript" src="jsplatformer1.js"></script>

    这里包含的是将会修改Canvas元素的JavaScript代码，对应的Canvas元素的标记如下：

<canvas id="canvas" height="400" width="600">
<p>Your browser does not support the canvas element.</p>
</canvas>

    以上代码创建了一个Canvas元素。不支持Canvas的浏览器，比如Internet Explorer(IE8之前的版本)，会忽略这个元素，而只显示其子元素。在这个简单的例子中，这个子元素就是一个段落，其中的文本告诉用户他们的浏览器不支持Canvas元素。而对于那些支持Canvas元素的浏览器，如Chrome、Opera和Firefox，则会忽略Canvas元素的子元素。

    这个Canvas元素的ID属性很重要，因为后面的JavaScript将通过它来取得对该元素的引用。而width和height属性指定了画布的宽度和高度，这两个属性跟table或img等其他HTML元素中同名属性作用一样。

    以下是 jsplatformer1.js的代码：

//每秒钟target帧
const FPS = 30;
var x = 0;
var y = 0;
var xDirection = 1;
var yDirection = 1;
var image = new Image();
image.src = "jsplatformer1-smiley.jpg";
var canvas = null;
var context2D = null;
window.onload = init;
function init(){
canvas = document.getElementById('canvas');
context2D = canvas.getContext('2d');
setInterval(draw, 1000/FPS);
}
function draw(){
context2D.clearRect(0, 0, canvas.width, canvas.height);
context2D.drawImage(image, x, y);
x += 1* xDirection;
y += 1* yDirection;
if (x >= 450) {
x = 450;
xDirection = -1;
}else if(x <= 0){
x = 0;
xDirection = 1;
}
if (y >= 250) {
y = 250;
yDirection = -1;
}else if(y <= 0){
y = 0;
yDirection = 1;
}
}

    如果只是一个Canvas元素，也没有什么用。JavaScript必须要在这块画布上面画点什么，相当的代码保存在 jsplatformer1.js中。简单来说，JavaScript在这里先加载了一幅图像，然后将其画在画布上面，最后让它在画布上移动。

    首先，定义一些全局变量。

constFPS = 30;

    FPS定义的是画布重绘的频率。

var x = 0;
var y = 0;
var xDirection = 1;
var yDirection = 1;

    变量x、y、xDirection和yDirection用于定义图像(相对于画布左上角)的位置，以及它在任意一时刻移动的方向。

    要把图像画到画布上，必须先加载一幅图像。为此，我们创建 一个Image对象，将其src属性设置为一幅图像文件的URL。

var canvas = null;
var context2D = null;

    我们还需要取得对Canvas元素以及绘图上下文(稍后再详细介绍绘图上下文)的引用。随后我们会把正确的值赋给这两个变量，现在先把它们设置为null。

window.onload = init;

    最后，当页面加载完成后，我们必须知道立即运行绘制画布的代码；因此，在window对象的onload事件发生时，立即调用init函数。

建议继续学习：

QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK