利用HTML5 Canvas制作一个简单的打飞机游戏_html5教程技巧
闲话不多说,先上DEMO撒:飞机游戏 楼主写这个人纯碎娱乐,没想着写成多正式的游戏哈。
步入主题啦:打飞机游戏文件有index.html入口文件,allSprite.js精灵的逻辑处理文件,loading.js加载处理文件以及data.js(初始化的一些数据)。
首先,正常的游戏基本上都需要一个loading,loading页面就是用来预加载数据的,包括精灵表图片,音频等,因为这是个小游戏,要加载的就只有一些音频和图片。里面的加载代码主要就下面这些,其他是制作loading动画的,那个比较简单,就不贴了,如果有兴趣的直接在DEMO里看控制台就行了:
- loadImg:function(datas){
- var _this = this;
- var dataIndex = 0;
- li();
- function li(){
- if(datas[dataIndex].indexOf("mp3")>=0){
- var audio = document.createElement("audio");
- document.body.appendChild(audio);
- audio.preload = "auto";
- audio.src = datas[dataIndex];
- audio.oncanplaythrough = function(){
- this.oncanplaythrough = null;
- dataIndex++;
- if(dataIndex===datas.length){
- _this.percent = 100;
- }else {
- _this.percent = parseInt(dataIndex/datas.length*100);
- li.call(_this);
- }
- }
- }else {
- preLoadImg(datas[dataIndex] , function(){
- dataIndex++;
- if(dataIndex===datas.length){
- _this.percent = 100;
- } else {
- _this.percent = parseInt(dataIndex/datas.length*100);
- li.call(_this);
- }
- })
- }
- }
- },
- //再贴出preLoadImg的方法
- function preLoadImg(src , callback){
- var img = new Image();
- img.src = src;
- if(img.complete){
- callback.call(img);
- }else {
- img.onload = function(){
- callback.call(img);
- }
- }
- }
我先在data.js里面用一个数组保存文件的链接,然后判断这些链接是图片还是音频,如果是图片就用preLoadImg加载,预加载图片的代码很简单,就是new一个图片对象,然后把链接赋给它,加载完后再回调。音频的加载则是通过生成一个HTML5的audio dom对象,把链接赋给它,audio有一个事件“canplaythrough”,浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音频/视频时,会发生 canplaythrough 事件,也就是说当canplaythrough被调用时,音频就已经被加载的差不多了,可以进行下一个音频的加载了。就这样当把所有东西都加载完后,再进行回调,开始游戏。
游戏开始了,一个游戏,会需要很多的对象,所以我就统一写成了一个精灵对象,不同对象之间的每一帧的运动情况直接用behavior来分别编写就行了。
- W.Sprite = function(name , painter , behaviors , args){
- if(name !== undefined) this.name = name;
- if(painter !== undefined) this.painter = painter;
- this.top = 0;
- this.left = 0;
- this.width = 0;
- this.height = 0;
- this.velocityX = 3;
- this.velocityY = 2;
- this.visible = true;
- this.animating = false;
- this.behaviors = behaviors;
- this.rotateAngle = 0;
- this.blood = 50;
- this.fullBlood = 50;
- if(name==="plan"){
- this.rotateSpeed = 0.05;
- this.rotateLeft = false;
- this.rotateRight = false;
- this.fire = false;
- this.firePerFrame = 10;
- this.fireLevel = 1;
- }else if(name==="star"){
- this.width = Math.random()*2;
- this.speed = 1*this.width/2;
- this.lightLength = 5;
- this.cacheCanvas = document.createElement("canvas");
- thisthis.cacheCtx = this.cacheCanvas.getContext('2d');
- thisthis.cacheCanvas.width = this.width+this.lightLength*2;
- thisthis.cacheCanvas.height = this.width+this.lightLength*2;
- this.painter.cache(this);
- }else if(name==="badPlan"){
- this.badKind = 1;
- this.speed = 2;
- this.rotateAngle = Math.PI;
- }else if(name==="missle"){
- this.width = missleWidth;
- }else if(name==="boom"){
- this.width = boomWidth;
- }else if(name==="food"){
- this.width = 40;
- this.speed = 3;
- this.kind = "LevelUP"
- }
- this.toLeft = false;
- this.toTop = false;
- this.toRight = false;
- this.toBottom = false;
- this.outArcRadius = Math.sqrt((this.width/2*this.width/2)*2);
- if(args){
- for(var arg in args){
- this[arg] = args[arg];
- }
- }
- }
- Sprite.prototype = {
- constructor:Sprite,
- paint:function(){
- if(this.name==="badPlan"){this.update();}
- if(this.painter !== undefined && this.visible){
- if(this.name!=="badPlan") {
- this.update();
- }
- if(this.name==="plan"||this.name==="missle"||this.name==="badPlan"){
- ctx.save();
- ctx.translate(this.left , this.top);
- ctx.rotate(this.rotateAngle);
- this.painter.paint(this);
- ctx.restore();
- }else {
- this.painter.paint(this);
- }
- }
- },
- update:function(time){
- if(this.behaviors){
- for(var i=0;ithis.behaviors.length;i++){
- this.behaviors[i].execute(this,time);
- }
- }
- }
- }
写出精灵类后,就可以通过编写每个的painter以及behavior来生成不同的对象了。接下来就是写painter了,painter分成两种,一种是普通的painter,一种就是精灵表painter,因为像爆炸动画,飞机开枪动画,都不是一张图片就能搞定的,所以就需要用到精灵表了:
而绘制这些就要为他们定制一个精灵表绘制器,下面这个是最简单的精灵表绘制器,针对游戏的复杂性可以相对的修改精灵表写法,直到合适,不过原理都大同小异,就是小修小改而已:
- var SpriteSheetPainter = function(cells){
- this.cells = cells || [];
- this.cellIndex = 0;
- }
- SpriteSheetPainter.prototype = {
- advance:function(){
- if(this.cellIndex === this.cells.length-1){
- this.cellIndex = 0;
- }
- else this.cellIndex++;
- },
- paint:function(sprite){
- var cell = this.cells[this.cellIndex];
- context.drawImage(spritesheet , cell.x , cell.y , cell.w , cell.h , sprite.left , sprite.top , cell.w , cell.h);
- }
- }
而普通的绘制器就更简单了,直接写一个painter,把要画的什么东西都写进去就行了。
有了精灵类和精灵表绘制器后,我们就可以把星星,飞机,子弹,爆炸对象都写出来了:下面是整个allSprite.js的代码:
- (function(W){
- "use strict"
- var planWidth = 24,
- planHeight = 24,
- missleWidth = 70,
- missleHeight = 70,
- boomWidth = 60;
- //精灵类
- W.Sprite = function(name , painter , behaviors , args){
- if(name !== undefined) this.name = name;
- if(painter !== undefined) this.painter = painter;
- this.top = 0;
- this.left = 0;
- this.width = 0;
- this.height = 0;
- this.velocityX = 3;
- this.velocityY = 2;
- this.visible = true;
- this.animating = false;
- this.behaviors = behaviors;
- this.rotateAngle = 0;
- this.blood = 50;
- this.fullBlood = 50;
- if(name==="plan"){
- this.rotateSpeed = 0.05;
- this.rotateLeft = false;
- this.rotateRight = false;
- this.fire = false;
- this.firePerFrame = 10;
- this.fireLevel = 1;
- }else if(name==="star"){
- this.width = Math.random()*2;
- this.speed = 1*this.width/2;
- this.lightLength = 5;
- this.cacheCanvas = document.createElement("canvas");
- this.cacheCtx = this.cacheCanvas.getContext('2d');
- this.cacheCanvas.width = this.width+this.lightLength*2;
- this.cacheCanvas.height = this.width+this.lightLength*2;
- this.painter.cache(this);
- }else if(name==="badPlan"){
- this.badKind = 1;
- this.speed = 2;
- this.rotateAngle = Math.PI;
- }else if(name==="missle"){
- this.width = missleWidth;
- }else if(name==="boom"){
- this.width = boomWidth;
- }else if(name==="food"){
- this.width = 40;
- this.speed = 3;
- this.kind = "LevelUP"
- }
- this.toLeft = false;
- this.toTop = false;
- this.toRight = false;
- this.toBottom = false;
- this.outArcRadius = Math.sqrt((this.width/2*this.width/2)*2);
- if(args){
- for(var arg in args){
- this[arg] = args[arg];
- }
- }
- }
- Sprite.prototype = {
- constructor:Sprite,
- paint:function(){
- if(this.name==="badPlan"){this.update();}
- if(this.painter !== undefined && this.visible){
- if(this.name!=="badPlan") {
- this.update();
- }
- if(this.name==="plan"||this.name==="missle"||this.name==="badPlan"){
- ctx.save();
- ctx.translate(this.left , this.top);
- ctx.rotate(this.rotateAngle);
- this.painter.paint(this);
- ctx.restore();
- }else {
- this.painter.paint(this);
- }
- }
- },
- update:function(time){
- if(this.behaviors){
- for(var i=0;ithis.behaviors.length;i++){
- this.behaviors[i].execute(this,time);
- }
- }
- }
- }
- // 精灵表绘制器
- W.SpriteSheetPainter = function(cells , isloop , endCallback , spritesheet){
- this.cells = cells || [];
- this.cellIndex = 0;
- this.dateCount = null;
- this.isloop = isloop;
- this.endCallback = endCallback;
- this.spritesheet = spritesheet;
- }
- SpriteSheetPainter.prototype = {
- advance:function(){
- this.cellIndex = this.isloop?(this.cellIndex===this.cells.length-1?0:this.cellIndex+1):(this.cellIndex+1);
- },
- paint:function(sprite){
- if(this.dateCount===null){
- this.dateCount = new Date();
- }else {
- var newd = new Date();
- var tc = newd-this.dateCount;
- if(tc>40){
- this.advance();
- this.dateCount = newd;
- }
- }
- if(this.cellIndexthis.cells.length || this.isloop){
- var cell = this.cells[this.cellIndex];
- ctx.drawImage(this.spritesheet , cell.x , cell.y , cell.w , cell.h , sprite.left-sprite.width/2 , sprite.top-sprite.width/2 , cell.w , cell.h);
- } else if(this.endCallback){
- this.endCallback.call(sprite);
- this.cellIndex = 0;
- }
- }
- }
- //特制飞机精灵表绘制器
- W.controllSpriteSheetPainter = function(cells , spritesheet){
- this.cells = cells || [];
- this.cellIndex = 0;
- this.dateCount = null;
- this.isActive = false;
- this.derection = true;
- this.spritesheet = spritesheet;
- }
- controllSpriteSheetPainter.prototype = {
- advance:function(){
- if(this.isActive){
- this.cellIndex++;
- if(this.cellIndex === this.cells.length){
- this.cellIndex = 0;
- this.isActive = false;
- }
- }
- },
- paint:function(sprite){
- if(this.dateCount===null){
- this.dateCount = new Date();
- }else {
- var newd = new Date();
- var tc = newd-this.dateCount;
- if(tc>sprite.firePerFrame){
- this.advance();
- this.dateCount = newd;
- }
- }
- var cell = this.cells[this.cellIndex];
- ctx.drawImage(this.spritesheet , cell.x , cell.y , cell.w , cell.h , -planWidth/2 , -planHeight/2 , cell.w , cell.h);
- }
- }
- W.planBehavior = [
- {execute:function(sprite,time){
- if(sprite.toTop){
- sprite.top = sprite.top
- }
- if(sprite.toLeft){
- sprite.left = sprite.left
- }
- if(sprite.toRight){
- sprite.left = sprite.left>canvas.width-planWidth/2? sprite.left : sprite.left+sprite.velocityX;
- }
- if(sprite.toBottom){
- sprite.top = sprite.top>canvas.height-planHeight/2? sprite.top : sprite.top+sprite.velocityY;
- }
- if(sprite.rotateLeft){
- sprite.rotateAngle -= sprite.rotateSpeed;
- }
- if(sprite.rotateRight){
-
sprite.rotateAngle += sprite.rotateSpeed;
声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
相关文章
相关视频
下一篇: html5中的重要元素实现的代码实例
推荐阅读
-
利用HTML5 Canvas制作一个简单的打飞机游戏
-
用HTML5制作一个简单的弹力球游戏
-
用HTML5制作一个简单的桌球游戏的教程
-
借助HTML5 Canvas API制作一个简单的猜字游戏
-
利用HTML5中的Canvas绘制一张笑脸的教程_html5教程技巧
-
利用html5 canvas破解简单验证码及getImageData接口应用_html5教程技巧
-
用HTML5制作一个简单的桌球游戏的教程_html5教程技巧
-
用HTML5制作一个简单的桌球游戏的教程_html5教程技巧
-
利用html5 canvas破解简单验证码及getImageData接口应用_html5教程技巧
-
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)_html5教程技巧