WeChatGame-----------实现圆球穿越三重门小游戏

最新推荐文章于 2024-04-23 09:55:25 发布
最新推荐文章于 2024-04-23 09:55:25 发布
阅读量878 收藏 1
点赞数
分类专栏： IT 文章标签： cocos WecharGame
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41564576/article/details/79460405
版权

    WechatGame是一种以微信的小程序打开的游戏，类似与跳一跳一样，从小程序进入，由小程序支持游戏的进行。

    小程序的发布官方文档：https://mp.weixin.qq.com/debug/wxadoc/dev/quickstart/basic/getting-started.html。

    游戏的编程一般我们是使用Cocos、Egret、Laya等游戏引擎来实现，小程序中的游戏也不例外，Cocos、Egret、Laya等游戏引擎开发团队已经完成了自身引擎及其工具对小游戏的适配和支持。也就是说我们可以用游戏引擎进行编写游戏代码，在利用引擎去生成微信小程序。

    穿越三重门是一种简单的小游戏，玩家点击画面，实现圆球的发射，圆球避过三重滑动的门即可得分，是一种非常简单的小游戏，适合用来熟悉Cocos。

    下面是画面实现效果：

    

    

     

      

    首先是游戏入口场景 

        statr  Scene 

       


首先 建立一个用来记录得分的js文件

module.exports = {
    score: 0,//分数
};
        Start .js 
// Learn cc.Class:
//  - [Chinese] http://www.cocos.com/docs/creator/scripting/class.html
//  - [English] http://www.cocos2d-x.org/docs/editors_and_tools/creator-chapters/scripting/class/index.html
// Learn Attribute:
//  - [Chinese] http://www.cocos.com/docs/creator/scripting/reference/attributes.html
//  - [English] http://www.cocos2d-x.org/docs/editors_and_tools/creator-chapters/scripting/reference/attributes/index.html
// Learn life-cycle callbacks:
//  - [Chinese] http://www.cocos.com/docs/creator/scripting/life-cycle-callbacks.html
//  - [English] http://www.cocos2d-x.org/docs/editors_and_tools/creator-chapters/scripting/life-cycle-callbacks/index.html

cc.Class({
    extends: cc.Component,

    properties: {
        //游戏名节点
            gameName: {
                default :null,
                type:cc.Node
            },
        //背景节点    
            bg:{
                default:null,
                type:cc.Node
            },
        //开始按钮节点    
             startBtn:{
                default:null,
                type:cc.Node      
             }  , 

        //按钮点击音效
         btnEffect: cc.AudioClip,
    },

//开始游戏按钮点击事件 
startGame: function () {
   cc.audioEngine.playEffect(this.btnEffect)   //点击音效
   cc.director.loadScene("game"); //转换场景
},

onLoad: function () {
    // 设置组件位置
    this.bg.width = cc.winSize.width;
    this.bg.height = cc.winSize.height;
    this.bg.setPosition(this.bg.width/2,this.bg.height/2);
    this.gameName.setPosition(cc.winSize.width/2,(cc.winSize.height/2)+100);
    this.startBtn.setPosition(this.gameName.getPositionX(),this.gameName.getPositionY()-400);

    cc.director.preloadScene("game"); //预加载游戏场景
    // 设置文字循环缩放
    var action = cc.repeatForever(cc.sequence(cc.scaleTo(1, 1.2),cc.scaleTo(1,1))); 
    this.gameName.runAction(action);
},

    start () {

    },

    // update (dt) {},
});

  游戏结束场景 overScene

   

Over.js

var Global=require("Global"); 

cc.Class({
    extends: cc.Component,
    properties: {    

     scoreLabel:{
            default:null,
            type:cc.Label
     },
       //over text节点
       OverText:{
        default :null,
        type:cc.Node
    },
    OverNode:{
        default:null,
        type:cc.Node,
    },
    //背景节点    
        bg:{
            default:null,
            type:cc.Node
        },
    //按钮节点    
        OverBtn:{
            default:null,
            type:cc.Node      
        }, 

        overEffect:cc.AudioClip,
        btnEffect:cc.AudioClip,
    
        
    },

    // LIFE-CYCLE CALLBACKS:

    onLoad :function() {
          // 组件位置
          this.bg.width = cc.winSize.width;
          this.bg.height = cc.winSize.height;
          this.bg.setPosition(this.bg.width/2,this.bg.height/2);
          this.OverText.setPosition(cc.winSize.width/2,cc.winSize.height/2);
          this.OverNode.setPosition(cc.winSize.width/2,(cc.winSize.height/2)+250);
          this.OverBtn.setPosition(cc.winSize.width/2,(cc.winSize.height/2)-250);
        
        //文字缩放
        var action = cc.repeatForever(cc.sequence(cc.scaleTo(1, 1.2),cc.scaleTo(1,1)));      
        this.OverText.runAction(action);   
        // 音效
        cc.audioEngine.playEffect(this.overEffect);
        // 分数
       this.scoreLabel.string="最终分数："+Global.score;      
    },

    //按钮点击事件
    OverGame:function(){
        Global.score=0;
        cc.audioEngine.playEffect(this.btnEffect);
        cc.director.loadScene("start"); //转换场景
    },
});

在编写game的gameScene之前 需要生成一个Prefab资源来存储发射的圆球，在这里使用Mask对Sprite进行遮盖来形成圆点




效果图：


game.js

var Glod=require("Global");
cc.Class({
    extends: cc.Component,

    properties: {
        radio:{
            default:null,
            type:cc.Prefab
        },
        radios:{
            default:null,
            type:cc.Node 
        },
        blackBg:{
            default:null,
            type:cc.Prefab
        },
        bg:{
            default:null,
            type:cc.Node 
        },
        oneLeft:{
            default:null,
            type:cc.Node  
        },
        oneRight:{
            default:null,
            type:cc.Node  
        },
        twoLeft:{
            default:null,
            type:cc.Node, 
        },
        twoRight:{
            default:null,
            type:cc.Node  
        },
        thirdLeft:{
            default:null,
            type:cc.Node  
        },
        thirdRight:{
            default:null,
            type:cc.Node  
        },
        sroceNum:{
            default:null,
            type:cc.Node
        },
        sroceLabel:{
            default:null,
            type:cc.Label
        },
        isnew:false,
        is:false,
        bgMusic:cc.AudioClip,
        clickEffect:cc.AudioClip
    },
    onDestroy: function(){
        // 停止背景音乐
        cc.audioEngine.stopMusic(this.bgMusic);
    },
     onLoad :function() {
        cc.audioEngine.playMusic(this.bgMusic,true); //背景音乐
        //组件位置
        this.bg.width = cc.winSize.width;
        this.bg.height = cc.winSize.height;
        this.bg.setPosition( -cc.winSize.width/2,-cc.winSize.height/2);

        this.radios.width = 90;
        this.radios.height = 300;
        this.radios.setPosition(0,-cc.winSize.height/2);

        this.sroceNum.width = 40;
        this.sroceNum.height = 300;
        this.sroceNum.setPosition(-cc.winSize.width/2+100,-cc.winSize.height/2+100);

        //设置圆球
        for(var i=0;i<3;i++){
            var  ra = cc.instantiate(this.radio);
            ra.width =this.radios.width-10;
            ra.height = (this.radios.height-30)/3;
            ra.setPosition(0,i*100+50);
            this.radios.addChild(ra);
        };

        //门的动画设置
        var layouts=[
            [this.oneLeft,this.oneRight],
            [this.twoLeft,this.twoRight],
            [this.thirdLeft,this.thirdRight],
        ];
        var speed=2.5;
        var width=-100;
        for(var num=0;num<layouts.length;num++){
            for(var i=0;i<2;i++){
                layouts[num][i].width =cc.winSize.width/2+100;
                layouts[num][i].height = 40;
                layouts[num][i].setPosition(0,width);
                if(i==0){
                    layouts[num][i].runAction(cc.repeatForever(cc.sequence(cc.moveBy(-num+speed, -400, 0),cc.moveBy(-num+speed, 400, 0))));
                };
                if(i==1){
                    layouts[num][i].runAction(cc.repeatForever(cc.sequence(cc.moveBy(-num+speed, 400, 0),cc.moveBy(-num+speed, -400, 0))));
                };
            } 
            width+=200;
        };

     },
     //点击发射圆球
     send:function(){
        var newRadio=cc.instantiate(this.radio); //生成一个新的节点
        newRadio.getComponent("Radio").isnew = true;
        newRadio.getComponent("Radio").game = this;
        newRadio.width =this.radios.width-10;
        newRadio.height = (this.radios.height-30)/3;
        newRadio.setPosition(0,this.radios.getPositionY()+230);
        var action=cc.moveTo(1,0, cc.winSize.height/2+100);
        newRadio.runAction(action); 
        cc.audioEngine.playEffect(this.clickEffect);
        this.node.addChild(newRadio);
      },

     update :function(dt) {
        if(this.is){
            this.node.stopAllActions();
            cc.director.loadScene('over'); 
        }
        this.sroceLabel.string=Glod.score;
     },
});

    圆点的js文件：

  // Learn cc.Class:
//  - [Chinese] http://www.cocos.com/docs/creator/scripting/class.html
//  - [English] http://www.cocos2d-x.org/docs/editors_and_tools/creator-chapters/scripting/class/index.html
// Learn Attribute:
//  - [Chinese] http://www.cocos.com/docs/creator/scripting/reference/attributes.html
//  - [English] http://www.cocos2d-x.org/docs/editors_and_tools/creator-chapters/scripting/reference/attributes/index.html
// Learn life-cycle callbacks:
//  - [Chinese] http://www.cocos.com/docs/creator/scripting/life-cycle-callbacks.html
//  - [English] http://www.cocos2d-x.org/docs/editors_and_tools/creator-chapters/scripting/life-cycle-callbacks/index.html
var Glod=require("Global");
cc.Class({
    extends: cc.Component,

    properties: {
        isnew:false,
        posdisplay:65,  //圆球与门的距离大小设置
    },

    //判断圆点是否触碰到门
    getOne:function(){
        var Left = this.game.oneLeft.getPosition();
        var Right = this.game.oneRight.getPosition();
        // 根据两点位置计算两点之间距离
        var dist = cc.pDistance(this.node.position, Left);
        var dist2 = cc.pDistance(this.node.position, Right);
        if (dist<=this.posdisplay&&dist2<=this.posdisplay) {
           this.game.is=true;
           return true;
        }else{
            this.game.is=false;
            return false;
        }
    },

    getTwo:function(){
        var Left = this.game.twoLeft.getPosition();
        var Right = this.game.twoRight.getPosition();
        // 根据两点位置计算两点之间距离
        var dist = cc.pDistance(this.node.position, Left);
        var dist2 = cc.pDistance(this.node.position, Right);
        if (dist<=this.posdisplay&&dist2<=this.posdisplay) {
           this.game.is=true;
           return true;
        }else{
            this.game.is=false;
            return false;
        }
    },

    getThird:function(){
        var Left = this.game.thirdLeft.getPosition();
        var Right = this.game.thirdRight.getPosition();
        // 根据两点位置计算两点之间距离
        var dist = cc.pDistance(this.node.position, Left);
        var dist2 = cc.pDistance(this.node.position, Right);
        if (dist<=this.posdisplay&&dist2<=this.posdisplay) {
           this.game.is=true;
           return true;
        }else{
            this.game.is=false;
            return false;
        }
    },

    onPicked:function(){
        //销毁当前节点
        Glod.score++;
        this.node.destroy();
    },

    update:function(dt){
        if(this.isnew){
            if(!this.getOne()){
                if(!this.getTwo()){
                    this.getThird();
                }
            };
            
         // if(this.node.getPositionY()>this.game.thirdLeft.getPositionY()){
               
                if(this.node.getPositionY()>=cc.winSize.height/2){
                    this.onPicked();
                }
          
        };
    },
 
});

最后点击Cocos的项目--->构建发布  选择WeChatGame   利用Cocos本身的构建生成WeChatGame 


   完成之后点击发布路径后面的打开即可找到 构建完成的WeChatGame文件

   然后再打开微信Web开发者工具  新建项目 在项目目录选择刚才点击打开之后的路径 选择该路径 

   AppID选择小游戏

    

最后即可在微信Web开发者工具预览 。

泷燇
关注
专栏目录
微信小游戏排行榜
爱上游戏开发
11-23 6284
一。调用默认排行榜 首先我们需要了解： 1。白鹭开发文档（开放数据域）：http://developer.egret.com/cn/github/egret-docs/Engine2D/minigame/openDataContext/index.html 2.微信小游戏开发文档（关系链数据）：https://developers.weixin.qq.com/minigame/dev/tutori...
RNN入门详解及TensorFlow源码实现--深度学习笔记
知行_那片天
05-03 1万+
RNN入门详解及TensorFlow源码实现–深度学习笔记一、RNN简介RNNs的目的使用来处理序列数据。在传统的神经网络模型中，是从输入层到隐含层再到输出层，层与层之间是全连接的，每层之间的节点是无连接的。但是这种普通的神经网络对于很多问题却无能无力。例如，你要预测句子的下一个单词是什么，一般需要用到前面的单词，因为一个句子中前后单词并不是独立的。RNNs之所以称为循环神经网路，即一个序列当前的输
探索Awesome WeChat Game：微信小游戏的宝藏库
gitblog_00041的博客
04-02 722
探索Awesome WeChat Game：微信小游戏的宝藏库 去发现同类优质开源项目:https://gitcode.com/ 是一个精心整理的开源项目，专注于收集和分享微信小游戏的开发资源、教程和最佳实践。如果你是开发者或对微信小游戏感兴趣，这是一个不容错过的平台，它将引导你深入这个充满活力的领域。 项目简介 该项目由开发者 zhenyong 维护，旨在为社区提供一个全面的微信小游戏开发指南。...
Egret01-WeChatGame开发指南
芒种的农民
11-04 540
Egret-01WeChatGame开发指南Egret微信小游戏开发开发环境准备创建并运行小游戏祝大家HelloWord愉快！ Egret微信小游戏开发 需要下载Egret、微信开发者工具等软件，具体参考下文： 开发环境准备 安装Egret Launcher； 打开Egret Launcher，在“工具”界面继续安装主要的开发工具Egret Wing； 准备最新版微信开发者工具； 创建并运行小...
探索创新：微信小游戏开发框架 - WeChatGame
最新发布
gitblog_00096的博客
04-23 621
探索创新：微信小游戏开发框架 - WeChatGame 去发现同类优质开源项目:https://gitcode.com/ 项目简介 是一个基于JavaScript和Web技术构建微信小游戏的开源框架。该项目旨在简化微信小游戏的开发流程，为开发者提供一种更高效、灵活的方式来创建互动丰富的游戏体验。通过利用Web技术的优势，它让开发者能够在多个平台上运行他们的作品，包括但不限于微信小游戏平台。 技术分...
初探微信小游戏(二)
jhkj_5154的博客
05-14 685
游戏的过程一定是面向对象的，简单过渡一下ES6-_-||其实自己ES6也很水首先和ES无关的  H5中 script标签不需要加type的1.严格模式ES5我们如果不使用严格模式会有很多错误的写法，这些写法造成一些潜在的错误，包括我们规范上的一些不合适的地方(function(){    'use strict';})();use strict 可以让我们的代码更加的严格，这也是我们前端同学在写前...
TD-SCDMA商用直面“三重门”
03-04
标题中的"TD-SCDMA商用直面“三重门”"指的是TD-SCDMA技术在商业化进程中面临的三大挑战。TD-SCDMA是中国自主开发的3G通信标准，它在技术特性上具有一定的优势，比如利用现有2G网络资源的能力。然而，实际商用过程中...
宏观经济展望：，布局新“水”-0110-光大证券-24页.pdf
07-25
报告中提出了“三重门”理论，揭示了旧模式面临的挑战。首先，金融风险的加剧，新购房家庭的投资需求增加，住房空置率接近欧债危机时期的西班牙和意大利，这可能导致金融稳定性的风险。其次，经常项目恶化，减产限产...
2023经导管三尖瓣介入治疗行业报告：三尖瓣不再被遗忘，中国创新闪耀全球-蛋壳研究院.pdf
07-24
报告采用了“三重门”分析模型，详细探讨了介入治疗相对于外科手术的优势，以及介入修复和介入置换的个性化路径。随着2021年ESC/EACTS指南对三尖瓣介入治疗的推荐，这一领域得到了更广泛的认可。报告还分析了各种...
2院-医疗器械行业赛道估值报告系列之TMV（经导管二尖瓣器械）：突围二尖瓣，百亿美金，十八般兵器与三重门.pdf
01-16
TMV技术路径的判断是行业发展的关键，报告提出“三重门”框架来帮助理解这一研判过程： 1. 外科VS介入：外科手术仍然是标准治疗方式，但TMV技术以其微创优势有望打开远超外科手术的增量市场。 2. 修复VS置换：TMVr...
微信小游戏 飞翔的小柴子WeChat-MiniGame-master.zip
09-25
微信小游戏 飞翔的小柴子WeChat-MiniGame-master.zip
年会抽奖程序，3D 球体抽奖，支持奖品信息配置（源码）
08-28
1、可将抽奖结果进行保存实时下载到 excel 中；2、已抽取人员不在参与抽取，抽中的人员不在现场可以重新抽取；3、刷新或者关掉服务器，会保存当前已抽取的数据，不会进行数据重置，只有点击界面上的重置按钮，才能重置抽奖数据； 4、每次抽取的奖品数目可配置；5、抽取完所有奖品后还可以继续抽取特别奖(例如：现在抽取红包，追加的奖品等)，此时默认一次抽取一个。
Unity 开发微信小游戏初探
02-28 3651
最近因项目需要开始研究Unity开发微信小游戏相关的知识。期间遇到各种坑，网上查阅的资料基本类似，无法解决自己遇到的问题。特用本文记录下过程，方便其他人遇到同样的问题时能够参考。
微信小游戏 内部引用路径问题
gzyzwx的博客
06-11 1372
目录结构 根目录 game.js js文件夹 --- main.js ----其他js audio image game,js中引入main.js 中的类 并 new 一个实例main.js中的引用文件路径 应该以根目录即game.js相对 查找 如main.js 中 //创建背景音乐 createBackgroundMusic() { const bgm ...
评估图像质量评价算法性能的几个常用的标准
热门推荐
caoleiwe的博客
10-11 4万+
图像质量评价性能标准 SROCC KROCC PLCC rMSE
CocosCreator如何制作微信小游戏
qq_16224121的博客
01-29 2万+
CocosCreator在1.8版本开始，就支持一键发布微信小程序，下面是详细的发布步骤： 1、在微信公众平台下载微信开发者工具; 地址：https://mp.weixin.qq.com/debug/wxagame/dev/devtools/download.html?t=2018115，根据需要选择相应的版本。 2、打开cocoscreator，选择Cocos Creato
小程序圆球导航
CHC
08-16 758
wxml &lt;!-- 导航 --&gt; &lt;view class='navBox'&gt; &lt;view class='navBtn' wx:for="{{navBtn}}" wx:key="{{index}}"&gt; &lt;image class='navImg' src='' style='background:{{item.bgc}}'&gt;...
小程序画圆
just_a_dream_的博客
03-17 7719
建立两个canvas标签，先绘制底层的浅灰色圆圈背景，再绘制上层的红色进度条。.wxml的代码如下：123456789&lt;view class="wrap"&gt;  &lt;view class="circle-box"&gt;    &lt;canvas class="circle" style="width:200px; height:200px;" canvas-id=&quo
微信小游戏开发之Cocos Creator使用微信云开发和微信开放能力
kingoneyun的专栏
01-17 1631
Cocos Creator集成微信云开发和调用微信开放能力
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值