请选择 进入手机版 | 继续访问电脑版

从零开始手把手教你使用javascript+canvas开发一个塔防游戏02敌人自动寻路

[复制链接]
盛夏丨光年丶 发表于 2021-1-1 17:47:40 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
项目演示


项目演示地址:

体验一下
项目源码:

项目源码
代码布局


本节做完效果


Enemy.js

[code]//敌人类function Enemy(cxt,img,type,x,y,width,height){    this.cxt = cxt;    this.img = img;    this.x = x;//55    this.y = y;//0    this.width = width;    this.height = height;    //敌人类型    this.type = type;    this.sp = 2;    //移动的方向    this.dir = null;    //下个移动位置    this.nextPosition = null;    //记载已经走过的位置    this.hadWalk = {};}Enemy.prototype = {    //敌人在图片中对应的位置    enemyMap : [{x:0,y:0},{x:40,y:0},{x:80,y:0},{x:120,y:0},{x:160,y:0},{x:200,y:0},{x:240,y:0},{x:280,y:0},{x:320,y:0},{x:360,y:0},        {x:400,y:0},{x:440,y:0},{x:480,y:0},{x:520,y:0},{x:560,y:0},{x:600,y:0},{x:640,y:0},{x:680,y:0},{x:720,y:0},{x:760,y:0}],    //画出敌人    draw : function(){        //冰冻中,画出冰冻图        if(this.frozenTime > 0){            Canvas.drawImg(this.cxt,this.img,this.enemyMap[this.type].x,this.enemyMap[this.type].y+40,this.width,this.height,this.x,this.y,this.width,this.height);        }        //画出正常图        else Canvas.drawImg(this.cxt,this.img,this.enemyMap[this.type].x,this.enemyMap[this.type].y,this.width,this.height,this.x,this.y,this.width,this.height);        //盘算血量百分比        var persen = Math.floor(this.life / this.maxLife * 100) / 2;        //画出血量        Canvas.fillRect(this.cxt,this.x-5,this.y-5,persen,3,"rgba(38,223,116,0.8)");    },    //更新敌人信息    update : function(){        //超出坐标        if(this.x >= 500){            return false;        }        var xIndex = parseInt(this.x / 50,10),//1            yIndex = parseInt(this.y / 50,10);//0        //判断是否有下个移动位置信息,或者下哥移动位置信息是否已经走到了        if(!this.nextPosition ||            ((this.x >= this.nextPosition.x - 5 && this.x = this.nextPosition.y - 5 && this.y = 10){                xIndex = -1;            }            else{                //判断往下可否走                if(MapData[xIndex][yIndex+1] && !this.hadWalk[xIndex+"_"+(yIndex+1)]){                    this.dir = "down";                    yIndex += 1;                }                //判断往右可否走                else if(MapData[xIndex+1][yIndex]  && !this.hadWalk[(xIndex+1)+"_"+yIndex]){                    this.dir = "right";                    xIndex += 1;                }                else if(MapData[xIndex][yIndex-1] && !this.hadWalk[xIndex+"_"+(yIndex-1)]){                    this.dir = "up";                    yIndex -= 1;                }                else if(MapData[xIndex-1][yIndex] && !this.hadWalk[(xIndex-1)+"_"+yIndex]){                    this.dir = "left";                    xIndex -= 1;                }            }            //是否走到最右侧            if(xIndex == -1){                this.nextPosition = {x:500,y:yIndex*50+5};            }            //设置下个移动位置            else {                this.nextPosition = {x:xIndex*50+5,y:yIndex*50+5};                //记载已经走过的位置                this.hadWalk[xIndex+"_"+yIndex] = true;            }        }        //移动        switch(this.dir){            case "down":                this.y += this.sp;                break;            case "up":                this.y -= this.sp;                break;            case "left":                this.x -= this.sp;                break;            case "right":                this.x += this.sp;                break;            default:                break;        }    }}//更新所有敌人信息function updateEnemy(){    var enemy;    for(var i=0,l=Game.enemyList.length;i
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )