canvas 按钮_从零开始手把手教你使用javascript+canvas开发一个塔防游戏01地图创建...-CSDN博客

本文链接：https://blog.csdn.net/weixin_32743045/article/details/113050705

项目演示

项目演示地址：

体验一下

项目源码：

项目源码

代码结构

本节做完效果

游戏主页面

index.html

<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>塔防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>
        说明：每种塔都可以升级到3级，升级的价格与本身建造相同，卖掉的话就是总额的一半。<br/><br/>
        第一种塔：升级到3级，有小偷功能，每攻击一次会偷取1块钱。<br/>
        第二种塔：减速攻击，3级时可以同时减速两个。<br/>
        第三种塔：多重攻击。攻击多个目标。<br/>
        第四种塔：穿刺攻击，攻击一条线上，攻击力最高。<br/>
        第五种塔：秒杀攻击，有一定几率把敌人秒杀。<br/><br />
        选择地图<select id="select_map"><option value="1">地图一option><option value="2">地图二option>select>,然后按<input type="button" value="开始" onclick="startGame()" />开始游戏！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>

游戏主模块

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);
    }