第三章 坦克大战

最新推荐文章于 2023-12-20 00:44:54 发布
最新推荐文章于 2023-12-20 00:44:54 发布
阅读量1.6k 收藏 1
点赞数
分类专栏： 程序员之路 文章标签： 程序员之路
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/starcuan/article/details/19214895
版权


今天写一写模拟类的算法，如果只是模拟一些答案，比如两个人对战掉多少血，最后谁赢谁输，没有什么乐趣，今天就用javascript来实现一个坦克大战的游戏，最后的界面如下：



上面的地图是我任意画上去的，代码中有详细解释，游戏过程如下：
1、红色的坦克是己方坦克，可以通过上下左右四个方向键控制方向，空格键发射子弹
2、页面中最多同时存在3辆敌方坦克，歼灭一辆敌方坦克时，2秒后在一辆新的坦克会出现
3、共计有20辆敌方坦克
4、有四种障碍物，树（图中没有画出）、石头、砖块、水流，其中
    树和石头效果相同，子弹和坦克都不能通过；
    子弹可以打破砖块；
    水可以通过子弹，但不能通过坦克。
呵呵，看到上图我步的障碍物了吗？貌似老家敌方坦克是打不到的，我无敌了

首先，先把公共函数和配置文件贴上：
Common.js 
//一些公共函数
//获取ID
var $ = function (id) { return typeof id === "string" ? document.getElementById(id) : id };
//获取tagName
var $$ = function (tagName, oParent) { return (oParent || document).getElementsByTagName(tagName) };
//获取class
var $$$ = function (sClass, oParent) {
    var aClass = [],
    i = 0,
    reClass = new RegExp("(\\s|^)" + sClass + "($|\\s)"),
    aElement = $$("*", oParent);
    for (i = 0; i < aElement.length; i++) reClass.test(aElement[i].className) && aClass.push(aElement[i]);
    return aClass
};

Config.js
var Resource = {
    ROOT: "images/",
    IMG_HOME: "home.bmp",
    IMG_TREE: "tree.bmp",
    IMG_WATER: "water.bmp",
    IMG_IRON: "iron.bmp",
    IMG_BLOCK: "block.bmp",
    IMG_SBLOCK: "smallblock.bmp",
    IMG_TANKS_NORTH: "tanks_north.bmp",
    IMG_TANKS_SOUTH: "tanks_south.bmp",
    IMG_TANKS_WEST: "tanks_west.bmp",
    IMG_TANKS_EAST: "tanks_east.bmp",
    IMG_TANKE_NORTH: "tanke_north.bmp",
    IMG_TANKE_SOUTH: "tanke_south.bmp",
    IMG_TANKE_WEST: "tanke_west.bmp",
    IMG_TANKE_EAST: "tanke_east.bmp",
    IMG_BULLET: "hitterg.bmp"
};
var GameConfig = {
    MapWidth: 800,//地图宽度
    MapHeight: 500,//地图高度
    TanksSpeed: 3,//我方坦克移动速度
    TankeSpeed: 3,//敌方坦克移动速度
    BulletSpeed: 9//子弹速度
}
//单位类型
var Type = {
    TankHuman: 0x1, //我方坦克
    TankComputer: 0x2, //敌方坦克
    BulletHuman: 0x4, //我方坦克炮弹
    BulletComputer: 0x8, //敌方坦克炮弹
    Home: 0x10,//老家
    Block: 0x20,//钻块
    All: 0xFFFF
}



然后，正式开始我们的思考，
1、在一张图中，我们有己方坦克、敌方坦克、老家、树、水流等元素其中树、水流、石头这些是静态元素（不包括砖头），只是占据一定的空间，但是没有任何作用
2、砖头的效果和老家差不多，碰到子弹就会消掉，所以砖头和老家应该可以看为一类
3、己方坦克和敌方坦克的区别在于，敌方坦克随机移动位置和发射子弹，己方通过键盘操作，因为碰到子弹后会消失，所以己方坦克和敌方坦克可以和砖头、老家共用一个类，都共同实现了碰到子弹后的操作
4、己方和敌方发射的子弹只对对方有效，所以要分两种子弹考虑
所以我们共分两大类，一个是地图类（树、石头、水）、一个是游戏单元类（包含剩下的元素），但是他们都有很多共同点，比如都是在一张图中，都需要判断元素是否包含，都有位置信息等，所以我们先实现他们共同的基类：BaseUnit类
BaseUnit.js 
//向量操作
var Vector = new Array();
Vector.Cross = function (v1, v2) {
    return (v1.x * v2.y - v1.y * v2.x);
}
Vector.Length = function (v1) {
    return (Math.sqrt(v1.x * v2.x + v1.y * v2.y));
}
function BaseUnit() { } //游戏单位
BaseUnit.prototype = {
    //判断两个物件或者区域是否相交，若相交，则要么顶点互相包含，要么矩形边界（或对角线）相交
    Intersects : function (obj) {
        if (this.pointInside(obj.posx, obj.posy) ||
   this.pointInside(obj.posx + obj.width * obj.unitWidth, obj.posy) ||
   this.pointInside(obj.posx, obj.posy + obj.height * obj.unitHeight) ||
   this.pointInside(obj.posx + obj.width * obj.unitWidth, obj.posy + obj.height * obj.unitHeight)) {
            return true;
        }
        else if (obj.pointInside(this.posx, this.posy) ||
   obj.pointInside(this.posx + this.width * this.unitWidth, this.posy) ||
   obj.pointInside(this.posx, this.posy + this.height * this.unitHeight) ||
   obj.pointInside(this.posx + this.width * this.unitWidth, this.posy + this.height * this.unitHeight)) {
            return true;
        }
        else if (obj.posx != null && obj.posy != null)//判断矩形对角线相交 |v1 X v2||v1 X v3| < 0
        {
            var vector1 = new Object();
            var vector2 = new Object();
            var vector3 = new Object();
            vector1.x = this.width * this.unitWidth;
            vector1.y = this.height * this.unitHeight; //矩形对角线向量
            vector2.x = obj.posx - this.posx;
            vector2.y == obj.posy - this.posy;
            vector3.x = vector2.x + obj.unitWidth * obj.width;
            vector3.y = vector2.y + obj.unitHeight * obj.Height;
            if ((Vector.Cross(vector1, vector2) * Vector.Cross(vector1, vector3)) < 0) {
                return true;
            }
        }
        return false;
    },
    pointInside : function (x, y) //判断一个点是否在这个物件内部
    {
        if (this.posx == null || this.posy == null) {
            return false;
        }
        if (x >= this.posx && x <= this.posx + this.width * this.unitWidth && y >= this.posy && y <= this.posy + this.height * this.unitHeight) {
            return true;
        }
        return false;
    },
    getPosition : function () //返回物件的重心，因为是矩形所以返回中点
    {
        var pos = new Array();
        pos.push(this.posx + this.unitWidth * this.width / 2);
        pos.push(this.posy + this.unitHeight * this.height / 2);
        return pos;
    },
    isVisible : function () {
        var obj = document.getElementById(this.id);
        return obj != null && obj.style.display != 'none';
    },
    Test : function (posx, posy) {
        this.oldpos = new Array(this.posx, this.posy);
        this.posx = posx;
        this.posy = posy;
    },
    Recover : function () {
        if (this.oldpos != null) {
            this.posx = this.oldpos[0];
            this.posy = this.oldpos[1];
            return true;
        }
        return false;
    }
}



接下来我们先实现Region地图类，相对另一个类GameUnit类要容易许多
Regiong.js 
//地图区域类
function Region(id, width, height, type) {
    Region.metaData[id] = this;
    Region.metaData.All.push(this);
    this.type = type;
    this.width = width;
    this.height = height;
    this.id = id;
    Region.prototype._parseType = function () {
        this.imageUrl = Region.mapImages[this.type];
        switch (type) {
            case "tree":
                this.allowPassType = 0;	 //规定允许何种类型的Unit通过，0表示不允许任何单位通过
                this.absorbType = Type.BulletHuman | Type.BulletComputer; //吸收（使消失）何种类型的Unit
                this.unitWidth = 16;
                this.unitHeight = 16;
                break;
            case "water":
                this.allowPassType = Type.BulletHuman | Type.BulletComputer;	 //规定允许何种类型的Unit通过，0表示不允许任何单位通过
                this.absorbType = 0;
                this.unitWidth = 16;
                this.unitHeight = 16;
                break;
            case "iron":
                this.allowPassType = 0;	 //规定允许何种类型的Unit通过，0表示不允许任何单位通过
                this.absorbType = Type.BulletHuman | Type.BulletComputer; //吸收（使消失）何种类型的Unit;
                this.unitWidth = 16;
                this.unitHeight = 16;
                break;
            default:
                this.allowPass = 0xFF;
                break;
        }
    }
    Region.prototype.Draw = function (posx, posy) {
        this.posx = posx;
        this.posy = posy;
        var backCanvs = $("_back");
        var newRegion = $(this.id);
        if (newRegion == null) {
            newRegion = document.createElement("span");
            newRegion.id = this.id;
            backCanvs.appendChild(newRegion);
        }
        newRegion.style.position = "absolute";
        newRegion.style.left = this.posx;
        newRegion.style.top = this.posy;
        newRegion.style.width = this.width * this.unitWidth;
        newRegion.style.height = this.height * this.unitHeight;
        newRegion.style.backgroundImage = "url(" + this.imageUrl + ")";
    }
    Region.prototype.Overlaped = function () //判断是否和其他区域重叠
    {
        if (this.posx == null || this.posy == null) {
            return false;
        }
        for (var i = 0; i < Region.metaData.All.length; i++) {
            if (this == Region.metaData.All[i] || Region.metaData.All[i].posx == null || Region.metaData.All[i].posy == null) {
                continue;
            }
            if (this.Intersects(Region.metaData.All[i])) {
                return true;
            }
        }
        return false;
    }
    Region.prototype.Dispose = function () {
        var backCanvs = $("_back");
        var unit = $(this.id);
        backCanvs.removeChild(unit);
        Region.metaData[this.id] = null;
        for (var i = 0; i < Region.metaData.All.length; i++) {
            if (Region.metaData.All[i].id == this.id) {
                Region.metaData.All.splice(i, 1);
            }
        }
        this.Disposed = true;
    }
    this._parseType();
} Region.prototype = new BaseUnit();
Region.mapImages = new Array();//保存图片路劲
Region.mapImages["tree"] = Resource.ROOT + Resource.IMG_TREE;
Region.mapImages["water"] = Resource.ROOT + Resource.IMG_WATER;
Region.mapImages["iron"] = Resource.ROOT + Resource.IMG_IRON;
Region.mapImages["block"] = Resource.ROOT + Resource.IMG_BLOCK;
Region.metaData = new Array();
Region.metaData["RandomRegions"] = new Array();
Region.metaData.All = new Array();


下面实现GameUnit类
KeyCodeList.js//键盘点击类 
var KeyCodeList = new Array();
KeyCodeList.KeysDown = new Array();
KeyCodeList.KeysUp = new Array();
KeyCodeList.KeysDown.Put = function (keyCode) {
    var retVal = KeyCodeList.KeysDown.Remove(keyCode);
    KeyCodeList.KeysDown.push(keyCode);
    return retVal;
}
KeyCodeList.KeysDown.Remove = function (keyCode) {
    for (var i = 0; i < KeyCodeList.KeysDown.length; i++) {
        if (KeyCodeList.KeysDown[i] == keyCode) {
            KeyCodeList.KeysDown.splice(i, 1);
            return true;
        }
    }
    return false;
}
KeyCodeList.KeysDown.getKey = function () {
    if (KeyCodeList.KeysDown.length <= 0) {
        return null;
    }
    else {
        return KeyCodeList.KeysDown[KeyCodeList.KeysDown.length - 1];
    }
}



AIAction.js//敌方坦克动作类 
var AIAction = new Array();
AIAction.takeAction = function (style, obj, seed) {
    self.status = seed;
    switch (style) {
        case "normal":
            var choose = Math.floor(seed * Math.random());
            if (choose > 0 && choose <= 1) {
                obj.direction = "_east";
                obj.imageUrl = Resource.ROOT + Resource.IMG_TANKE_EAST;
                obj.unitWidth = 31;
                obj.unitHeight = 26;
            }
            else if (choose <= 2) {
                obj.direction = "_west";
                obj.imageUrl = Resource.ROOT + Resource.IMG_TANKE_WEST;
                obj.unitWidth = 31;
                obj.unitHeight = 26;
            }
            else if (choose <= 3) {
                obj.direction = "_north";
                obj.imageUrl = Resource.ROOT + Resource.IMG_TANKE_NORTH;
                obj.unitWidth = 26;
                obj.unitHeight = 31;
            }
            else if (choose <= 4) {
                obj.direction = "_south";
                obj.imageUrl = Resource.ROOT + Resource.IMG_TANKE_SOUTH;
                obj.unitWidth = 26;
                obj.unitHeight = 31;
            }
            if (choose >= 30 && choose <= 40) {
                obj.tankFire("BulletComputer", 3);
            }
            break;
        default:
            break;
    }
}



GameUnit.js 
function GameUnit(id, width, height, type) //游戏元素 —— 摆放在地图区域上的物件
{
    GameUnit.metaData[id] = this;
    GameUnit.metaData.All.push(this);
    this.id = id;
    this.width = width;
    this.height = height;
    this.type = type;
    this.initialized = false;
    this.Disposed = false;
    this._time = new Date().getTime(); //活动时间，被一些物件使用，例如判断连续射击等等
    GameUnit.prototype._parseType = function () //初始化物件
    {
        this.imageUrl = GameUnit.mapImages[this.type];
        switch (type) {
            case "Home":
                this.allowPassType = 0;
                this.absorbType = Type.BulletHuman | Type.BulletComputer;
                this.unitWidth = 39;
                this.unitHeight = 33;
                this.direction = "_north";
                this.AIMode = "normal";
                break;
            case "TankHuman":
                this.allowPassType = 0;
                this.absorbType = Type.BulletComputer | Type.BulletHuman;
                this.unitWidth = 29;
                this.unitHeight = 32;
                document.body.eventHandler = this;
                document.body.onkeydown = function () {
                    this.eventHandler.KeyDown(this, event);
                };
                document.body.onkeyup = function () {
                    this.eventHandler.KeyUp(this, event);
                };
                this.direction = "_north";
                break;
            case "TankComputer":
                this.allowPassType = 0;
                this.absorbType = Type.BulletHuman | Type.BulletComputer;
                this.unitWidth = 26;
                this.unitHeight = 31;
                this.direction = "_south";
                this.AIMode = "normal";
                break;
            case "BulletHuman":
                this.allowPassType = 0;
                this.absorbType = Type.BulletComputer | Type.BulletHuman | Type.TankComputer | Type.Home | Type.Block;
                this.unitWidth = 12;
                this.unitHeight = 12;
                this.repeatable = "norepeat";
                this.autoDispose = true;
                break;
            case "BulletComputer":
                this.allowPassType = 0;
                this.absorbType = Type.BulletComputer | Type.BulletHuman | Type.TankHuman | Type.Home | Type.Block;
                this.unitWidth = 12;
                this.unitHeight = 12;
                this.repeatable = "norepeat";
                this.autoDispose = true;
                break;
            case "Block":
                this.allowPassType = 0;	 //规定允许何种类型的Unit通过，0表示不允许任何单位通过
                this.absorbType = Type.BulletHuman | Type.BulletComputer; //吸收（使消失）何种类型的Unit;
                this.unitWidth = 16;
                this.unitHeight = 16;
                break;
            default:
                break;
        }
    }
    GameUnit.prototype.Kill = function (obj) //销毁一个物件
    {
        obj.clearInterval();
        obj.type = 0;
        obj.dead = true;
        obj.allowPassType = Type.All;
        obj.absorbType = 0;
        obj.KeyDown = obj.KeyUp = function () { };
        obj.AIMode = 0;
        obj.Draw(0, 0);
        obj.whenDead();
    }
    this.whenDead = function () { }; //物件被销毁后触发的事件，可根据对象重写
    GameUnit.prototype.KeyUp = function (sender, event) {
        if (event.keyCode < 37 || event.keyCode > 40) {
            if (event.keyCode == 32) {
                clearInterval(this.shooterTimer);
                this.shooterTimer = null;
            }
            return false;
        }
        else //处理方向键
        {
            KeyCodeList.KeysDown.Remove(event.keyCode);
            if (KeyCodeList.KeysDown.getKey() == null) {
                this.clearInterval();
            }
        }
    }
    GameUnit.prototype.KeyDown = function (sender, event) {
        if (event.keyCode >= 37 && event.keyCode <= 40) //处理方向键
        {
            if (KeyCodeList.KeysDown.getKey() == event.keyCode) {
                return;
            }
            KeyCodeList.KeysDown.Put(event.keyCode);
            this.UnitSpeed = GameConfig.TanksSpeed;
            if (event.keyCode == 37) //left
            {
                this.imageUrl = Resource.ROOT + Resource.IMG_TANKS_WEST;
                this.unitWidth = 32;
                this.unitHeight = 29;
                this.direction = "_west";
                this.ready(3);
            }
            else if (event.keyCode == 38) //up
            {
                this.imageUrl = Resource.ROOT + Resource.IMG_TANKS_NORTH;
                this.unitWidth = 29;
                this.unitHeight = 32;
                this.direction = "_north";
                this.ready(3);
            }
            else if (event.keyCode == 39) //right
            {
                this.imageUrl = Resource.ROOT + Resource.IMG_TANKS_EAST;
                tmp = this.unitWidth;
                this.unitWidth = 32;
                this.unitHeight = 29;
                this.direction = "_east";
                this.ready(3);
            }
            else if (event.keyCode == 40) //down
            {
                this.imageUrl = Resource.ROOT + Resource.IMG_TANKS_SOUTH;
                this.unitWidth = 29;
                this.unitHeight = 32;
                this.direction = "_south";
                this.ready(3);
            }
        }
        if (event.keyCode == 32) //space -- shoot!
        {
            if (this.shooterTimer == null) {
                this.shooterTimer = setInterval("GameUnit.metaData." + this.id + ".humanFire()", 1);
            }
        }
    }
    GameUnit.prototype.tankFire = function (type, speed) {
        if (speed == null) {
            speed = GameConfig.BulletSpeed;
        }
        var shootTime = new Date().getTime();
        //if (GameUnit.metaData["bullet" + this.id] == null || GameUnit.metaData["bullet" + this.id].dead)
        if (shootTime - this._time >= 500) {
            this._time = shootTime;
            var bullet = new GameUnit("bullet" + shootTime, 1, 1, type);
            var pos = this.getPosition();
            var x = pos[0] - bullet.unitWidth / 2;
            var y = pos[1] - bullet.unitHeight / 2;
            bullet.direction = this.direction;
            if (this.direction == "_north") {
                y -= this.unitHeight / 2 + 10;
            }
            if (this.direction == "_south") {
                y += this.unitHeight / 2 + 10;
            }
            if (this.direction == "_east") {
                x += this.unitWidth / 2 + 10;
            }
            if (this.direction == "_west") {
                x -= this.unitWidth / 2 + 10;
            }
            bullet.Draw(x, y);
            bullet.ready(speed);
            return;
        }
        else {
            return;
        }
    }
    GameUnit.prototype.humanFire = function () {
        this.tankFire("BulletHuman");
    }
    GameUnit.prototype.setInterval = this.readyMove;
    GameUnit.prototype.clearInterval = function () {
        clearInterval(this.timer);
        this.timer = null;
        this.setInterval = this.readyMove;
    }
    GameUnit.prototype.readyMove = function (func) {
        if (this.timer == null) this.timer = setInterval("GameUnit.metaData." + this.id + "." + func, 10);
        this.setInterval = function () { };
    }
    GameUnit.prototype.ready = function (speed) {
        if (this.timer == null) {
            this.UnitSpeed = speed;
            this.setInterval("Move();");
        }
    }
    GameUnit.prototype.Move = function () {
        _AI_seed = 300;
        if (this.direction == null) {
            throw new Error("This object cannot move!");
        }
        this.Test(this.posx, this.posy);
        switch (this.direction) {
            case "_west":
                if (this.posx > 5) this.posx -= this.UnitSpeed;
                else {
                    _AI_seed = 100;
                    if (this.autoDispose) this.Dispose();
                }
                break;
            case "_north":
                if (this.posy > 5) this.posy -= this.UnitSpeed;
                else {
                    _AI_seed = 100;
                    if (this.autoDispose) this.Dispose();
                }
                break;
            case "_east":
                if (this.posx < GameConfig.MapWidth - this.unitWidth * this.width) this.posx += this.UnitSpeed;
                else {
                    _AI_seed = 100;
                    if (this.autoDispose) this.Dispose();
                }
                break;
            case "_south":
                if (this.posy < GameConfig.MapHeight - this.unitHeight * this.height) this.posy += this.UnitSpeed;
                else {
                    _AI_seed = 100;
                    if (this.autoDispose) this.Dispose();
                }
                break;
            default:
                throw new Error("Error direction to move!");
        }
        var region = this.Region();
        if (this.meetDeal(region)) {
            _AI_seed = 100;
        }
        var unit = this.Unit();
        if (this.meetDeal(unit)) {
            _AI_seed = 100;
        }
        this.Draw(this.posx, this.posy);
        if (this.AIMode != null) {
            AIAction.takeAction(this.AIMode, this, _AI_seed);
        }
    }
    GameUnit.prototype.meetDeal = function (obj) //和物件碰撞后执行的动作
    {
        var killObj = false;
        if (obj == null || obj.Disposed) {
            return false;
        }
        if ((this.absorbType & Type[obj.type]) != 0) {
            killObj = true;
        }
        if ((obj.absorbType & Type[this.type]) != 0) {
            if (killObj) {
                this.Kill(obj);
            }
            this.Kill(this);
            return true;
        }
        if ((obj.allowPassType & Type[this.type]) == 0) {
            this.Recover();
            return true;
        }
    }
    GameUnit.prototype.Draw = function (posx, posy) {
        if (this.Disposed) {
            return;
        }
        this.posx = posx;
        this.posy = posy;
        var foreCanvs = document.getElementById("_fore");
        var newUnit = document.getElementById(this.id);
        if (newUnit == null) {
            newUnit = document.createElement("span");
            newUnit.id = this.id;
            foreCanvs.appendChild(newUnit);
        }
        if (this.dead) {
            newUnit.style.display = 'none';
        }
        newUnit.style.position = "absolute";
        newUnit.style.left = this.posx;
        newUnit.style.top = this.posy;
        newUnit.style.width = this.width * this.unitWidth;
        newUnit.style.height = this.height * this.unitHeight;
        if (this.repeatable == "norepeat") {
            newUnit.style.backgroundRepeat = "no-repeat";
        }
        newUnit.style.backgroundImage = "url(" + this.imageUrl + ")";
    }
    GameUnit.prototype.Dispose = function () {
        this.Dispose = function () { }; //该函数只能被执行一次
        this.AIMode = null;
        this.Move = function () { };
        this.clearInterval();
        var foreCanvs = $("_fore");
        var unit = $(this.id);
        foreCanvs.removeChild(unit);
        //GameUnit.metaData[this.id] = null;
        for (var i = 0; i < GameUnit.metaData.All.length; i++) {
            if (GameUnit.metaData.All[i].id == this.id) {
                GameUnit.metaData.All.splice(i, 1);
            }
        }
        this.Disposed = true;
    }
    GameUnit.prototype.Region = function () //返回当前所在的区域
    {
        for (var i = 0; i < Region.metaData.All.length; i++) {
            if (this == Region.metaData.All[i]) {
                continue;
            }
            if (this.Intersects(Region.metaData.All[i])) {
                return Region.metaData.All[i];
            }
        }
        return null;
    }
    GameUnit.prototype.Unit = function () //返回当前遇到的物件
    {
        for (var i = 0; i < GameUnit.metaData.All.length; i++) {
            if (this == GameUnit.metaData.All[i]) {
                continue;
            }
            if (this.Intersects(GameUnit.metaData.All[i])) {
                return GameUnit.metaData.All[i];
            }
        }
        return null;
    }
    GameUnit.prototype.Overlaped = function () //判断是否和其他物件重叠
    {
        if (this.posx == null || this.posy == null) {
            return false;
        }
        for (var i = 0; i < GameUnit.metaData.All.length; i++) {
            if (this == GameUnit.metaData.All[i] || GameUnit.metaData.All[i].posx == null || GameUnit.metaData.All[i].posy == null) {
                continue;
            }
            if (this.Intersects(GameUnit.metaData.All[i])) {
                return true;
            }
        }
        return false;
    }
    this._parseType();
} GameUnit.prototype = new BaseUnit();
GameUnit.mapImages = new Array();
GameUnit.mapImages["TankHuman"] = Resource.ROOT + Resource.IMG_TANKS_NORTH;
GameUnit.mapImages["TankComputer"] = Resource.ROOT + Resource.IMG_TANKE_SOUTH;
GameUnit.mapImages["BulletHuman"] = Resource.ROOT + Resource.IMG_BULLET;
GameUnit.mapImages["BulletComputer"] = Resource.ROOT + Resource.IMG_BULLET;
GameUnit.mapImages["Home"] = Resource.ROOT + Resource.IMG_HOME;
GameUnit.mapImages["Block"] = Resource.ROOT + Resource.IMG_SBLOCK;
GameUnit.metaData = new Array();
GameUnit.metaData.All = new Array();




所有类实现玩后，就可以生成页面了 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>坦克大战</title>
<style type="text/css">
body { background-color:#000; margin: 0 0 0 0; width:100%;height:100%;}
div#main {padding: 0 0 0 0;width:800px;height:500px;background:url(images/ground.bmp);}
</style>
</head>
    <script type="text/javascript" src="js/Common.js"></script>
    <script type="text/javascript" src="js/Config.js"></script>
    <script type="text/javascript" src="js/Base.js"></script>
    <script type="text/javascript" src="js/Region.js"></script>
    <script type="text/javascript" src="js/GameUnit.js"></script>
    <script type="text/javascript" src="js/KeyCodeList.js"></script>
    <script type="text/javascript" src="js/AIAction.js"></script>
    <script type="text/javascript">
        var emTankIdx = 3;
        var emTanks = new Array(20);
        function enemyDestroyed() {//地方坦克死后重新升成一辆坦克
            if (emTankIdx < emTanks.length) {
                var x, y;
                do {
                    y = 10;
                    x = Math.floor(Math.random() * 3) * 220 + 40;
                    emTanks[emTankIdx].Test(x, y);
                } while (emTanks[emTankIdx].Overlaped());
                emTanks[emTankIdx].Draw(x, y);
                emTanks[emTankIdx].ready(1);
                emTankIdx++;
            }
        }
        var killed = 0;
    </script>
<script type="text/javascript">
   
    var Game = function () { this.initialize.apply(this, arguments) };
    Game.prototype = {
        initialize: function () {
            //水
            var water1 = new Region("water1", 50, 2, "water");
            water1.Draw(0, 150);
            //水
            var water2 = new Region("water2", 50, 2, "water");
            water2.Draw(0, 300);
            var iron = new Region("iron", 20, 2, "iron");
            iron.Draw(250, 225);
           
            var myTank = new GameUnit("mytank", 1, 1, "TankHuman");//己方坦克
            myTank.Draw(200, 460);
            myTank.whenDead = function () {
                alert("你死了,你总共歼灭了" + killed + "辆坦克");
                location.href = location.href;
            }
            var home = new GameUnit("home", 1, 1, "Home");//老家
            home.Draw(400, 460);
            home.whenDead = function () {
                alert("Game Over!你总共歼灭了" + killed + "辆坦克");
                location.href = location.href;
            }
            //保护老家的砖头块
            var block1 = new GameUnit("block1", 1, 1, "Block");
            var block2 = new GameUnit("block2", 1, 1, "Block");
            var block3 = new GameUnit("block3", 1, 1, "Block");
            var block4 = new GameUnit("block4", 1, 1, "Block");
            var block5 = new GameUnit("block5", 1, 1, "Block");
            var block6 = new GameUnit("block6", 1, 1, "Block");
            var block7 = new GameUnit("block7", 1, 1, "Block");
            var block8 = new GameUnit("block8", 1, 1, "Block");
            var block9 = new GameUnit("block9", 1, 1, "Block");
            block1.Draw(380, 480);
            block2.Draw(380, 464);
            block3.Draw(380, 448);
            block4.Draw(396, 448);
            block5.Draw(412, 448);
            block6.Draw(428, 448);
            block7.Draw(444, 448);
            block8.Draw(444, 464);
            block9.Draw(444, 480);
            //敌方坦克
            for (var i = 0; i < emTanks.length; i++) {
                var id = "tank" + i;
                emTanks[i] = new GameUnit(id, 1, 1, "TankComputer");
                emTanks[i].whenDead = function () {//一辆坦克死后过两秒重新生成一辆坦克
                    killed++;
                    setTimeout("enemyDestroyed()", 2000);
                };
            }
            emTanks[0].Draw(40, 10);
            emTanks[0].ready(1);
            emTanks[1].Draw(480, 10);
            emTanks[1].ready(1);
            emTanks[2].Draw(260, 10);
            emTanks[2].ready(1);
        }
    }
    window.onload = function () {
        new Game();
    }
</script>
<body>
<div id="main">
    <div id="_back"> </div>
    <div id="_fore"> </div>
</div>
</body>
</html>



地图可以任意修改，赋附件：
王川
2014/02/14
_王川
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用 Python 写个坦克大战
weixin_48923393的博客
06-28 1778
文 |野客来源：Python 技术「ID: pythonall」坦克大战是一款策略类的平面射击游戏，于 1985 年由 Namco 游戏公司发布，尽管时至今日已经有了很多衍生类的游戏，...
坦克大战--chapter01
Jay_Wolf的博客
03-23 196
JavaScript项目 1. 生成画布 <canvas id="canvas" width="500" height="500" style="background: greenyellow"></canvas>  看起来和  标签一样，只是  只有两个可选的属性 width、heigth 属性，而没有...
Python实现坦克大战
热门推荐
ZackSock的博客
10-16 5万+
Python实现经典坦克大战游戏。
python坦克大战
sueerlee的博客
12-20 448
【代码】python坦克大战。
坦克大作战
Make Excellence a Habit
08-02 1018
首先我们来看一下目录: 我来解释一下 它就是原生的js写的 所有它只需要两个js文件 然后一些图片 还有一个神器的地方就是还有音频 大家可以试一下 然后还有一个index页面 图片我们放在与页面同目录下： 然后接下来我们看一下我们的js文件：（main.js） window.addEventListener("load", canvasApp, false); //是否支持canvas fu...
第11章 坦克大战游戏.zip
12-24
【标题】"第11章 坦克大战游戏.zip" 涉及的是一个基于计算机编程的游戏开发项目，特别是一款名为"坦克大战"的经典游戏的实现。在本章中，学习者将深入理解如何利用编程语言来创建交互式游戏环境，涉及到的主要技术...
Java 第16章 坦克大战1 思路整理
最新发布
12-24
在本章中，我们将深入探讨Java编程语言在创建坦克大战游戏中的应用。坦克大战是一款经典的双人对战游戏，它需要玩家控制各自的坦克在地图上移动，射击并摧毁敌方坦克，同时避免自身的爆炸。本章将从游戏设计、基本...
第12章 滚屏动作类游戏——坦克大战.zip
03-19
Android SDK中没有内置的碰撞检测库，但开发者可以自己实现或利用第三方库。 4. **用户输入处理**：坦克的移动和射击需要响应用户的触摸或按键操作。Android提供了多种方式处理输入事件，如MotionEvent和KeyEvent，...
Python写的坦克大战
12-21
能够实现敌我双方坦克互打，部分仿照真的坦克大战情节。
坦克大战（python编写）
10-13
python编写的坦克大战，主要用到的模块是pygame。代码有足够详细的注释，非常容易理解，喜欢的朋友支持支持~
Python坦克大战（一对多）
01-11
基于pygame的Python坦克大战，使用gameEngine引擎，实现一对多的坦克大战
韩顺平java坦克大战（2）
03-18
在“坦克大战”项目的第二部分，即第四十讲到四十二讲中，实现了以下几个关键功能： 1. **坦克连发子弹**：玩家控制的坦克能够连续发射子弹，最多可以同时存在五颗子弹。 2. **我方坦克击中敌人坦克后敌人消失**：...
Python 坦克大战
MateSnake的博客
10-11 643
用到的库： import pygame import time import random from pygame.sprite import Sprite 全部代码： import pygame import time import random from pygame.sprite import Sprite SCREEN_WIDTH = 710 # 设置常量，固定窗口大小 SCREEN_HEIGHT = 500 BG_COLOR = pygame.Color(100, 149, 237) TE
python版坦克大战
weixin_45651291的博客
01-06 4172
python版坦克大战 用python一千行代码搞定坦克大战游戏。 在开发坦克大战游戏项目中，我们使用的是pygame模块来完成的，所以得先装好pygame模块。本游戏一共封装了11个类和两个模块（pygame，random）。大家可以在GitHub下载游戏源文件。地址https://github.com/Young157/feiji 首先给大家展示下游戏截图！！！ 由于代码量较多，在本文章...
Python3——坦克大战
weixin_30559481的博客
09-30 1363
# coding=utf-8 # Version:python3.6.1 __date__ = '2018/9/20 18:51' __author__ = 'Lgsp_Harold' import pygame, sys, time from random import randint from pygame.locals import * # 坦克大战主窗口 c...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值