코 코스 크 리 에이 터 사격 게임 만 들 기

장면 배치
게임 자원



포탑 이 돌다
기 제 는 이전 손잡이 인 스 턴 스 의 소형 차 와 마찬가지 로 touch move 로 터치 사건 을 감청 합 니 다.
터치 위치 획득4.567917.위 치 를 통 해 signAngle 방법 으로 이 위치 와 cc.v2(1,0)위치의 각도 차 이 를 구 합 니 다(마이너스 번 호 를 추가 하고 얻 은 시계 반대 방향 은 마이너스 이 며,할당 angle 역 지침 은 플러스 입 니 다)4.567917.원 하 는 각 도 는 최종 각도 이다

 onLoad(){
        //    90 
        this.node.angle=90;
        this.node.on('touchstart',this.onTouchStart,this);
        this.node.on('touchmove',this.onTouchMove,this);
        this.node.on('touchend',this.onTouchEnd,this);
        this.node.on('touchconcel',this.onTouchConcel,this);
    }
   
    onTouchStart(e:cc.Event.EventTouch){
        //       
        this.starPos=this.node.parent.convertToNodeSpace(e.getLocation());
        //         
        this.starAngle=this.node.angle;

    }
    onTouchEnd(e:cc.Event.EventTouch){

    }
    onTouchMove(e:cc.Event.EventTouch){
        //         
        let pos:cc.Vec2=this.node.parent.convertToNodeSpace(e.getLocation());

        //    
        //angle          
        let sweep_radian=pos.signAngle(this.starPos);//pos   starPose   p  s     
        let sweep_angle=sweep_radian*180/Math.PI;//       
        
        //             
        let angle=this.starAngle-sweep_angle;
      
        //      45~135  
        if(angle<45)angle=45;
        if(angle>135)angle=135;

        cc.log("    ："+sweep_angle+"      ："+angle);
        this.node.angle=angle;
    }

동적 생 성 탄알

노드 cc.노드 를 생 성하 고 구성 요소 addComponent(cc.Sprite)를 추가 합 니 다

구성 요소 의 속성 할당,그림 의 spriteFrame 할당

구성 요 소 를 부모 노드 에 마 운 트 합 니 다

설정 위치,각도 등

운동 을 제어 하면 새 스 크 립 트 를 가 져 올 수 있 고 이 스 크 립 트 를 동적 생 성 노드 의 구성 요소 에 추가 할 수 있 습 니 다

 onTouchEnd(e:cc.Event.EventTouch){
        this.fire();
    }
    onTouchConcel(e:cc.Event.EventTouch){

    }

    fire(){

        if(this.bulleteicon==null)return;
        let bullet:cc.Node=new cc.Node();
        let sprite:cc.Sprite=bullet.addComponent(cc.Sprite);
        sprite.spriteFrame=this.bulleteicon;
        

        //          
        bullet.parent=this.node.parent;

        //         
        let ration=this.node.angle*Math.PI/180;
        let direction=cc.v2(Math.cos(ration),Math.sin(ration));
        bullet.angle=this.node.angle;
        let r=100;
        bullet.setPosition(cc.v3(r*direction.x,r*direction.y,0));
       
        //      
         let script=bullet.addComponent(Buletet);
         script.explodeImg=this.explodeImg;
         script.direction=direction;

    }

 start () {
         this.schedule(this.onTimer,0.01);
    }

    onTimer(){
        if(this.node.y>300){
            this.unschedule(this.onTimer);
            this.explode();
           
            return;
        }
        let dx=this.direction.x*5;
        let dy=this.direction.y*5;
        this.node.y+=dy;
        this.node.x+=dx;
    }

    explode(){

        let sp:cc.Sprite=this.getComponent(cc.Sprite);
        sp.spriteFrame=this.explodeImg;
      
        //     
        this.node.scale=0.1;
        //          
        let self=this;
        cc.tween(this.node)
            .to(0.5,{scale:1,opacity:0})
            .call(function(){
                self.afterExplode();
            })
            .start();

            
    }

    afterExplode(){
        this.node.destroy();
    }

이번 버그:
가 져 온 클래스 이름과 파일 이름 이 다 릅 니 다.이름 을 바 꾸 면 코드 의 클래스 이름 이 자동 으로 수정 되 지 않 습 니 다.두 번 수정 해 야 합 니 다

setposition()방법 을 사용 할 때 매개 변 수 는 cc.v3 의 구조 함수 에 쓰 여 있 으 므 로 매개 변수의 위치 에 주의해 야 합 니 다

충돌 계산

총알 과 표적 의 상대 적 인 위 치 를 계산 하고 범위 보다 작 으 면 명중 표적 으로 판단 하여 명중 한 조작 을 집행 한다.그렇지 않 으 면 명중 하지 않 은 것 으로 판단 하고 명중 하지 않 은 조작 을 집행 한다.
스 크 립 트 는 대상 노드 에 전송 하여 target 속성 을 증가 시 켜 야 합 니 다.

   @property(cc.SpriteFrame)
    explodeImg: cc.SpriteFrame = null;
    
    direction: cc.Vec2 = null;

    target: cc.Node = null;
    onLoad() {

    }

    start() {
        this.schedule(this.onTimer, 0.01);
    }

    onTimer() {
        if (this.node.y > 350) {
            if (this.isHit()) {
                //      
                this.explode();
                console.log("   ");
            }
            else {
                console.log("  ");
                this.disMiss();
            }
            this.unschedule(this.onTimer);
            return;
        }
        let dx = this.direction.x * 5;
        let dy = this.direction.y * 5;
        this.node.y += dy;
        this.node.x += dx;
    }

    //      
    isHit(): boolean {
        let targetPos: cc.Vec2 = this.geWorldLocation(this.target);
        let selfPos: cc.Vec2 = this.geWorldLocation(this.node);
        let distance = Math.abs(targetPos.x - selfPos.x);
        console.log("  x=" + targetPos.x + " ,   x=" + selfPos.x);

        if (distance < 50) {
            return true;

        }
        else {
            return false;
        }

    }
    explode() {

        let sp: cc.Sprite = this.getComponent(cc.Sprite);
        sp.spriteFrame = this.explodeImg;

        //     
        this.node.scale = 0.1;
        //          
        let self = this;
        cc.tween(this.node)
            .to(0.5, { scale: 1, opacity: 0 })
            .call(function () {
                self.disMiss();
            })
            .start();


    }

    geWorldLocation(node: cc.Node): cc.Vec2 {
        let pos = node.getPosition();
        //     node.parent。                
        return node.parent.convertToWorldSpaceAR(pos);

    }

    disMiss() {
        this.node.destroy();
    }

이번 버그:
세계 좌 표를 가 져 올 때 아버지 노드 의 좌표 계 를 호출 하지 않 고 현재 노드 의 좌표 계 를 사 용 했 기 때문에 돌아 온 것 은 자신의 현재 좌표계 의 값 이다.세계 좌 표를 바 꾸 는 방법 을 기억 하 십시오.호출 자 는 현재 노드 의 좌표계 입 니 다.보통 부모 노드 return node.parent.convertToWorld SpaceAR(pos)입 니 다.(pos)앵 커 포인트
효과 증가

과녁 의 노드 에 스 크 립 트 를 추가 하여 이동 을 제어 하고 좌우 로 이동 합 니 다.
동시에 총알 이 명중 하면 문자 알림 효과 가 증가 합 니 다.
텍스트 알림:

 cheer() {
        //       
        let node: cc.Node = new cc.Node();
        node.parent = this.node.parent;//     ，      
        let label: cc.Label = node.addComponent(cc.Label);
        label.string = "+10 ";

        //    、    
        node.setPosition(cc.v3(0, 250, 0));
        node.opacity = 200;
        node.color = new cc.Color(255, 0, 0);

        //  
        cc.tween(node)
            .to(0.5, { scale: 1.5 })
            .to(0.2, { opacity: 0 })
            .call(function () {
                node.destroy();
            })
            .start();

    }

표적 이동

 update (dt) {
         let speed=3;
         if(this.isLeft){
             speed=-speed;
         }
         this.node.x+=speed;
         if(this.isLeft&&this.node.x<-350){
             this.isLeft=false;
         }
         if(!this.isLeft&&this.node.x>350){
            this.isLeft=true;
        }
    }

탄약 고 표시 증가

탄약 고 노드 를 증가 하고 총알 그림 을 대량으로 생 성 합 니 다(widget 구성 요소 로 위 치 를 설정 할 수 있 습 니 다)

4.567917.총알 감소 방법 을 증가 하고 총알 사진 의 active 속성 을 설정 하여 총알 을 감소 합 니 다4.567917.포탑 의 fire 방법 에서 총알 을 줄 이 는 방법 을 사용한다.
호출 방법 은 두 가지 가 있 습 니 다.하 나 는 포탑 스 크 립 트 에서 탄약 고 노드 를 가 져 오기 위해 호출 되 고 다른 하 나 는 공공 클래스 를 설정 하 는 것 입 니 다.(정적 변수)onLoad()방법 에서 이 노드 를 초기 화하 고 직접 호출 합 니 다.후 자 를 쓰다.

 @property(cc.SpriteFrame)
    bulleteIcon: cc.SpriteFrame = null;
    capacity: number = 10;
    stockNumber: number = 10;


    onLoad() {

        let space: number = this.node.width / this.capacity;
        for (let i = 0; i < this.capacity; i++) {
            //    
            let bulleteNode: cc.Node = new cc.Node();
            let bulleteSprite: cc.Sprite = bulleteNode.addComponent(cc.Sprite);
            bulleteSprite.spriteFrame = this.bulleteIcon;
            this.node.addChild(bulleteNode);

            //    
            bulleteNode.x += space * i + 10;
            bulleteNode.y = 0;

        }

    }

    start() {

    }

    consum(num: number) {
        this.stockNumber -= num;
        if (this.stockNumber < 0) {
            this.stockNumber = 0;
        }
        this.display();
    }

    display() {
        let nodes: cc.Node[] = this.node.children;
        console.log(nodes.length);
        for(let i=0;i<nodes.length;i++){
            if(i>=this.stockNumber){
                nodes[i].active=false;
            }
           
        }
    }

공통 공통 클래스

  //   ，    ，         、    Common  
    static ammo:Ammo=null;

    onLoad() {
        Common.ammo=cc.find('Canvas/  ').getComponent('Ammo');
        console.log(Common.ammo);
    }

여기 버그:
cc.find()방법 에 서 는 나눗셈 의 슬 래 쉬 를 사용 하 는 것 을 기억 합 니 다.
총알 소 진 제시 점수

마스크 층 을 만 들 고 스 크 립 트 류 를 Common 클래스 에 가 져 옵 니 다.active 속성 을 false 로 설정 합 니 다

ResultDialog 스 크 립 트 에 show 방법 을 추가 하여 active 속성 을 true 로 바 꾸 고 점 수 를 화면 에 표시 합 니 다

Bullete(총알 운동 스 크 립 트 제어)에서 총알 의 수량 이<=0 인지 판단 하고 Common 에서 show 방법 으로 점수 알림 상 자 를 표시 합 니 다

ResultDialog 스 크 립 트(제어 점수 알림 상자)

 onLoad () {
         let replay:cc.Node=cc.find('Canvas/     /    ');
         console.log(replay);
         replay.on('touchstart',this.dismiss,this);

         this.node.on('touchstart',this.onTouchdisable,this);
         this.node.on('touchmove',this.onTouchdisable,this);
         this.node.on('touchend',this.onTouchdisable,this);
   
     }

     //     
     show(){
        this.node.active=true;  
        let scoreNode : cc.Node = cc.find('   /  ', this.node);
        let scoreLabel : cc.Label = scoreNode.getComponent(cc.Label);   
        scoreLabel.string = Common.score + ' ';   
       
        
     }

     //     
     dismiss(){
         this.node.active=false;
     }

     //       
     onTouchdisable(e:cc.Event.EventTouch){
         e.stopPropagation();
     }
    start () {

    }

일반 스 크 립 트

 //   ，    ，         、    Common  
    static ammo:Ammo=null;
    static score : number = 0;
    static resultdialog : ResultDialog = null;
  

    onLoad() {
        Common.resultdialog=cc.find('Canvas/     ').getComponent('ResultDialog');
        Common.ammo=cc.find('Canvas/  ').getComponent('Ammo');
    }

Bullete 방법 중 점수 증가

  if (this.isHit()) {
                //      
                this.explode();
                //  +10 
                this.cheer();
                //   +10
                Common.score += 10;
                console.log("   ");
            }

게임 재 개

이 작은 게임 은 간단 합 니 다.리 셋 은 탄약 고 노드 만 리 셋 하면 되 기 때문에 reset 방법 은 Ammo 스 크 립 트 에 넣 습 니 다.
공공 클래스 에서 Ammo 대상 을 만 들 고 정적 방법 을 설정 하 며 득점 을 초기 화하 고 Ammo 를 호출 하 는 reset 방법 을 설정 합 니 다.
Ammo(탄약 고 클래스)스 크 립 트 추가

 reset(){
        this.stockNumber=this.capacity;
        this.display();
    }

Common 스 크 립 트 변경

 //   ，    ，         、    Common  
    static ammo:Ammo=null;
    static score : number = 0;
    static resultdialog : ResultDialog = null;
  

    onLoad() {
        Common.resultdialog=cc.find('Canvas/     ').getComponent('ResultDialog');
        Common.ammo=cc.find('Canvas/  ').getComponent('Ammo');
        console.log(Common.ammo);
    }
    static resetGame() {
        Common.score=0;
        Common.ammo.reset();
    }

디 테 일 추가

게임 소리 및 포탑 활성화 변화 증가
1.포탑 스 크 립 트 속성 증가

 //  
    @property(cc.AudioClip)
    audioFire: cc.AudioClip = null;
    @property(cc.AudioClip)
    audioExplode: cc.AudioClip = null;

    //    
    @property(cc.SpriteFrame)
    iconNormal: cc.SpriteFrame = null;
    @property(cc.SpriteFrame)
    iconActive: cc.SpriteFrame = null;

그림 전환

 onTouchStart(e: cc.Event.EventTouch) {      
	   //         
        this.node.getComponent(cc.Sprite).spriteFrame = this.iconActive;	

 onTouchEnd(e: cc.Event.EventTouch) {      
          //    
        this.node.getComponent(cc.Sprite).spriteFrame = this.iconNormal;
      }

음향 효과 재생

fire（）{        

       //              
        script.audioExplode = this.audioExplode;
 if (this.audioFire != null) {
            cc.audioEngine.play(this.audioFire, false, 1);
        }
    }

오디 오 재생 방법:=cc.audioEngine.play(this.audioFire,false,1);==두 번 째 매개 변 수 는 순환 재생 여부 이 고 세 번 째 매개 변 수 는 음량 크기 입 니 다.
총알 각본

//    
@property(cc.SpriteFrame)
explodeImg: cc.SpriteFrame = null;
               
if(this.audioExplode!=null){
	cc.audioEngine.play(this.audioExplode,false,1);
}

이상 은 코 코스 크 리 에이 터 가 사격 게임 을 만 드 는 상세 한 내용 입 니 다.코 코스 크 리 에이 터 사격 게임 에 관 한 자 료 는 저희 의 다른 관련 글 을 주목 해 주세요!