Project presentations

Project Demo Address:

Experience the

Project source code:

Program source code

The code structure

Finish the effects in this section

Enemy.js

/ / class Enemy function Enemy (CXT, img, type, x, y, width, height) {enclosing CXT = CXT; this.img = img; this.x = x; //55 this.y = y; //0 this.width = width; this.height = height; // Enemy type this.type = type; this.sp = 2; This. dir = null; NextPosition = null; this.nextPosition = null; This. hadWalk = {}; } enemy.prototype = {// enemyMap 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 an enemy draw: Function (){if(this.frozentime > 0){function(){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); } // Draw a normal graph else Canvas.drawImg(this.cxt,this.img,this.enemyMap[this.type].x,this.enemyMap[this.type].y,this.width,this.height,this.x,thi s.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)"); If (this.x >= 500){return false; } var xIndex = parseInt(this.x / 50,10),//1 yIndex = parseInt(this.y / 50,10); // check if there is a next move, or if the next move has reached if(! this.nextPosition || ((this.x >= this.nextPosition.x - 5 && this.x <= this.nextPosition.x) && (this.y >= This.nextposition. y - &&this. y <= this.nextPosition.y))){if(xIndex + 1 >= 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}; NextPosition = {x:xIndex*50+5,y:yIndex*50+5}; HadWalk [xIndex+"_"+yIndex] = true; this.hadWalk[xIndex+"_"+yIndex] = true; }} // Move 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<l; i++){ enemy = Game.enemyList[i]; if(! enemy)continue; enemy.update(); Function drawEnemy(){var enemy; for(var i=0,l=Game.enemyList.length; i<l; i++){ enemy = Game.enemyList[i]; if(! enemy)continue; enemy.draw(); }}Copy the code

Game. Js modified

Cycle an enemy every 50 times

Tool. Js added

Automatic path finding algorithm parsing

Coordinate system

If we go to the right we have the X-axis and then we go down the Y-axis

The entire map is 500 by 500

Var hero = {speed: 2, // moving pixels per second x: 55, y: SRCX :120, srCY :40, flood:50, // Dir :null, // nextPosition: null, // Record hadWalk:{}};Copy the code

Hero pixels are converted to grid (10 x 10) coordinates

 var xIndex = parseInt(hero.y / 50, 10),
 yIndex = parseInt(hero.x / 50, 10);
Copy the code

You start with xIndex = 1 and yIndex = 0

Initially satisfied! hero.nextPosition

if (! hero.nextPosition || ((hero.x >= hero.nextPosition.x - 5 && hero.x <= hero.nextPosition.x) && (hero.y >= hero.nextPosition.y - 5 && hero.y <= hero.nextPosition.y)) )Copy the code

After entering, contentment goes down

If (MapData[xIndex][yIndex+1] &&! this.hadWalk[xIndex+"_"+(yIndex+1)]){ this.dir = "down"; yIndex += 1; }Copy the code

So xIndex is 1, yIndex is 1 and then,

NextPosition = {y: xIndex * 50 + 5, x: yIndex * 50 + 5}; else {hero.nextPosition = {y: xIndex * 50 + 5}; HadWalk [xIndex + "_" + yIndex] = true; hadWalk[xIndex + "_" + yIndex] = true; }Copy the code

hero.nextPosition = { x:55,y:55 }

And then,

// Move switch(hero.dir){case "down": hero.y += hero.speed; // Move switch(hero.dir){case "down": hero.y += hero.speed; break; case "up": hero.y -= hero.speed; break; case "left": hero.x -= hero.speed; break; case "right": hero.x += hero.speed; break; default: break; }Copy the code

At this point,

Hero = {speed: 2, // pixels per second x: 2, y: 55,Copy the code

Loop back: then the condition is not met in hero.x:

if (! hero.nextPosition || ((hero.x >= hero.nextPosition.x - 5 && hero.x <= hero.nextPosition.x) && (hero.y >= hero.nextPosition.y - 5 && hero.y <= hero.nextPosition.y)) )Copy the code

25 times (50/2), skip the code in the above condition and execute the following code directly:

// Move switch(hero.dir){case "down": hero.y += hero.speed; // Move switch(hero.dir){case "down": hero.y += hero.speed; break; case "up": hero.y -= hero.speed; break; case "left": hero.x -= hero.speed; break; case "right": hero.x += hero.speed; break; default: break; }Copy the code

When hero.x meets the condition again:

if (! hero.nextPosition || ((hero.x >= hero.nextPosition.x - 5 && hero.x <= hero.nextPosition.x) && (hero.y >= hero.nextPosition.y - 5 && hero.y <= hero.nextPosition.y)) )Copy the code

“, repeat the previous logic. And so on. such that

Project source code:

Program source code