Step by Step 使用HTML5开发一个星际大战游戏（1）
本系列博文翻译自以下文章
http://blog.sklambert.com/html5-canvas-game-panning-a-background/
Languages: HTML5, JavaScript
Code: https://github.com/straker/galaxian-canvas-game/tree/master/part1
1.游戏背景滚动
最终的游戏演示界面如下：
控制:移动 – (←↑↓→)箭头
射击 – 空格
<!DOCTYPE html>
<html>
<head>
<title>Space Shooter Demo</title>
<style>
canvas {
position: absolute;
top: 0px;
left: 0px;
background: transparent;
}
</style>
</head>
<body onload="init()">
<!-- The canvas for the panning background -->
<canvas id="background" width="600" height="360">
Your browser does not support canvas. Please try again with a different browser.
</canvas>
<script src="space_shooter_part_one.js"></script>
</body>
</html>
以上代码创建了一个600宽，360高的画布。
基础
创建一个封装全部图像的js对象：
/**
* Define an object to hold all our images for the game so images
* are only ever created once. This type of object is known as a
* singleton.
*/
var imageRepository = new function() {
// Define images
this.background = new Image();
// Set images src
this.background.src = "imgs/bg.png";
}
接下来，我们创建Drawable对象，所有以后的可以运动的物体对象都继承于它，Drawable对象包含一个空的draw方法。
/**
* Creates the Drawable object which will be the base class for
* all drawable objects in the game. Sets up default variables
* that all child objects will inherit, as well as the default
* functions.
*/
function Drawable() {
this.init = function(x, y) {
// Default variables
this.x = x;
this.y = y;
}
this.speed = 0;
this.canvasWidth = 0;
this.canvasHeight = 0;
// Define abstract function to be implemented in child objects
this.draw = function() {
};
}
接下来我们创建背景Background对象，注意红色部分的代码，红色2句代码是背景移动的核心。
第一句让背景从纵坐标0开始向下移动，第二句让背景从纵坐标（0-画布）高度开始向下移动，这样就产生了背景在不断向下移动的效果。
最后一句蓝色代码是将Background对象的原形设置为Drawable对象，继承Drawable中的变量和方法。
/**
* Creates the Background object which will become a child of
* the Drawable object. The background is drawn on the "background"
* canvas and creates the illusion of moving by panning the image.
*/
function Background() {
this.speed = 1; // Redefine speed of the background for panning
// Implement abstract function
this.draw = function() {
// Pan background
this.y += this.speed;
this.context.drawImage(imageRepository.background, this.x, this.y);
// Draw another image at the top edge of the first image
this.context.drawImage(imageRepository.background, this.x, this.y - this.canvasHeight);
// If the image scrolled off the screen, reset
if (this.y >= this.canvasHeight)
this.y = 0;
};
}
// Set Background to inherit properties from Drawable
Background.prototype = new Drawable();
最后一步
创建Game对象，Game对象获得web页面中定义的画布，初始化背景对象Background，设置背景对象的context以及画布宽，画布高属性。
/**
* Creates the Game object which will hold all objects and data for
* the game.
*/
function Game() {
/*
* Gets canvas information and context and sets up all game
* objects.
* Returns true if the canvas is supported and false if it
* is not. This is to stop the animation script from constantly
* running on older browsers.
*/
this.init = function() {
// Get the canvas element
this.bgCanvas = document.getElementById('background');
// Test to see if canvas is supported
if (this.bgCanvas.getContext) {
this.bgContext = this.bgCanvas.getContext('2d');
// Initialize objects to contain their context and canvas
// information
Background.prototype.context = this.bgContext;
Background.prototype.canvasWidth = this.bgCanvas.width;
Background.prototype.canvasHeight = this.bgCanvas.height;
// Initialize the background object
this.background = new Background();
this.background.init(0,0); // Set draw point to 0,0
return true;
} else {
return false;
}
};
// Start the animation loop
this.start = function() {
animate();
};
}
以下是动画功能的实现，其中requestAnimFrame类似一个timer，会不定期的回调 animate()函数； animate()函数中调用game.background.draw();不断的重绘背景图片的位置，以实现背景滚动的动画效果。
/**
* The animation loop. Calls the requestAnimationFrame shim to
* optimize the game loop and draws all game objects. This
* function must be a gobal function and cannot be within an
* object.
*/
function animate() {
requestAnimFrame( animate );
game.background.draw();
}
/**
* requestAnim shim layer by Paul Irish
* Finds the first API that works to optimize the animation loop,
* otherwise defaults to setTimeout().
*/
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(/* function */ callback, /* DOMElement */ element){
window.setTimeout(callback, 1000 / 60);
};
})();
最后启动程序：
/**
* Initialize the Game and starts it.
*/
var game = new Game();
function init() {
if(game.init())
game.start();
}
最后的运行效果如下：
博主其他系列博文推荐：
2.手把手教你使用FineUI开发一个b/s结构的取送货管理信息系统系列博文索引
Step by Step 使用HTML5开发一个星际大战游戏（1）的更多相关文章
- Step by Step 使用HTML5开发一个星际大战游戏（2）
HTML5 Canvas Game: 玩家飞船 本系列博文翻译自以下文章 http://blog.sklambert.com/html5-canvas-game-the-player-ship/ L ...
- 使用HTML5开发Kinect体感游戏
一.简介 我们要做的是怎样一款游戏? 在前不久成都TGC2016展会上,我们开发了一款<火影忍者手游>的体感游戏,主要模拟手游章节<九尾袭来 >,用户化身四代,与九尾进行对决, ...
- Cocos2d-x-Lua 开发一个简单的游戏（记数字步进白色块状）
Cocos2d-x-Lua 开发一个简单的游戏(记数字步进白色块状) 本篇博客来给大家介绍怎样使用Lua这门语言来开发一个简单的小游戏-记数字踩白块. 游戏的流程是这种:在界面上生成5个数1~5字并显 ...
- 使用Cocos2dx-JS开发一个飞行射击游戏
一.前言 笔者闲来无事,某天github闲逛,看到了游戏引擎的专题,引起了自己的兴趣,于是就自己捣腾了一下Cocos2dx-JS.由于是学习,所谓纸上得来终觉浅,只是看文档看sample看demo,并 ...
- HTML5 - 开发一个自己的websocket服务器
应用:node.js 主要步骤: 创建文件夹 创建app.js(server入口,app为自定义命名) npm init -y (快速创建一个package.json文件) 依赖包安装:nodejs- ...
- 从零开始手把手教你使用javascript+canvas开发一个塔防游戏01地图创建
项目演示 项目演示地址: 体验一下 项目源码: 项目源码 代码结构 本节做完效果 游戏主页面 index.html <!DOCTYPE html PUBLIC "-//W3C//DTD ...
- 用Python做一个飞机大战游戏
基于pygame的一款小游戏 这是我上半年做的一款小游戏,但是一直忘记了,现在才上传代码. github项目地址:StarMan 代码基于pygame,Python版本3.5.2运行正常. 游戏很简单 ...
- Nginx 模块开发（1）—— 一个稍稍能说明问题模块开发 Step By Step 过程
1. Nginx 介绍 Nginx是俄罗斯人编写的十分轻量级的HTTP服务器,它的发音为“engine X”, 是一个高性能的HTTP和反向代理服务器,同时也是一个IMAP/POP3/S ...
- Step by Step: 基于MFC下的COM组件开发-Helloworld
http://blog.csdn.net/sybifei/article/details/45008745 [这篇文章有问题, 仅供参考] http://blog.csdn.net/define_us ...
随机推荐
- 图论：KM算法
如果,将求二分图的最大匹配的所有匹配边的权重看做1 那么用匈牙利算法求二分图的最大匹配的问题也可以看成求二分图的最大权匹配 如果边权是特例,我们就要使用KM算法来做了 这个算法其实还是比较难的,会用就 ...
- PHP文件操作函数一
<?php/*Created on 2013-6-26*///判断文件的类型echo filetype("array.php")."<br />&quo ...
- 【hdu1712】分组背包（每组最多选1个）
[分组背包] [题意]ACboy要开始选课了,上一门课能够获得的收益和他上这门课的时间是有关的,然后给你若干门课,让你帮他进行选课,每一门课自然是只能选择一个课程时长,问你如何选择,才能使ACboy获 ...
- [转]华 使用npm安装一些包失败了的看过来（npm国内镜像介绍）
发布于 5 年前 作者 wppept 275957 次浏览 最后一次编辑是 1 年前 这个也是网上搜的,亲自试过,非常好用! 镜像使用方法(三种办法任意一种都能解决问题,建议使用第三种,将配置 ...
- spring自定义参数绑定（日期格式转换）
spring参数绑定时可能出现 BindException(参数绑定异常),类似下面的日期绑定异常(前台传过来是String类型,实际的pojo是Date类型) default message [Fa ...
- python3 闭包函数，装饰器
闭包函数: 1.定义在函数内部的函数 2.包含对外部作用域而非全局作用域的引用特点: 1.自带作用域 2.延迟计算(取到内存地址,加括号执行) def 外部函数(func): def 内部函数(*ar ...
- 《Java编程思想》笔记 第八章 多态
1.向上转型 把子类引用当作父类引用.(子类对象赋值给父类引用) 2.绑定 确定方法属于哪个类. 3.前期绑定 程序执行前绑定. 4.后期绑定也叫动态绑定 程序运行时绑定. 5.多态 多个不同的对象对 ...
- Selenium2+python自动化21-TXT数据参数化【转载】
前言 在17篇我们讲了excel数据的参数化,有人问了txt数据的参数化该怎么办呢,下面小编为你带你txt数据参数化的讲解 一.以百度搜索为例,自动搜索五次不同的关键字.输入的数据不同从而引 ...
- H5中使用Web Storage来存储结构化数据
在上一篇对Web Storage的介绍中,可以看到,使用Storage保存key—value对时,key.value只能是字符串,这对于简单的数据来说已经够了,但是如果需要保存更复杂的数据,比如保存类 ...
- 对数据访问层的重构（及重构中Perl的应用）
以前上学的时候,听到“一个学生在毕业后刚刚开始编程的头几年中,写出的代码多半是垃圾”这样的说法,均不屑一顾.现在工作一年多了,越发感觉自己代码中疏漏处甚多,故近来常做亡羊补牢的重构之举.拿自己4个月前 ...