简易仿跳一跳——微信小游戏

╰+哭是因爲堅強的太久メ 2021-11-29 07:14 276阅读 0赞

## 前言 ##

本简易版 跳一跳使用Cocos来完成编写。  
（使用js进行逻辑编写）

### 预览 ###

![在这里插入图片描述][20190721161059630.gif]

### 工程代码 ###

> 工程代码：[https://download.csdn.net/download/weixin\_43388844/11391153][https_download.csdn.net_download_weixin_43388844_11391153]

### 主要逻辑代码 ###

game\_scene.js:

cc.Class({
        extends: cc.Component,
    
        properties: {
            // 获取玩家对象 在canvas 里面找到 player 属性然后添加节点
             player:{
                type:cc.Node,
                default:null 
             },
             //获取块资源
             block_prefab:{
                 type:cc.Prefab,
                 default:[]
             },
             //获取节点
             block_root:{
                type:cc.Node,
                default:null    
             },
             //原点
             left_org:cc.v2(0,0),
             //获取滚动地图的节点
             map_root:{
                 type:cc.Node,
                 default:null
             },
             num:0,
             //设置斜率
             y_radio:0.580693816,
            //获取 check_out 节点
            checkout:{
                type:cc.Node,
                default:null
            },
            //获取 check_in 节点
            checkin:{
                type:cc.Node,
                default:null
            },
        },
    
        // LIFE-CYCLE CALLBACKS:
    
        // onLoad () {},
    
        start () {
            //定义第一个块 出现的 位置
            // 随机生成3个块中的一个
            this.cur_block = cc.instantiate(this.block_prefab[Math.floor(Math.random()*3)]);  //实例化一个块（地图块）
            //添加到block-root 去
            this.block_root.addChild(this.cur_block)
            this.num ++;
            //把世界坐标转化为原点坐标
            this.cur_block.setPosition(this.block_root.convertToNodeSpaceAR(this.left_org))
            //设置角色的位置
            var w_pos = this.cur_block.getChildByName("mid").convertToWorldSpaceAR(cc.v2(0,0));
            this.player.setPosition(this.block_root.convertToNodeSpaceAR(w_pos))
            
            //把第一个赋值给下一个
            this.next_block = this.cur_block;
    
            //层次关系初始值
            this.block_zorder = -1;
    
            //获取角色 player组件
            this.player_com = this.player.getComponent("player")
    
            //运行
            this.add_block();
        },
    
        //往地图里面添加块
        add_block(){  
           //初始化一个快 始终让下一个变成第一个
           this.cur_block = this.next_block;
           this.num ++;
    
           //创建第二个块     
           this.next_block = cc.instantiate(this.block_prefab[Math.floor(Math.random()*3)]);  //实例化一个块（地图块）
           //添加
           this.block_root.addChild(this.next_block)
    
           //添加块的层次关系
           this.next_block.zIndex = this.block_zorder
           this.block_zorder --;     
    
           //随机生成X的数值 (200-400)
           var x_distance = 200 + Math.random()*200;
           //更加X的值计数Y的值 设置斜率
           var y_distance = x_distance*this.y_radio;
           //获取 第一个块的坐标
           var next_pos = this.cur_block.getPosition();
    
           //设置X Y 的值 X的值根据方向来变化
           next_pos.x += (x_distance * this.player_com.direction)
           //next_pos.x +=x_distance  //next_pox.x = next_pos.x+x_distance
           next_pos.y +=y_distance
    
           //设置第二个块的坐标
           this.next_block.setPosition(next_pos);
     
           //添加player_com 让玩家知道你要跳向哪一个下一个地图块 (传过去的是 组件)
           this.player_com.set_next_block(this.next_block.getComponent("block")); 
        },
        //拉动相机 移动函数根据X Y 轴来移动
        move_map(offset_x,offset_y){
             
            //获取移动的距离 时间在0.5秒
            var m1 = cc.moveBy(0.5,offset_x,offset_y)     
            // this.map_root.runAction(m1)    
    
            //随机加载地图块
            var end_func = cc.callFunc(function(){
                this.add_block();
            }.bind(this))
            //队列
            var seq = cc.sequence([m1,end_func])
            //运行
            this.map_root.runAction(seq)
        },
        //结算游戏 
        on_checkout_game(){
            this.checkout.active = true;
        },
        //开始游戏的按钮
        on_checkin_game(){
            this.checkin.active = false;
        },
        //重新开始游戏
        on_game_again(){
            cc.director.loadScene("game_scene")
        },
        on_rank_open(){
            cc.director.loadScene("rank")
        }
        // update (dt) {},
    });

block.js:

cc.Class({
        extends: cc.Component,
    
        properties: {
        },
    
        // LIFE-CYCLE CALLBACKS:
    
        // onLoad () {},
    
        start () {
            //获取5个点
            this.mid = this.node.getChildByName("mid")
            this.up = this.node.getChildByName("up")
            this.down = this.node.getChildByName("down")
    
            this.left = this.node.getChildByName("left")
            this.right = this.node.getChildByName("right")
        },
        //判断是否在地图块的有效范围内 1向右 -1向左（地图块的世界坐标 方向）
        jump_on_block(w_dst_pos,direction){
            //获取块中的世界坐标
            var mid_pos = this.mid.convertToWorldSpaceAR(cc.v2(0,0))
            //获取最近的点  圆点的距离
            var dir = w_dst_pos.sub(mid_pos)
            //算最小距离的长度
            var min_len = dir.mag();
            var min_pos = mid_pos;
    
            //判断走的路线
            if(direction === 1){
                //获取上 下 的世界坐标
                var up_pos = this.up.convertToWorldSpaceAR(cc.v2(0,0))
                //获取上点的距离
                var dir = w_dst_pos.sub(up_pos)
                var len = dir.mag();
                //判断上点是不是最近的点
                if(min_len>len){
                    min_len =len;   
                    min_pos = up_pos 
                }
                var down_pos = this.down.convertToWorldSpaceAR(cc.v2(0,0))
                //获取下点的距离
                var dir = w_dst_pos.sub(down_pos)
                var len = dir.mag();
                //判断上点是不是最近的点
                if(min_len>len){
                    min_len =len;   
                    min_pos = down_pos 
                }
            }else{
                //获取左右的点
                var left_pos = this.left.convertToWorldSpaceAR(cc.v2(0,0))
                //获取左点的距离
                var dir = w_dst_pos.sub(left_pos)
                var len = dir.mag();
                //判断上点是不是最近的点
                if(min_len>len){
                    min_len =len;   
                    min_pos = left_pos 
                }
                var right_pos = this.right.convertToWorldSpaceAR(cc.v2(0,0))
                //获取下点的距离
                var dir = w_dst_pos.sub(right_pos)
                var len = dir.mag();
                //判断上点是不是最近的点
                if(min_len>len){
                    min_len =len;   
                    min_pos = right_pos 
                }
            }
            //找到跳跃的位置距离参考点最近的那个参考点和位置 去个范围 100
            dir = w_dst_pos.sub(min_pos)
            //判断位置是否有效 
            if(min_len<100){
                w_dst_pos.x = min_pos.x;
                w_dst_pos.y = min_pos.y;
                return true;
            }
    
            //end
            return false
        },
        // update (dt) {},
    });

player.js:

rank.js:

cc.Class({
        extends: cc.Component,
    
        properties: {
        
            //准备属性
            //每一项的高度
            HIGH:80,
            //每一页几条的数据
            PAGE_NUM:8,
            //获取组件
            scroll_view:{
                type:cc.ScrollView,
                default:null,
            },
            //获取预制体
            item_prefab:{
                type:cc.Prefab,
                default:null,
            },
        },
    
        // LIFE-CYCLE CALLBACKS:
        //初始化加载项
        onLoad () {
            //排行的数组
            this.value_set=[];
            for(var i=1;i<=30;i++){
                //把数字添加的数组 value_set中
                this.value_set.push(i)
            }
            //查找content
            this.content = this.scroll_view.content;
            this.opt_item_set=[];
            //每次加载几页
            for(var i=0;i<this.PAGE_NUM*3;i++){
                var item = cc.instantiate(this.item_prefab);
                this.content.addChild(item);
                this.opt_item_set.push(item);
            }
            //监听scrollview事件
            this.scroll_view.node.on("scroll-ended",this.on_scroll_ended.bind(this),this);
        },
    
        //显示记录
        load_recode(start_index){
            this.start_index = start_index;
            for(var i=0;i<this.PAGE_NUM*3;i++){
                var label = this.opt_item_set[i].getChildByName("ranking").getComponent(cc.Label);
                //显示记录
                label.string = this.value_set[this.start_index+i];
            }
        },
    
        start () {
            //30项数据里面的起始数据的记录索引
            this.start_index =0;
            //起始y坐标
            this.start_y = this.content.y;
            this.load_recode(this.start_index);
        },
    
        load_scroll_recode:function(){
            //向下加载数据
            //当开始位置比 value_set的长度小 则表示没加载完成
            if(this.start_index+this.PAGE_NUM*3<this.value_set.length && this.content.y>=this.start_y+this.PAGE_NUM*2*this.HIGH){//content超过两个page的值
                //_autoScrolling在引擎源码中负责处理scrollview的滚动动作
                //等自动滚动结束后再加载 防止滚动过快 直接跳到最后的位置
                if(this.scroll_view._autoScrolling){
                    this.scroll_view.elastic =false; //关闭回弹效果
                    return
                }
                var down_loaded=this.PAGE_NUM;
                this.start_index += down_loaded;
    
                if(this.start_index + this.PAGE_NUM*3>this.value_set.length){
                    //超过数据范围长度
                    var out_len = this.start_index + this.PAGE_NUM*3-this.value_set.length;
                    down_loaded -=out_len;
                    this.start_index -= out_len;
                }
                this.load_recode(this.start_index);
                this.content.y -= down_loaded *this.HIGH;
                return;
            }
    
            //向上加载数据
            if(this.start_index>0 && this.content.y<=this.start_y){
                if(this.scroll_view._autoScrolling){
                    this.scroll_view.elastic = false;
                    return;
                }
                var up_loaded = this.PAGE_NUM;
                this.start_index -= up_loaded;
                if(this.start_index<0){
                    up_loaded +=this.start_index;
                    this.start_index=0;
                }
                this.load_recode(this.start_index);
                this.content.y += up_loaded *this.HIGH;
            }
        },
        on_scroll_ended:function(){
            this.load_scroll_recode();
    
            //加载结束后自动滚动回弹开启
            this.scroll_view.elastic=true;
        },
        update (dt) {
            this.load_scroll_recode();
        },
        // 打开游戏界面
        on_game_open () {
            cc.director.loadScene("game_scene")
        }
    });

[20190721161059630.gif]: /images/20211129/50b81d6589a64daf84e655a42ba5bed2.png
[https_download.csdn.net_download_weixin_43388844_11391153]: https://download.csdn.net/download/weixin_43388844/11391153