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

时间：2014-11-25 20:17:34 阅读：214 评论：0 收藏：0 [点我收藏+]

标签：style blog http io ar color os sp java

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

1. 创建基本对象，实现坦克简单的移动。

1.1 如何在地图中绘制画布？

考虑到浏览器兼容的问题，我们用操作dom的方式来实现游戏对象的绘制和刷新。我们如何存储我们的地图呢？我们应该把地图用一个二维数组来保存， js中没有二维数组，但是可以通过在一维数组从存储数组来实现。

1.2 代码实现

我们将画布设计为 13 * 13 的一个二维数组，每个元素在地图中对应的长和宽均为40px，可以把整个地图看成由 40px*40p x大小的单元格组成的一个表格，那么我们整个画布的大小为 520px * 520px ；

1.2.1 创建顶级对象

html代码:

1 <body>
2 <!--地图容器-->
3 <div id="divMap">
4 </div>
5 <div id="debugInfo">
6 </div>
7 </body>
8

View Code

TankObject.js文件：

// 顶级对象
TankObject = function () {
this.XPosition = 0; // 对象在地图（13*13）中的X的位置
this.YPosition = 0;
this.UI = null; // 地图中一个格子的UI
}
// 更改UI静态方法
TankObject.prototype.UpdateUI = function (battlFiled) { }
// 设置位置，参数是这样：1*40,6*40
TankObject.prototype.SetPosition = function (leftPosition, topPosition) {
// 在地图的位置 Math.round四舍五入
this.XPosition = Math.round(leftPosition / 40);
this.YPosition = Math.round(topPosition / 40);
// 设置在窗体上的位置
if (this.UI != null && this.UI.style != null) {
this.UI.style.left = leftPosition + "px";
this.UI.style.top = topPosition + "px";
}
}

View Code

这里?我们用X，Y坐标表示对象在地图上的位置。后面我们会将地图中的每个对象都放入二维数组中，这时可以通过X,Y坐标来取得对应的对象。

然后用css中的left和top来控制我们对象在窗体中的位置。（可以移动的对象：坦克，子弹）

1.2.2 创建公用对象

我们还需要创建一个公共的对象，来写入我们常用的一些方法。

Common.js：

 1 // 坦克移动的四个方向
 2 var EnumDirection = {
 3 Up: "0",
 4 Right: "1",
 5 Down: "2",
 6 Left: "3"
 7 };
 8  
 9  
10 // 通用方法对象
11 var UtilityClass = {
12 // 创建dom元素到parentNode中，可指定id，className
13 CreateE: function (type, id, className, parentNode) {
14 var J = document.createElement(type);
15 if (id) { J.id = id };
16 if (className) { J.className = className };
17 return parentNode.appendChild(J);
18 }, // 移除元素
19 RemoveE: function (obj, parentNode) {
20 parentNode.removeChild(obj);
21 },
22 GetFunctionName: function (context, argumentCallee) {
23 for (var i in context) {
24 if (context[i] == argumentCallee) { return i };
25 }
26 return "";
27 }, // 绑定事件
28 BindFunction: function (obj,func) {
29 return function () {
30 func.apply(obj, arguments);
31 };
32 }
33 };
34  
35

View Code

1.2.3 创建移动对象

Mover.js

 1 // 移动对象，继承自顶层对象
 2 Mover = function () {
 3 this.Direction = EnumDirection.Up;
 4 this.Speed = 1;
 5 }
 6 Mover.prototype = new TankObject();
 7 Mover.prototype.Move = function () {
 8 if (this.lock) {
 9 return;/* 停用或者尚在步进中,操作无效 */
10 }
11 // 根据方向设置坦克的背景图片
12 this.UI.style.backgroundPosition = "0 -" + this.Direction * 40 + "px";
13 // 如果方向是上和下，vp就是top；如果方向是上和左，val就是-1
14 var vp = ["top", "left"][((this.Direction == EnumDirection.Up) || (this.Direction == EnumDirection.Down)) ? 0 : 1];
15 var val = ((this.Direction == EnumDirection.Up) || (this.Direction == EnumDirection.Left)) ? -1 : 1;
16 this.lock = true;/* 加锁 */
17 // 把当前对象保存到This
18 var This = this;
19 // 记录对象移动起始位置
20 var startmoveP = parseInt(This.UI.style[vp]);
21 var xp = This.XPosition, yp = This.YPosition;
22 var subMove = setInterval(function () {
23 // 开始移动，每次移动5px
24 This.UI.style[vp] = parseInt(This.UI.style[vp]) + 5 * val + "px";
25 // 每次移动一个单元格 40px
26 if (Math.abs((parseInt(This.UI.style[vp]) - startmoveP)) >= 40) {
27 clearInterval(subMove);
28 This.lock = false;/* 解锁,允许再次步进 */
29 // 记录对象移动后在表格中的位置
30 This.XPosition = Math.round(This.UI.offsetLeft / 40);
31 This.YPosition = Math.round(This.UI.offsetTop / 40);
32  
33 }
34 }, 80 - this.Speed * 10);
35  
36 }

View Code

这里的移动对象继承自我们的顶级对象，这里this就代表调用Move方法的对象。

Move对象的功能根据对象的方向和速度进行移动，每次移动5px总共移动40px一个单元格。后面这个对象还会进行扩展，会加入碰撞检测等功能。

1.2.4 创建坦克对象

Tank.js 文件：

 1  
 2 //tank对象 继承自Mover
 3 Tank=function(){}
 4  
 5 Tank.prototype = new Mover();
 6  
 7  
 8 // 创建玩家坦克,继承自tank对象
 9 SelfTank = function () {
10 this.UI = UtilityClass.CreateE("div", "", "itank", document.getElementById("divMap"));
11 this.MovingState = false;
12 this.Speed = 4;
13 }
14 SelfTank.prototype = new Tank();
15 // 设置坦克的位置
16 SelfTank.prototype.UpdateUI = function () {
17 this.UI.className = "itank";
18 // 顶级对象方法，设置坦克的位置
19 this.SetPosition(this.XPosition * 40, this.YPosition * 40);
20 }

View Code

现在只创建了玩家坦克，后面我们还会往里添加敌人坦克。

1.2.5 创建游戏装载对象(核心)

 1 // 游戏载入对象 整个游戏的核心对象
 2 GameLoader = function () {
 3 this.mapContainer = document.getElementById("divMap"); // 存放游戏地图的div
 4 this._selfTank = null; // 玩家坦克
 5 this._gameListener = null; // 游戏主循环计时器id
 6 }
 7 GameLoader.prototype = {
 8 Begin: function () {
 9 // 初始化玩家坦克
10 var selfT = new SelfTank();
11 selfT.XPosition = 4;
12 selfT.YPosition = 12;
13 selfT.UpdateUI();
14 this._selfTank = selfT;
15  
16 // 添加按键事件
17 var warpper = UtilityClass.BindFunction(this, this.OnKeyDown);
18 window.onkeydown = document.body.onkeydown = warpper;
19 warpper = UtilityClass.BindFunction(this, this.OnKeyUp);
20 window.onkeyup = document.body.onkeyup = warpper;
21 // 游戏主循环
22 warpper = UtilityClass.BindFunction(this, this.Run);
23 /*长定时器监听控制键*/
24 this._gameListener = setInterval(warpper, 20);
25  
26 }
27 // 键盘按下玩家坦克开始移动
28 , OnKeyDown: function (e) {
29 switch ((window.event || e).keyCode) {
30 case 37:
31 this._selfTank.Direction = EnumDirection.Left;
32 this._selfTank.MovingState = true;
33 break;     //左
34 case 38:
35 this._selfTank.Direction = EnumDirection.Up;
36 this._selfTank.MovingState = true;
37 break;     //上
38 case 39:
39 this._selfTank.Direction = EnumDirection.Right;
40 this._selfTank.MovingState = true;
41 break;     //右
42 case 40:
43 this._selfTank.Direction = EnumDirection.Down;
44 this._selfTank.MovingState = true;
45 break;     //下
46 }
47  
48 }
49 // 按键弹起停止移动
50 , OnKeyUp: function (e) {
51 switch ((window.event || e).keyCode) {
52 case 37:
53 case 38:
54 case 39:
55 case 40:
56 this._selfTank.MovingState = false;
57 break;
58 }
59 }
60 /*游戏主循环运行函数，游戏的心脏，枢纽*/
61 , Run: function () {
62 if (this._selfTank.MovingState) {
63 this._selfTank.Move();
64 }
65 }
66  
67  
68 };
69

View Code

游戏装载对象代码看起来很多，其实就做了两件事情：

1、创建玩家坦克对象。

2、添加按键监听事件，当玩家按下移动键调用坦克Move方法移动坦克。

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

标签：style blog http io ar color os sp java

原文地址：http://www.cnblogs.com/simple-blog/p/4121616.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

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

1. 创建基本对象，实现坦克简单的移动。

1.1 如何在地图中绘制画布？

1.2 代码实现

1.2.1 创建顶级对象

1.2.2 创建公用对象

1.2.3 创建移动对象

1.2.4 创建坦克对象

1.2.5 创建游戏装载对象(核心)

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