简易仿跳一跳——微信小游戏
前言
本简易版 跳一跳使用Cocos来完成编写。
（使用js进行逻辑编写）
预览
工程代码
工程代码：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:
var game_scene = require("game_scene")
cc.Class({
extends: cc.Component,
properties: {
//初始速度
init_speed:150,
//加速度
a_power:600,
//斜率
y_radio:0.580693816,
//获取脚本 引用 game_scene
game_manager:{
type:game_scene,
default:null
},
//获取记录分值的节点
scoreDisplay:{
type:cc.Label,
default:null,
}
},
// LIFE-CYCLE CALLBACKS:
onLoad () {
//初始化next_block
this.next_block=null;
//初始化方向 1向右 -1 向左
this.direction = 1;
//初始分值
this.score = 0;
},
//创建记录分值的函数
gainScore(anim_node, next_block){
var blockMid = next_block.mid.getPosition()
var animPosition = anim_node.getPosition()
console.log(blockMid + ' ' + animPosition)
this.score += 1;
//更新文字
this.scoreDisplay.string = "Score:" +this.score
},
start () {
//获取 rotate 节点
this.rot_node=this.node.getChildByName("rotate");
//获取anim节点
this.anim_node=this.rot_node.getChildByName("anim");
//蓄力
this.is_power_mode=false;
//当前速度
this.speed=0;
//跳出的距离
this.x_distance = 0;
//监听消息
//压下 开始
this.anim_node.on(cc.Node.EventType.TOUCH_START,function(e){
//加力开始
this.is_power_mode = true;
this.x_distance =0;
//赋值初始速度
this.speed = this.init_speed;
//停掉所有的其余动画
this.anim_node.stopAllActions();
//下压缩放(2秒压到0.5倍) (第一个时间 第二个 X 第三个Y)
this.anim_node.runAction(cc.scaleTo(2,1,0.5));
}.bind(this),this)
//弹起结束
this.anim_node.on(cc.Node.EventType.TOUCH_END,function(e){
//加力结束
this.is_power_mode =false;
//停止所有动画
this.anim_node.stopAllActions();
//0.5秒返回到1 (第一个时间 第二个 X 第三个Y)
this.anim_node.runAction(cc.scaleTo(0.5,1,1));
//跳到那里去
this.player_jump()
}.bind(this),this)
//弹起取消
this.anim_node.on(cc.Node.EventType.TOUCH_CANCEL,function(e){
//加力结束
this.is_power_mode =false;
//停止所有动画
this.anim_node.stopAllActions();
//0.5秒返回到1 (第一个时间 第二个 X 第三个Y)
this.anim_node.runAction(cc.scaleTo(0.5,1,1));
//跳到那里去
this.player_jump()
}.bind(this),this)
},
//跳到哪里去？
player_jump(){
//设置X Y坐标
var x_distance = this.x_distance *this.direction;
var y_distance = this.x_distance*this.y_radio;
//获取节点坐标
var target_pos = this.node.getPosition();
//设置目的地的坐标
target_pos.x +=x_distance;
target_pos.y +=y_distance;
//添加旋转 时间 度数 旋转的度数根据方向来翻转
this.rot_node.runAction(cc.rotateBy(0.5,360*this.direction))
//把目的地的坐标转化成世界坐标
var w_pos = this.node.parent.convertToWorldSpaceAR(target_pos)
var is_game_over = false
//判断 参考点的位置
if(this.next_block.jump_on_block(w_pos,this.direction)){
//把 target_pos 变成参考点的位置
target_pos = this.node.parent.convertToNodeSpaceAR(w_pos)
}else{
is_game_over = true
}
console.log(target_pos)
//跳到目标(时间 坐标 高度 次数)
var j = cc.jumpTo(0.5,target_pos,200,1)
//执行动画
// this.node.runAction(j)
//随机生成方向
this.direction = (Math.random()<0.5)? -1 : 1;
//地图移动
var end_func = cc.callFunc(function(){
//判断游戏是否结束 没有结束就继续生产地图
if(is_game_over){
this.game_manager.on_checkout_game();
//显示分数
console.log("你的分数" +this.score);
}else{
//判断地图的生成方向
if(this.direction ===-1){
this.game_manager.move_map(580-w_pos.x, -y_distance)
}else{
this.game_manager.move_map(180-w_pos.x, -y_distance)
}
//调用分数函数
this.gainScore(this.anim_node, this.next_block);
}
}.bind(this))
//创建队列
var seq = cc.sequence(j,end_func)
this.node.runAction(seq)
},
set_next_block(block){
this.next_block = block;
},
update (dt) {
//如果加力
if(this.is_power_mode){
//蓄力 + 加速度
this.speed +=(this.a_power*dt)
//蓄力越快 能量越多 距离越远
this.x_distance += this.speed*dt
}
},
});
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.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")
}
});