How to use CocosCreator to create a shooting game

How to use CocosCreator to create a shooting game

Analyze the production steps:

1. Prepare resources and build the scene

You can find resources online or use mine. Create a folder and put the resources in the res folder.

Build the scene:
Step 1: Create a single-color sprite (Script) bg background, set the color, and add a Widget component to make it fill the screen;

Step 2: Create top and button empty nodes as the top and bottom under the bg node, and then add thorny nodes to the two empty nodes (just drag the image to the top hierarchy manager). Now we need to add a Layout組件top與button nodes, and set the properties as shown in the figure. In this way, you can see that there are thorns on the top and bottom of the screen.

Step 3: Add the player, bullets, and enemy planes to the scene in the same way, create a Label node to display the score, and adjust the position;

2. Code controls the game

Step 1: Create a game script and mount it on dg node;

Step 2: Edit the code and add properties in properties to associate the player, bullet, and enemy nodes, and then associate them in the editor;

Step 3: Code logic control, including initializing players, bullets, enemies; registering monitoring events; writing action functions; scoring judgment, etc.;

Full code:

cc.Class({
    extends: cc.Component,

    properties:
        playerNode: cc.Node,
        enemyNode: cc.Node,
        fireNode: cc.Node,
        scoreNode: cc.Label,
    },
    
     onLoad () {
        this.playLoad();
        this.fireLoad();
        this.enemyLoad();
         this.node.on("touchstart",this.fire,this);
         
     },

     update (dt) {
          if (Math.abs(this.fireNode.y-this.enemyNode.y)<(this.fireNode.height/3+this.enemyNode.height/3)
            &&Math.abs(this.fireNode.x-this.enemyNode.x)<(this.fireNode.width/3+this.enemyNode.width/3)){
              console.log("Defeat the enemy aircraft");
              this.scoreNode.string= ++this.score; //hit score this.fireNode.stopAction(this.fireAction);
            this.enemyNode.stopAction(this.enemyAction);
            this.enemyNode.active=false;
            this.fireNode.active=false;
            this.fireLoad();//Initialize bullets this.enemyLoad();//Initialize enemy aircraft}

     },

     // Close event listening onDestroy(){
        this.node.off("touchstart",this.fire,this);
     },
    // Initial player playLoad(){
        this.score=0;
        this.playerNode.y=-cc.winSize.height/4;
        
    },
    //Initialize bullet fireLoad(){
        this.fireNode.active=true;
        this.isFire=false;
        this.fireNode.x=this.playerNode.x;
        this.fireNode.y=this.playerNode.y+this.playerNode.height;
    },
    // Initialize the enemy enemyLoad(){
        this.enemyNode.active=true;
        this.enemyNode.x=Math.random()* cc.winSize.width;
        this.enemyNode.y=cc.winSize.height/3;
        let x = cc.winSize.width/2-this.enemyNode.width/2;
        let y=Math.random()* cc.winSize.height/4;
        let seq=cc.repeatForever(cc.sequence(cc.moveTo(1.5,cc.v2(-x,y)),cc.moveTo(1.5,cc.v2(x,y))));
        
        this.enemyAction = this.enemyNode.runAction (seq);
    },
    // Reload the game on death dear(){
        console.log("death");
        cc.director.loadScene("game_scenes");
    },


    // Fire bullet fire(){
         if(this.isFire) return;
         this.isFire=true;
        console.log("Start launching");
         var fireaction = cc.sequence(
             cc.moveTo(1,cc.v2(this.playerNode.x,cc.winSize.height/2)),
             cc.callFunc(()=>{
                this.dear();
            }));
        this.fireAction = this.fireNode.runAction(fireaction);
        console.log("End of launch");
     }

});

Final result

The above is the details of how to use CocosCreator to realize shooting games. For more information about CocosCreator to realize shooting games, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:
  • Detailed explanation of cocoscreater prefab
  • How to use resident nodes for layer management in CocosCreator
  • How to use CocosCreator for sound processing in game development
  • CocosCreator ScrollView optimization series: frame loading
  • Detailed explanation of CocosCreator project structure mechanism
  • How to use CocosCreator object pool
  • How to display texture at the position of swipe in CocosCreator
  • Organize the common knowledge points of CocosCreator
  • Comprehensive explanation of CocosCreator hot update
  • CocosCreator classic entry project flappybird
  • CocosCreator Universal Framework Design Network
  • How to use a game controller in CocosCreator

<<:  Nginx try_files directive usage examples

>>:  How to avoid the trap of URL time zone in MySQL

Recommend

docker logs - view the implementation of docker container logs

You can view the container logs through the docke...

A brief discussion on MySQL event planning tasks

1. Check whether event is enabled show variables ...

Vue page monitoring user preview time function implementation code

A recent business involves such a requirement tha...

Discussion on the problem of iframe node initialization

Today I suddenly thought of reviewing the producti...

How to assign default values ​​to fields when querying MySQL

need When querying a field, you need to give the ...

SQL to implement time series dislocation restoration case

Table of contents 1. Requirements description 2. ...

Solving problems encountered when importing and exporting Mysql

background Since I converted all my tasks to Dock...

Reasons and solutions for MySQL selecting the wrong index

In MySQL, you can specify multiple indexes for a ...

How to solve the problem that mysql cannot be closed

Solution to mysql not closing: Right-click on the...

Detailed explanation of .bash_profile file in Linux system

Table of contents 1. Environment variable $PATH: ...

js to implement verification code interference (static)

This article shares the specific code of js to im...

A brief description of the relationship between k8s and Docker

Recently, the project uses kubernetes (hereinafte...