H5实践之飞机大战
1.什么是 Canvas?
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域,可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
2.如何创建 Canvas 元素
向 HTML5 页面添加 canvas 元素。
规定元素的 id、宽度和高度:
<canvas id="myCanvas" width="200" height="100"></canvas>
3.通过 JavaScript 来绘制
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
分析:
1.整个游戏分为:准备阶段,加载阶段,开始阶段,暂停阶段,结束阶段
2.游戏会显示我放飞机生命值以及击败敌方飞机的分数
①数据初始化
// 0. 数据初始化
var canvas = document.getElementsByTagName("canvas")[0];
var ctx = canvas.getContext("2d");
var ready = 0;
var loading = 1;
var running = 2;
var pause = 3;
var over = 4;
// 当前游戏阶段的判定
var state = ready;
// 游戏生命值
var life = 3;
// 游戏分数
var score = 0;
// 画布宽高
var width = 480;
var height = 852;
②准备阶段
// 1. 准备阶段 ready
// 1. 绘制运动的背景图片
// 1.1 创建背景图片对象
var bg = new Image();
bg.src = "img/background.png";
// 1.2 确定当前背景图片的绘制位置、绘制大小的信息
var bgParam = {
bg: bg,
x: 0,
y: 0,
width: 480,
height: 852,
};
// 1.3创建一个构造函数 用来实例化背景图片对象
function Bg(param) {
this.bg = param.bg;
this.x = param.x;
this.y = param.y;
this.width = param.width;
this.height = param.height;
// 交替图片的坐标位置
this.y1 = -this.height;
// 1. 绘制
this.paint = function () {
ctx.drawImage(this.bg, this.x, this.y, this.width, this.height);
ctx.drawImage(this.bg, this.x, this.y1, this.width, this.height);
};
// 2. 运动
this.sport = function () {
this.y += 5;
this.y1 += 5;
// 交换图片
if (this.y >= this.height) {
this.y = -this.height;
}
if (this.y1 >= this.height) {
this.y1 = -this.height;
}
};
}
var bgObj = new Bg(bgParam);
// 2. 绘制logo
// 2.1 创建logo图片
var logo = new Image();
logo.src = "img/start.png";
// 2.2 定义logo初始化信息
var logoParam = {
logo: logo,
x: 0,
y: 0,
width: 400,
height: 654,
};
// 2.3 创建构造函数
function Logo(param) {
this.logo = param.logo;
this.x = param.x;
this.y = param.y;
this.width = param.width;
this.height = param.height;
// 绘制
this.paint = function () {
ctx.drawImage(this.logo, this.x, this.y, this.width, this.height);
};
}
var logoObj = new Logo(logoParam);
// 点击画布进入到下一个阶段 loading
canvas.onclick = function () {
if (state === ready) {
state = loading;
}
};
③加载阶段
// 2. 游戏加载阶段 loading
// 2.1. 进场图片
var imgArr = [
"img/game_loading1.png",
"img/game_loading2.png",
"img/game_loading3.png",
"img/game_loading4.png",
];
var imgLoading = [];
for (var i = 0; i < imgArr.length; i++) {
imgLoading[i] = new Image();
imgLoading[i].src = imgArr[i];
}
console.log(imgLoading); //
// 绘制完进场图片马上进入下一阶段 running
// 2.3 定义图片信息
var loadingParam = {
imgLoading: imgLoading,
width: 186,
height: 38,
};
function Loading(param) {
this.imgLoading = param.imgLoading;
this.width = param.width;
this.height = param.height;
this.x = 0;
this.y = height - param.height;
// 定义绘制图片的下标
this.index = 0;
// 定义一个属性 用来判断定时器的执行次数
this.time = 0;
this.paint = function () {
ctx.drawImage(
this.imgLoading[this.index],
this.x,
this.y,
this.width,
this.height
);
};
this.sport = function () {
this.time++;
if (this.time % 5 == 0) {
this.index++;
if (this.index === this.imgLoading.length) {
// 绘制图片超过整体数量时 进入到下一个阶段
state = running;
}
}
};
}
var loadingObj = new Loading(loadingParam);