Egret学习-坦克大战开发(三)

实现玩家坦克的移动

基本流程

1.鼠标点击目标位置

2.坦克移动到指定位置,不能斜向移动,只能水平或垂直移动

3.可以简单寻路,如果中途遇到障碍,自动转向,

鼠标点击目标位置,将位置记录在坦克,在循环中移动到目标位置,同时判断是否遇到障碍,

给背景添加鼠标点击事件

1 let bg = this.createBitmapByName("bg_jpg");
2 this.addChild(bg);
3 bg.touchEnabled = true;
4 bg.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onBgTouch, this);

事件处理,在坦克中增加targetX, targetY记录下鼠标点击位置

 1     /* 响应背景的点击事件 */
 2     private onBgTouch(e) {
 3         let x = e.stageX;
 4         let y = e.stageY;
 5
 6         this.player1.targetX = parseInt(x);
 7         this.player1.targetY = parseInt(y) ;11     }

坦克增加移动方法

 1     public move() {
 2         if(this.x == this.targetX && this.y == this.targetY) {
 3             return;
 4         }
 5
 6         let xory = false;// true y, false x
 7         let nextx = this.x;
 8         let nexty = this.y;
 9
10         let osx = Math.abs(this.x - this.targetX);
11         let osy = Math.abs(this.y - this.targetY);
12
13         // 先移动距离小的
14         if(osx !=0 && osx < 18) {
15             console.log(‘先移动小的x‘);
16             if(this.x > this.targetX) {
17                 nextx = this.x - 1;
18                 this.turn(‘left‘)
19                 xory = false;
20             } else if(this.x < this.targetX) {
21                 nextx = this.x + 1;
22                 this.turn(‘right‘)
23                 xory = false;
24             }
25         } else if(osy !=0 && osy < 18) {
26             console.log(‘先移动小的y‘);
27             if(this.y > this.targetY) {
28                 nexty = this.y - 1;
29                 this.turn(‘up‘)
30                 xory = true;
31             } else if(this.y < this.targetY) {
32                 nexty = this.y + 1;
33                 this.turn(‘down‘)
34                 xory = true;
35             }
36         } else if(this.x > this.targetX) {
37             nextx = this.x - 1;
38             this.turn(‘left‘)
39             xory = false;
40         } else if(this.x < this.targetX) {
41             nextx = this.x + 1;
42             this.turn(‘right‘)
43             xory = false;
44         } else if(this.y > this.targetY) {
45             nexty = this.y - 1;
46             this.turn(‘up‘)
47             xory = true;
48         } else if(this.y < this.targetY) {
49             nexty = this.y + 1;
50             this.turn(‘down‘)
51             xory = true;
52         }
53
54         console.log(‘x,y --- targetX, targetY‘, this.x, this.y, this.targetX, this.targetY)
55
56         // 判断是否到边界
57         if(nextx < 18 || nextx > 640 - 18) {
58             console.log(‘到达边界‘);
59             this.targetX = nextx;
60         }
61
62         if(nexty < 18 || nexty > 640 - 18) {
63             console.log(‘到达边界‘);
64             this.targetY = nexty;
65         }
66
67         if(this.main.hitQian(nextx, nexty)) {
68             console.log(‘遇到墙‘);
69             if(xory) {
70                 this.targetY = this.y;
71             } else {
72                 this.targetX = this.x;
73             }
74         } else {
75             this.x = nextx;
76             this.y = nexty;
77         }
78     }

// 判断是否遇到砖块或石头

 1     /** 是否遇到墙 */
 2     public hitQian(x, y) {
 3         // 检查下一个点是否墙
 4         let hit = false;
 5         let startx = x - 18;
 6         let endx = x + 18;
 7         let starty = y - 18;
 8         let endy = y + 18;
 9         // 上面的线
10         for(let x = startx; x<endx; x++) {
11             let tile:tiled.TMXTile = this.layerZhuan.getTile(x, starty);
12             if(tile) {
13                 hit = true;
14                 break;
15             } else {
16                 tile = this.layerShitou.getTile(x, starty);
17                 if(tile) {
18                     hit = true;
19                     break;
20                 }
21             }
22
23         }
24         // 下面的线
25         for(let x = startx; x<endx; x++) {
26             let tile:tiled.TMXTile = this.layerZhuan.getTile(x, endy);
27             if(tile) {
28                 hit = true;
29                 break;
30             } else {
31                 tile = this.layerShitou.getTile(x, endy);
32                 if(tile) {
33                     hit = true;
34                     break;
35                 }
36             }
37         }
38         // 左面的线
39         for(let y = starty; y<endy; y++) {
40             let tile:tiled.TMXTile = this.layerZhuan.getTile(startx, y);
41             if(tile) {
42                 hit = true;
43                 break;
44             } else {
45                 tile = this.layerShitou.getTile(startx, y);
46                 if(tile) {
47                     hit = true;
48                     break;
49                 }
50             }
51         }
52         // 右面的线
53         for(let y = starty; y<endy; y++) {
54             let tile:tiled.TMXTile = this.layerZhuan.getTile(endx, y);
55             if(tile) {
56                 hit = true;
57                 break;
58             } else {
59                 tile = this.layerShitou.getTile(endx, y);
60                 if(tile) {
61                     hit = true;
62                     break;
63                 }
64             }
65         }
66
67         return hit;
68     }

原文地址:https://www.cnblogs.com/woaitech/p/12239135.html

时间: 2024-07-31 13:51:03

Egret学习-坦克大战开发(三)的相关文章

Egret学习-坦克大战开发

学习了几天Egret,基本的语法和用法了解的差不多了,现在开始写一个坦克大战练习下,实践是最好的学习方式 首先确定下开发内容,概要设计 1.加载一个TiledMap,作为游戏地图 2.坦克分为两个阵营,玩家和敌方 3.有砖块和石头作为障碍物,坦克不能穿过 4.通过鼠标控制玩家坦克移动,坦克移动到鼠标点击的位置,简单的寻路,先左右移,后上下移动,遇到障碍物则停止 5.鼠标点击坦克,坦克发射子弹, 1)子弹遇到敌方,敌方坦克消失,子弹消失, 2)子弹遇到砖块,砖块消失,子弹消失 3)子弹遇到石头,石

Egret学习-坦克大战开发(二)

现在开始写具体实现代码 1.加载TiledMap 1 /** 2 * 创建游戏场景 3 * Create a game scene 4 */ 5 private createGameScene() { 6 let sky = this.createBitmapByName("bg_jpg"); 7 this.addChild(sky); 8 9 /*加载地图*/ 10 /*初始化资源加载路径*/ 11 this.url = "resource/640bg.tmx";

Egret学习-坦克大战开发-总结

用了几天开发游戏,现在回头整理下知识 首先附上源码,下载地址 http://www.521100.net/forum.php?mod=viewthread&tid=26&extra=page%3D1 1.Egret 主循环,用于实现业务逻辑更新游戏进度 egret.lifecycle.addLifecycleListener((context) => { context.onUpdate = () => { if(!this.init) { return; } if(this.

Egret学习-坦克大战开发(五)

玩家的功能已经全部完成,开始完成敌方的AI 敌方坦克也可以随机做一下几个动作 1.移动,2.发射子弹,3.转向 为了看起来效果更好一点,移动应该最大比例,发射子弹和转向应该比较少 首先要有个随机方法 1 public randomNum(minNum:number,maxNum:number){ 2 switch(arguments.length){ 3 case 1: 4 return Math.random()*minNum+1; 5 case 2: 6 return Math.random

《Java小游戏实现》:坦克大战(续三)

<Java小游戏实现>:坦克大战(续三) 相关博文: <Java小游戏实现>:坦克大战http://blog.csdn.net/u010412719/article/details/51712663 <Java小游戏实现>:坦克大战(续一):http://blog.csdn.net/u010412719/article/details/51723570 <Java小游戏实现>:坦克大战(续二):http://blog.csdn.net/u010412719/

Java坦克大战(三)

关于这个坦克大战的项目是在学习Java基础的时候,拿来练习的最近看到这些代码,感觉很亲切,就把他们都复制下来,编辑成博客.回首看去,Java基础的学习确实应该建立在找项目练习上,这样才能将学到的基础知识用到实际当中,不然你知道什么是面向对象编程,什么是线程,什么是死锁,概念都了解了一大堆,等到实际应用的时候,还是力不从心.初学者千万不要灰心,真心是敲着敲着就有感觉了.下面还是循序渐进的介绍这个项目的几个版本,注释我写的很详细,新功能添加后部分代码有改动,如果感兴趣,可以看前几篇博客. 坦克大战(

unity3D学习—坦克大战(一)

背景介绍 本人一名C#程序员,从事C#开发已经有四年有余了,目前在一家大型公司上班.鉴于公司的业务需要,现在需要学习unity3D游戏开发,好在unity支持C#脚本开发,无形中省下了许多重新学习新语言的时间.好了,闲话不多说,开始正式学习之路. 本篇文章主要介绍unity的相关背景和下载安装等,使用的unity开发软件为当前最新5.3.5版本. 第一步,使用各大搜索引擎搜索关键字:unity 此处以百度搜索为例,红线框起来的是unity的官方网站,其网址为http://unity3d.com/

用javascript 面向对象制作坦克大战(三)

之前,我们完成了坦克的移动和地图的绘制,这次我们来完成碰撞检测和炮弹的发射. 上代码前来张最新的类图: 3. 碰撞检测 前面我们已经完成了坦克的移动和地图的绘制,下面我们开始写碰撞检测. 3.1    创建碰撞检测对象 我们创建一个对象来做碰撞检测,由于碰撞检测都是在对象移动的时候进行的所以我们让Mover继承我们的碰撞对象. HitTestObject.js:   这里我们把之前写的地图二维数组对象充分利用上了.通过对象x,y坐标取对应的地图对象,再根据属性判断是否可被穿过,是否已被占用. 3

Java坦克大战(一)

接下来的几篇博客,想记录一下通过学习坦克大战项目来循序渐进的学习Java基础.主要是为了巩固基础知识,当然学习编程重要的还是多敲,问题通常是在敲代码的过程中发现的,积累也是在敲代码中寻求的经验.这个坦克大战项目是利用Java图形界面来做的,比较简陋.但是,在不断的往里面加功能的时候,可以学到很多知识,最重要的还是体会Java的面向对象编程思想.下面介绍几个用的上的Demo,最后是坦克大战的1.0版本. Demo1:回顾事件处理机制 /* * 功能:事件处理机制(ActionListener的应用