从零开始手把手教你使用javascript+canvas开发一个塔防游戏01地图创建

项目演示

项目演示地址：

体验一下

项目源码：

项目源码

代码结构

本节做完效果

游戏主页面

index.html

    
    
    
    
    



    
    

        说明：每种塔都可以升级到3级，升级的价格与本身建造相同，卖掉的话就是总额的一半。


        第一种塔：升级到3级，有小偷功能，每攻击一次会偷取1块钱。

        第二种塔：减速攻击，3级时可以同时减速两个。

        第三种塔：多重攻击。攻击多个目标。

        第四种塔：穿刺攻击，攻击一条线上，攻击力最高。

        第五种塔：秒杀攻击，有一定几率把敌人秒杀。


        选择地图地图一地图二,然后按开始游戏！
    
    

游戏主模块

game.js

//游戏数据控制类
var Game = {
    //图片列表信息
    imgList : {},
    //画布列表信息
    canvasList : {},

    //初始化
    init : function(){
        this.initImg();
        this.initCanvas();
    },
    //初始化图片
    initImg : function(){

        this.imgList = {

            enemy_img : document.getElementById("enemy_img"),
            tower_img : document.getElementById("tower_img"),
            bullet_img : document.getElementById("bullet_img"),
            btn_img : document.getElementById("btn_img")
        }
    },
    //初始化画布
    initCanvas : function(){

        this.canvasList = {

            map : document.getElementById("map").getContext("2d"),
            main : document.getElementById("main").getContext("2d"),
            info : document.getElementById("info").getContext("2d"),
            select : document.getElementById("select").getContext("2d"),
            tower : document.getElementById("tower").getContext("2d")
        }
    },

    //开始
    start : function(){

        switch(document.getElementById("select_map").value){
            case "1":
                MapData = MapOne;
                break;
            case "2":
                MapData = MapTwo;
                break;
            default:
                MapData = MapOne;
                break;
        }
        Map.draw(this.canvasList.map);
        this.timer = setInterval(Game.loop,20);
    },
    //循环体
    loop : function(){
        Canvas.clear(Game.canvasList.main,500,500);
    }
}

Game.init();

代码不言自明。
简单说明一下：
Game.init()加载图片和Canvas对象，本游戏有5个Canvas对象，具体用途我们在后面图层章节进行说明。
点击网页上的开始按钮，调用start方法。start方法加载地图，并画到canvas上。

地图数据

0是墙壁，1是可以走的路径。可以简单的改变数据，生成不同形状的地图。
MapData.js

//地图类
var MapData = [];

//地图二数据
var MapTwo = [[0,0,0,0,0,0,0,0,0,0],
    [1,1,1,1,1,1,1,1,1,0],
    [0,0,0,0,0,0,0,0,1,0],
    [0,0,0,0,0,0,0,0,1,0],
    [0,1,1,1,1,1,1,1,1,0],
    [0,1,0,0,0,0,0,0,0,0],
    [0,1,0,0,0,0,0,0,0,0],
    [0,1,1,1,1,1,1,1,1,0],
    [0,0,0,0,0,0,0,0,1,0],
    [0,0,0,0,0,0,0,0,1,0]];
//地图一数据
var MapOne = [[0,0,0,0,0,0,0,0,0,0],
    [1,1,1,1,1,1,1,1,1,0],
    [0,0,0,0,0,0,0,0,1,0],
    [0,0,0,0,0,0,0,0,1,0],
    [0,0,0,0,0,0,0,0,1,0],
    [0,1,1,1,1,1,1,1,1,0],
    [0,1,0,0,0,0,0,0,0,0],
    [0,1,0,0,0,0,0,0,0,0],
    [0,1,0,0,0,0,0,0,0,0],
    [0,1,0,0,0,0,0,0,0,0]];

画地图

Map.js

//地图绘制类
var Map = {
    //画出地图
    draw : function(map){

        var i,j;

        for(i = 0; i < 10;i++){

            for(j = 0;j<10;j++){
                //画背景地图
                if(MapData[i][j] == 0)Canvas.drawRect(map,i*50,j*50,50,50,'red');
                //画可以走的路
                else Canvas.fillRect(map,i*50,j*50,50,50,'black');
            }
        }
    }
}

很简单，看注释即可明白。

游戏循环

    //开始
    start : function(){

        switch(document.getElementById("select_map").value){
            case "1":
                MapData = MapOne;
                break;
            case "2":
                MapData = MapTwo;
                break;
            default:
                MapData = MapOne;
                break;
        }
        Map.draw(this.canvasList.map);
        this.timer = setInterval(Game.loop,20);
    },
    //循环体
    loop : function(){
        Canvas.clear(Game.canvasList.main,500,500);
    }

每隔20毫秒，刷新一下界面。
That's All

项目源码：

项目源码