　　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代码:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

 <html>

 <head>

     <title>坦克大战</title>

     <link rel=stylesheet href="css/main.css" />

     <script src="js/Common.js"></script>

     <script src="js/TankObject.js"></script>

     <script src="js/Mover.js"></script>

     <script src="js/Tank.js"></script>

     <script src="js/Frame.js"></script>

     <script>

         window.onload = function () {

             // 调用游戏装载对象

             var loader = new GameLoader();

             loader.Begin();

         }

     </script>

 </head>

 <body>

     <!--地图容器-->

     <div id="divMap">

     </div>

     <div id="debugInfo">

     </div>

 </body>

 </html>

TankObject.js文件：

 // 顶级对象

 TankObject = function () {

     this.XPosition = 0; // 对象在地图（13*13）中的X的位置

     this.YPosition = 0;

     this.UI = null; // dom元素

 }

 // 更改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";

     }

 }

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

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

1.2.2 创建公用对象

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

Common.js：

// 坦克移动的四个方向

var EnumDirection = {

    Up: "0",

    Right: "1",

    Down: "2",

    Left: "3"

};

// 通用方法对象

var UtilityClass = {

    // 创建dom元素到parentNode中，可指定id，className

    CreateE: function (type, id, className, parentNode) {

        var J = document.createElement(type);

        if (id) { J.id = id };

        if (className) { J.className = className };

        return parentNode.appendChild(J);

    },  // 移除元素

    RemoveE: function (obj, parentNode) {

        parentNode.removeChild(obj);

    },

    GetFunctionName: function (context, argumentCallee) {

        for (var i in context) {

            if (context[i] == argumentCallee) { return i };

        }

        return "";

    },  // 绑定事件，返回func方法，this为传入的obj

    BindFunction: function (obj,func) {

        return function () {

            func.apply(obj, arguments);

        };

    }

};

1.2.3 创建移动对象

Mover.js

 // 移动对象，继承自顶层对象

 Mover = function () {

     this.Direction = EnumDirection.Up;

     this.Speed = 1;

 }

 Mover.prototype = new TankObject();

 Mover.prototype.Move = function () {

     if (this.lock) {

         return;/* 停用或者尚在步进中,操作无效 */

     }

     // 根据方向设置坦克的背景图片

     this.UI.style.backgroundPosition = "0 -" + this.Direction * 40 + "px";

     // 如果方向是上和下，vp就是top；如果方向是上和左，val就是-1

     var vp = ["top", "left"][((this.Direction == EnumDirection.Up) || (this.Direction == EnumDirection.Down)) ? 0 : 1];

     var val = ((this.Direction == EnumDirection.Up) || (this.Direction == EnumDirection.Left)) ? -1 : 1;

     this.lock = true;/* 加锁 */

     // 把当前对象保存到This

     var This = this;

     // 记录对象移动起始位置

     var startmoveP = parseInt(This.UI.style[vp]);

     var xp = This.XPosition, yp = This.YPosition;

     var subMove = setInterval(function () {

         // 开始移动，每次移动5px

         This.UI.style[vp] = parseInt(This.UI.style[vp]) + 5 * val + "px";

         // 每次移动一个单元格 40px

         if (Math.abs((parseInt(This.UI.style[vp]) - startmoveP)) >= 40) {

             clearInterval(subMove);

             This.lock = false;/* 解锁,允许再次步进 */

             // 记录对象移动后在表格中的位置

             This.XPosition = Math.round(This.UI.offsetLeft / 40);

             This.YPosition = Math.round(This.UI.offsetTop / 40);

         }

     }, 80 - this.Speed * 10);

 }

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

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

1.2.4 创建坦克对象

Tank.js 文件：

//tank对象 继承自Mover

Tank=function(){}

Tank.prototype = new Mover();

// 创建玩家坦克,继承自tank对象

SelfTank = function () {

    this.UI = UtilityClass.CreateE("div", "", "itank", document.getElementById("divMap"));

    this.MovingState = false;

    this.Speed = 4;

}

SelfTank.prototype = new Tank();

// 设置坦克的位置

SelfTank.prototype.UpdateUI = function () {

    this.UI.className = "itank";

    // 顶级对象方法，设置坦克的位置

    this.SetPosition(this.XPosition * 40, this.YPosition * 40);

}

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

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

 // 游戏载入对象 整个游戏的核心对象

 GameLoader = function () {

     this.mapContainer = document.getElementById("divMap");  // 存放游戏地图的div

     this._selfTank = null;  // 玩家坦克

     this._gameListener = null; // 游戏主循环计时器id

 }

 GameLoader.prototype = {

     Begin: function () {

         // 初始化玩家坦克

         var selfT = new SelfTank();

         selfT.XPosition = 4;

         selfT.YPosition = 12;

         selfT.UpdateUI();

         this._selfTank = selfT;

         // 添加按键事件

         var warpper = UtilityClass.BindFunction(this, this.OnKeyDown);

         window.onkeydown = document.body.onkeydown = warpper;

         warpper = UtilityClass.BindFunction(this, this.OnKeyUp);

         window.onkeyup = document.body.onkeyup = warpper;

         // 游戏主循环

         warpper = UtilityClass.BindFunction(this, this.Run);

         /*长定时器监听控制键*/

         this._gameListener = setInterval(warpper, 20);

     }

     // 键盘按下玩家坦克开始移动

     , OnKeyDown: function (e) {

         switch ((window.event || e).keyCode) {

             case 37:

                 this._selfTank.Direction = EnumDirection.Left;

                 this._selfTank.MovingState = true;

                 break;        //左

             case 38:

                 this._selfTank.Direction = EnumDirection.Up;

                 this._selfTank.MovingState = true;

                 break;        //上

             case 39:

                 this._selfTank.Direction = EnumDirection.Right;

                 this._selfTank.MovingState = true;

                 break;        //右

             case 40:

                 this._selfTank.Direction = EnumDirection.Down;

                 this._selfTank.MovingState = true;

                 break;        //下

         }

     }

     // 按键弹起停止移动

     , OnKeyUp: function (e) {

         switch ((window.event || e).keyCode) {

             case 37:

             case 38:

             case 39:

             case 40:

                 this._selfTank.MovingState = false;

                 break;

         }

     }

     /*游戏主循环运行函数，游戏的心脏，枢纽*/

     , Run: function () {

         if (this._selfTank.MovingState) {

             this._selfTank.Move();

         }

     }

 };

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

1、创建玩家坦克对象。

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

　　总结：到这里我们的坦克可以通过按键自由的移动了。下一步我们需要完善地图和碰撞检测。

　　这个版本源码下载地址：

　http://pan.baidu.com/s/1dDlHw7B　

javascript 面向对象制作坦克大战（一）的更多相关文章

用javascript 面向对象制作坦克大战（四）
我们现在还差一个重要的功能,没错,敌人坦克的创建以及子弹击中敌人坦克时的碰撞检测功能. 5. 创建敌人坦克完成炮弹碰撞检测 5.1 创建敌人坦克对象敌人坦克和玩家坦克一样,同样继承自我们的坦克 ...
用javascript 面向对象制作坦克大战（三）
之前,我们完成了坦克的移动和地图的绘制,这次我们来完成碰撞检测和炮弹的发射. 上代码前来张最新的类图: 3. 碰撞检测前面我们已经完成了坦克的移动和地图的绘制,下面我们开始写碰撞检测. 3. ...
用javascript 面向对象制作坦克大战（二）
2. 完善地图我们的地图中有空地,墙,钢,草丛,水,总部等障碍物. 我们可以把这些全部设计为对象. 2.1 创建障碍物对象群对象群保存各种地图上的对象,我们通过对象的属性来判断对 ...
html5制作坦克大战
全部html5都采用绘图技术完成.坦克是画出来的.(坦克,子弹,墙,水,草坪) 首先我们画出坦克. 坦克是两边两个矩形,中间一个大矩形,矩形了有一个圆,还有一根线. 画出坦克的思路是以坦克的左上角为参 ...
【blade04】用面向对象的方法写javascript坦克大战
前言 javascript与程序的语言比如C#或者java不一样,他并没有“类”的概念,虽然最新的ECMAScript提出了Class的概念,我们却没有怎么用就单以C#与Java来说,要到真正理解面 ...
汉顺平html5课程分享：6小时制作经典的坦克大战！
记起自己去年參加的一次面试,在做过Java多年的面试官面前发挥的并不好,但他一听说我会html5,立刻眼睛发亮.无论不顾的想要和我签约.. .所以.如今为工作犯愁的朋友们,学好html5,绝对会为你找 ...
java制作简单的坦克大战
坦克大战是我们小时候玩红白机时代的经典游戏,看到有不少小伙伴都使用各种语言实现了一下,手痒痒,也使用java做的一个比较简单的坦克大战,主要面向于学过Java的人群,与学了一段时间的人,有利于面向对象 ...
[置顶] 小强的HTML5移动开发之路（9）——坦克大战游戏3
上一篇我们创建了敌人的坦克和自己的坦克,接下来就应该让坦克发子弹了,我们下面来看一下如何让我们的坦克发出子弹. 前面我们用面向对象的思想对Tank进行了封装,又利用对象冒充实现了我们的坦克和敌人的坦克 ...
例子：web版坦克大战1.0
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

VisualSvn+TortoiseSVN的安装说明
一.VisualSvn安装及简单使用下载VisualSvn:VisualSVN-Server-2.5.5.msi 系统:Win7系统安装步骤: 1.下载VisualSVN-Server-2.5.5 ...
cojs 奈特题解报告
才知道knight念奈特,而不念科耐特这个题显然是一个数据结构题目,我搬运的CF上的题 CF的题解好长超长哒,而且可以在线,但是并不能看懂于是自己想了一个一种做法A掉了,唯一的缺陷就是做法有些繁琐 ...
Unity UGUI —— 鼠标穿透UI问题（Unity官方的解决方法）
解决方案 : http://www.cnblogs.com/fly-100/p/4570366.html 这里我们直接在使用Input.GetMouseButtonDown(0)的地方加了一个检测函数 ...
朴素贝叶斯方法（Naive Bayes Method）
朴素贝叶斯是一种很简单的分类方法,之所以称之为朴素,是因为它有着非常强的前提条件-其所有特征都是相互独立的,是一种典型的生成学习算法.所谓生成学习算法,是指由训练数据学习联合概率分布P(X,Y ...
sparse coding稀疏表达入门
最近在看sparse and redundant representations这本书,进度比较慢,不过力争看过的都懂,不把时间浪费掉.才看完了不到3页吧,书上基本给出了稀疏表达的概念以及传统的求法. ...
Linux资源监控命令/工具（网络）
1.手动/自动设定与启动/关闭IP参数:ifconfig,ifup,ifdown 这三个指令的用途都是在启动网络接口,不过,ifup与ifdown仅能就/etc/sysconfig/netw ...
Java解压上传zip或rar文件，并解压遍历文件中的html的路径
1.本文只提供了一个功能的代码 public String addFreeMarker() throws Exception { HttpSession session = request.getSe ...
IS_ERR、PTR_ERR、ERR_PTR
最近在使用filp_open打开文件时遇到到一个问题,当打开一个并不存在的文件时,filp_open返回值值为0xfffffffe,而并不是0(NULL),这是因为内核对返回指针的函数做了特殊处理.内 ...
NDK(12)Jni常用函数
参考官方文档 http://docs.oracle.com/javase/7/docs/technotes/guides/jni/ http://docs.oracle.com/javase/7/do ...
在XML里的XSD和DTD以及standalone的使用3----具体使用详解
本人亲自写的一个简单的测试例子 1.xsd定义 <?xml version="1.0" encoding="utf-8"?><xs:schem ...

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