编程知识 cdmana.com

From scratch to teach you to use Javascript + canvas to develop a tower defense game 01 map creation

Project presentations

Project demonstration address :

Experience it.

Project source code :

Project source code

The code structure

Effect of this section

Game home page

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" />
<title> Tower Defense </title>

</head>
<body>

<img src="img/enemy.png" id="enemy_img" style="display:none;" />
<img src="img/tower.png" id="tower_img" style="display:none;" />
<img src="img/bullet.png" id="bullet_img" style="display:none;" />
<img src="img/btn.png" id="btn_img" style="display:none;" />

<div id="game" style="position:relative;float:left;width:600px;height:500px;">
	<canvas id="map" width="500" height="500" style="background:url(img/bg.png) repeat;position:absolute;left:0;top:0;z-index:99;"></canvas>
	<canvas id="main" width="500" height="500" style="position:absolute;left:0;top:0;z-index:100;"></canvas>
	<canvas id="tower" width="500" height="500" style="position:absolute;left:0;top:0;z-index:100;"></canvas>
	<canvas id="select" width="500" height="500" style="position:absolute;left:0;top:0;z-index:101;"></canvas>
	<canvas id="info" width="100" height="500" style="background-color:black;position:absolute;left:500px;top:0;z-index:102;"></canvas>
</div>

<div style="float:left;width:500px;margin-left:50px;">
	
	<p>
		 explain : You can upgrade to every tower 3 level , The price of upgrading is the same as building itself , Half of the total amount sold .<br/><br/>
		 The first kind of tower : Upgrade to 3 level , There's a thief function , Every attack steals 1 Yuan .<br/>
		 The second kind of tower : Slow down the attack ,3 You can slow down two at the same time .<br/>
		 The third kind of tower : Multiple attacks . Attack multiple targets .<br/>
		 The fourth kind of tower : Puncture attack , Attack a line , The most aggressive .<br/>
		 The fifth kind of tower : Second kill attack , There is a certain chance to kill the enemy in seconds .<br/><br />
		 Select Map <select id="select_map"><option value="1"> Map one </option><option value="2"> Map two </option></select>, Then press <input type="button" value=" Start " onclick="startGame()" /> Start the game !
	</p>
	
</div>


<script type="text/javascript" src="js/tools.js"></script>
<script type="text/javascript" src="js/MapData.js"></script>
<script type="text/javascript" src="js/Map.js"></script>
<script type="text/javascript" src="js/Info.js"></script>
<script type="text/javascript" src="js/Enemy.js"></script>
<script type="text/javascript" src="js/Tower.js"></script>
<script type="text/javascript" src="js/Bullet.js"></script>
<script type="text/javascript" src="js/Game.js"></script>

<script type="text/javascript">
	
    var isStart = false;
    
	function startGame(){
		
        if(!isStart)Game.start();
        else Game.restart();
        
        isStart = true;
	}
	
</script>

</body>
</html>

The main module of the game

game.js

// Game data control class 
var Game = {
    // Picture list information 
    imgList : {},
    // Canvas list information 
    canvasList : {},

    // initialization 
    init : function(){
        this.initImg();
        this.initCanvas();
    },
    // Initialize picture 
    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")
        }
    },
    // Initialize canvas 
    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 
    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);
    },
    // The loop body 
    loop : function(){
        Canvas.clear(Game.canvasList.main,500,500);
    }
}

Game.init();

The code speaks for itself .
Just a quick explanation :
Game.init() Load and picture Canvas object , This game has 5 individual Canvas object , The specific use is explained in the following section .
Click the start button on the web page , call start Method .start Method to load the map , And draw canvas On .

Map data

0 It's the wall ,1 It's a path that can be taken . You can simply change the data , Generate maps of different shapes .
MapData.js

// Map category 
var MapData = [];

// Map 2 data 
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]];
// Map one data 
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]];

Draw a map

Map.js

// Map drawing class 
var Map = {
    // Draw a map 
    draw : function(map){

        var i,j;

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

            for(j = 0;j<10;j++){
                // Draw a background map 
                if(MapData[i][j] == 0)Canvas.drawRect(map,i*50,j*50,50,50,'red');
                // Painting the way to go 
                else Canvas.fillRect(map,i*50,j*50,50,50,'black');
            }
        }
    }
}

It's simple , Just look at the notes .

Game cycle

    // Start 
    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);
    },
    // The loop body 
    loop : function(){
        Canvas.clear(Game.canvasList.main,500,500);
    }

every other 20 millisecond , Refresh the interface .
That's All

Project source code :

Project source code

版权声明
本文为[Teachers enjoy themselves]所创,转载请带上原文链接,感谢
https://cdmana.com/2020/12/20201224095938173I.html

Scroll to Top