javascript 面向对象制作坦克大战 （一）
PS：这个坦克大战是在网上下的一段源码之后，自己进行的重写。 写这个的目的是为了巩固自己这段时间对js的学习。整理到博客上，算是对自己近端时间学习js的一个整理。 同时也希望可以帮助到学习js的园友。由于自己也是刚学js不久，所以难免出现错误。如果发现希望给予指正。 这个教程适合熟悉js基本语法和面向对象语法的园友学习。 本身没有太难的东西，这个案例将js面向对象用的比较好，可以作为js面向对象的入门教程。
1. 创建基本对象，实现坦克简单的移动。
1.1 如何在地图中绘制画布？
1.2 代码实现
1.2.1 创建顶级对象
<!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 = 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";
}
}
1.2.2 创建公用对象
// 坦克移动的四个方向
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 = 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); }
1.2.4 创建坦克对象
//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();
}
} };
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 ...
随机推荐
- cojs 自己出的题目 解题报告
省选成功成为河北B队队长QAQ 真是忧桑 所以在cojs上出了一套鬼畜的关于树的套题 黑白树: 我们先不考虑R操作 设x是u的祖先,那么fa(x)的贡献显然是 fa(x)*(sz(fa(x))-sz( ...
- ASP.NET中App_Code,App_Data等文件夹的作用
http://www.cnblogs.com/shiyu007/archive/2007/12/04/982264.html 1. Bin文件夹 Bin文件夹包含应用程序所需的,用于控件.组件或者需 ...
- PHP JSON 操作总结
由于JSON可以在很多种程序语言中使用,所以我们可以用来做小型数据中转,如:PHP输出JSON字符串供JavaScript使用等.在PHP中可以使用 json_decode() 由一串规范的字符串解析 ...
- Failed to initialize monitor Thread: Unable to establish loopback connection解决方法
原因一: android中出现该异常的原因,是pid产生了冲突,将服务中的windows Firewall 服务停用就行了 原因二: http://stackoverflow.com/question ...
- poj 1905 Expanding Rods (数学 计算方法 二分)
题目链接 题意:将长度为L的棒子卡在墙壁之间.现在因为某种原因,木棒变长了,因为还在墙壁之间,所以弯成了一个弧度,现在求的是弧的最高处与木棒原先的地方的最大距离. 分析: 下面的分析是网上别人的分析: ...
- HDU 3746 (KMP求最小循环节) Cyclic Nacklace
题意: 给出一个字符串,要求在后面添加最少的字符是的新串是循环的,且至少有两个循环节.输出最少需要添加字符的个数. 分析: 假设所给字符串为p[0...l-1],其长度为l 有这样一个结论: 这个串的 ...
- 待实践三：MVC3下 路由的测试 使用 RouteDebug.dll 来测试判断路由是否符合
在需要进行测试路由是否匹配的项目中引用 RouteDebug.dll 并且在MVC的Global.asax里面加入一段代码 //下面这行代码一定是在 RegisterRoutes(Rou ...
- [反汇编练习] 160个CrackMe之015
[反汇编练习] 160个CrackMe之015. 本系列文章的目的是从一个没有任何经验的新手的角度(其实就是我自己),一步步尝试将160个CrackMe全部破解,如果可以,通过任何方式写出一个类似于注 ...
- I.MX6 linux Qt 同时支持Touch、mouse
/***************************************************************************** * I.MX6 linux Qt 同时支持 ...
- test chemes
rcmobile://messages rcmobile://badge rcmobile://dialer rcmobile://open rcmobile://sms?type=new