用javascript 面向对象制作坦克大战（二）

2. 完善地图

我们的地图中有空地，墙，钢，草丛，水，总部等障碍物。我们可以把这些全部设计为对象。

2.1 创建障碍物对象群

对象群保存各种地图上的对象，我们通过对象的属性来判断对象是否可以被穿过或被攻击。

Barrier.js:

2.2 写入地图的数据。

在Common.js 中添加以下代码：

2.3 绘制地图

准备工作做完了，下面开始上大菜，绘制地图。前面有提到我们的地图为 13 * 13 的表格。所以我们在游戏装载对象添加行和列两个属性，并且添加初始化地图方法。

Frame.js:

ok，到这里我们的地图就大功告成了。这里的注释已经很详细了，如果大家还有不理解的地方自己下载源码调试一下就很好理解了。

这里主要加载地图数据，将每一个地图作为span元素插入html文档中。并且将地图的对象存储在二维数组中。以后我们做碰撞检测的时候就可以直接通过对象的坐标取到对应的数组对象，十分方便。

时间： 2024-11-07 12:21:42

用javascript 面向对象制作坦克大战（二）的相关文章

javascript 面向对象制作坦克大战（一）

PS:这个坦克大战是在网上下的一段源码之后,自己进行的重写. 写这个的目的是为了巩固自己这段时间对js的学习.整理到博客上,算是对自己近端时间学习js的一个整理. 同时也希望可以帮助到学习js的园友.由于自己也是刚学js不久,所以难免出现错误.如果发现希望给予指正. 这个教程适合熟悉js基本语法和面向对象语法的园友学习. 本身没有太难的东西,这个案例将js面向对象用的比较好,可以作为js面向对象的入门教程. 1. 创建基本对象,实现坦克简单的移动. 1.1 如何在地图中绘制画布

用javascript 面向对象制作坦克大战（四）

我们现在还差一个重要的功能,没错,敌人坦克的创建以及子弹击中敌人坦克时的碰撞检测功能. 5. 创建敌人坦克完成炮弹碰撞检测 5.1 创建敌人坦克对象敌人坦克和玩家坦克一样,同样继承自我们的坦克对象.所以我们在Tank.js中写入以下代码: 1 // 敌人坦克对象 2 EnimyTank = function () { 3 this.Direction = EnumDirection.Down; 4 this.BombNum = 1; 5 this.UI = UtilityClass.Cr

用javascript 面向对象制作坦克大战（三）

之前,我们完成了坦克的移动和地图的绘制,这次我们来完成碰撞检测和炮弹的发射. 上代码前来张最新的类图: 3. 碰撞检测前面我们已经完成了坦克的移动和地图的绘制,下面我们开始写碰撞检测. 3.1 创建碰撞检测对象我们创建一个对象来做碰撞检测,由于碰撞检测都是在对象移动的时候进行的所以我们让Mover继承我们的碰撞对象. HitTestObject.js: 这里我们把之前写的地图二维数组对象充分利用上了.通过对象x,y坐标取对应的地图对象,再根据属性判断是否可被穿过,是否已被占用. 3

javascript面向对象学习笔记（二）——创建对象

javascript面向对象学习笔记(二)--创建对象工厂模式该模值抽象了创建具体对象de过程.用函数来封装噫特定接口创建对象的细节. function createPerson(name,age,job){ var o=new Object(); o.name=name; o.age=age; o.job=job; o.sayName=function(){ alert(this.name); }; return o; } var person1=createPerson("Chiaki&

html5制作坦克大战

全部html5都采用绘图技术完成.坦克是画出来的.(坦克,子弹,墙,水,草坪) 首先我们画出坦克. 坦克是两边两个矩形,中间一个大矩形,矩形了有一个圆,还有一根线. 画出坦克的思路是以坦克的左上角为参照点,画出坦克的其他部分. 这样的好处是,当左上角的点发生改变是,坦克才能发生改变. 不使用图片的原因就是图片是比较耗费资源的.因为图片的像素点很大. tankGame1.html的代码 <!DOCTYPE html><html><head><meta charset

JavaScript面向对象精要（二）

四.构造函数和原型对象 1. 构造函数构造函数就是用new创建对象时调用的函数.使用构造函数的好处在于所有用同一个构造函数创建的对象都具有同样的属性和方法. function Person(){} var p1 = new Person(); console.log(p1.constructor === Person); // true console.log(p1 instanceof Person); // true 可以使用构造函数来检查一个对象的类型,但还是建议使用instanceof

javascript面向对象和原型————呱呱二号

面向对象 1.工厂模式 function createObject(name,age){ let obj = new Object(); this.name = name; this.age = age; return obj; } let objA = createObject('Tom',24); let objB = createObject('Jane',23); typeof ObjA; //Object typeof ObjB; //Object ObjA instanceof Ob

JavaScript 面向对象的编程（二）类的封装

类的定义方式一 var Book = function(id, name, price){ //私有属性,外部不能直接访问 var num = 1; //私有方法, function checkId(){}; this.getName = function(){}; this.getPrice = function(){}; this.setName = function(){}; this.setPrice = function(){}; this.id = id; this.copy =

Javascript面向对象学习笔记（二）--创建对象（七种模式）

一.工厂模式考虑到ECMAScript中无法创建类,开发人员就发明了一种函数,用函数来封装以特定接口创建对象的细节 function createPerson(name,age,job){ var o=new Object(); o.name=name; o.age=age; o.job=job; o.sayName=function(){ alert(this.name); }; return o; } var person1=createPerson("小码农",18,"