类似于别踩白块儿的阉割版游戏-别碰我的松鼠
介绍
其中一个项目用到了别踩白块儿的游戏，想要做这种游戏，笔者一开始用的是网上开源的html5脚本—当然是那种压缩版的，慢慢跟着客户的要求改，生不如死，所以就重新用lufylegend写了一个。
游戏一般结构
一般小游戏都会有自己的图片，音效等等，所以，一般结构是：
资源加载—-界面初始化—-界面显示。
这游戏难点不多，或者说没有，就是要知道怎么用lufylegend，如何加载资源，如何排版，当然，角色的消灭，事件点击，物体运动效果都是需要知道的。
核心代码如下：
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta content="telephone=no,email=no" name="format-detection">
<meta name="full-screen" content="true"/>
<meta name="screen-orientation" content="portrait"/>
<meta name="x5-fullscreen" content="true"/>
<meta name="360-fullscreen" content="true"/>
<style>
body{
padding: 0;
margin: 0;
}
style>
<script type="text/javascript">
window.onerror =function(errorMessage, scriptURI, lineNumber) {
var erorMsg={
message: errorMessage,
script: scriptURI,
line: lineNumber
};
//alert(errorMessage);
};
script>
<title>别再踩白块儿title>
<script type="text/javascript" src="jquery-1.11.0.min.js">script>
<script type="text/javascript" src="jquery-migrate-1.2.1.min.js">script>
<script type="text/javascript" src="lufylegend-1.9.11.min.js">script>
<script type="text/javascript" src="game.js">script>
head>
<body>
<div id="game" style="">div>
<script type="text/javascript">
script>
<script type="text/javascript">
script>
<script type="text/javascript">
script>
<script type="text/javascript">
script>
body>
html>
var _domain_path="";
var GameSettings={
limitTime:25 //游戏设定，这是当前游戏的限制时间，以秒为单位。
,rows:5
,max_rows_in_screen:8 //整个屏幕需要大多行填充。
,show_rows_num:5 //通常显示多少行。必然少于max_rows_in_screen
,columns:3
,cellWidth:160
,cellHeight:160
,cellShakeTime:150 //单元格摇头动画单独一次的执行时间。
,cellShakeDistance:5 //单元格摇头的相对距离。
,cellFadeOutTime:160 //单元格消失时间。
,cellMoveTime:160//单元格移动耗时。
};
var GameOptions={
width:480
,height:800
};
var GameData={
score:0
,beginTime:0
,endTime:0
,currentRowIndex:0 //游戏当前的行数是。。。以0开始。
,userWantsStart:false
,playing:false
,busy:false //当前是否忙
,showAnimation:false //是否正在执行动画。
,timeOver:false //是否游戏结束
,sinkPause:true //是否开始下沉动画。
};
var innerTools={
timeFormat:function(seconds){
var _seconds=parseInt(seconds);
var _s=_seconds%60;
var _m=parseInt((_seconds-_s)/60)%60;
var _str="";
if(_m<=9){
_str="0"+""+_m;
}
else{
_str=""+_m;
}
if(_s<=9){
_str=_str+":0"+_s;
}
else{
_str=_str+":"+_s;
}
return _str;
}
};
//--这是需要加载的各种资源。
var resources=[];
//--加载完成后得到的数据。，
var resourceList={};
function _addResource(name,path){
resources.push({
name:name
,path:_domain_path+path
//,path:_domain_path+path
});
}
(function(){
//--加载图片素材。
_addResource("actor","Resources/actor.jpg");
_addResource("cell","Resources/cell.jpg");
_addResource("actor_error","Resources/actor_error.jpg");
_addResource("cell_error","Resources/cell_error.jpg");
_addResource("clock_yellow","Resources/clock-yellow.png");
_addResource("coin","Resources/coin.png");
//--音效。。
_addResource("audio_click","Resources/Music/click.mp3");
_addResource("audio_time_over","Resources/Music/time_over.mp3");
_addResource("audio_wrong","Resources/Music/wrong.mp3");
})();
//--这是游戏的主要方法。
function game_main(){
console.log("游戏运行中...");
game_screen_setting();//游戏设置
game_preLoad();//游戏预加载。
}
//--游戏加载层。。
var _loadingLayer={};
//--设置屏幕为全屏或者其他。
function game_screen_setting(){
LGlobal.align = LStageAlign.BOTTOM_MIDDLE;
//LGlobal.stageScale = LStageScaleMode.SHOW_ALL;
LGlobal.stageScale = LStageScaleMode.EXACT_FIT;
LSystem.screen(LStage.FULL_SCREEN);
}
//游戏预加载。
function game_preLoad(){
_loadingLayer = new LoadingSample3();
LGlobal.stage.addChild(_loadingLayer);
//--这里开始要加载资源了。
LLoadManage.load(resources,function(progress){
_loadingLayer.setProgress(progress);
}
,game_begin
);
}
function game_begin(_resource_loaded_object){
resourceList=_resource_loaded_object;
LGlobal.stage.removeChild(_loadingLayer);
//var graphics=new LGraphics();
// graphics.drawRect(1,'#00000',[170,50,100,100],true,'#cccccc');
//return;
GLOBAL_GAME.init();
console.log("加载完成，现在要开始渲染游戏了。");
}
init(30,"game",GameOptions.width,GameOptions.height,game_main);
//--这里是游戏主体逻辑界面什么的。
//--这是游戏的各种界面句柄管理。
var Layers={
Layer_Main:{}
,Layer_Clear:{}
};
var Sound_click={};
var Sound_wrong={};
var Sound_time_over={};
//--main layer
function LayerGameMain(__opts){
var _i_settings={
onInit:function(){}
,onClickError:function(){
}
};
$.extend(_i_settings,__opts);
var _root_sprite=new LSprite();
var bgGroup=new LSprite();
var topBarGroup=new LSprite();
var scoreGroup=new LSprite();
var timeGroup=new LSprite();
var _cellGroup=new LSprite();
_cellGroup.x=0;
_cellGroup.y=0;
var _score_gold_coin_logo={};
var _score_text={};
var _time_tips={};
var _time_logo={};
var ActorList=[];
var Actor_min_index=0;
var Actor_max_index=0;
var viewActorList=[];//界面上的运作中的角色列表。
//--下面是头顶栏目。
var gameTopBar={
init:function(){
scoreGroup=new LSprite();
_score_gold_coin_logo=new LBitmap(new LBitmapData(resourceList["coin"]));
//_score_gold_coin_logo.anchor.setTo(0.5,0.5);
_score_text=new LTextField();
window.scoreGroup=scoreGroup;
scoreGroup.x=20;
scoreGroup.y=20;
window.scoreText=_score_text;
_time_logo=new LBitmap(new LBitmapData(resourceList["clock_yellow"]));
_time_tips=new LTextField();
//game.add.bitmapText(_time_logo.width+10, 8, 'flappy_font', innerTools.timeFormat(GameSettings.limitTime), 20); //当前分数
//--位置。
scoreGroup.x=20;
scoreGroup.y=20;
_score_gold_coin_logo.x=0;
_score_gold_coin_logo.y=0;
_score_text.x=30;
_score_text.y=5;
timeGroup.x=GameOptions.width-125;
timeGroup.y=20;
_time_logo.x=0;
_time_logo.y=0;
_time_tips.x=35;
_time_tips.y=5;
window.scoreLogo=_score_gold_coin_logo;
_score_gold_coin_logo.scaleX=0.5;
_score_gold_coin_logo.scaleY=0.5;
_score_text.text="0";
_time_tips.text="0";
//_time_tips.setType(LTextFieldType.INPUT);
//_score_text.setType(LTextFieldType.INPUT);
_score_text.size = 14;
_score_text.color = "#000000";
_time_tips.size=14;
_time_tips.color="#000000";
scoreGroup.addChild(_score_text);
scoreGroup.addChild(_score_gold_coin_logo);
timeGroup.addChild(_time_logo);
timeGroup.addChild(_time_tips);
topBarGroup.addChild(scoreGroup);
topBarGroup.addChild(timeGroup);
_root_sprite.addChild(topBarGroup);
}
,setTimeTips:function(nowTimeCount){
_time_tips.text=innerTools.timeFormat(nowTimeCount);
}
,showScore:function(scoreText){
_score_text.text=scoreText;
}
,getGroupRoot:function(){
return topBarGroup;
}
};
//--填充背景格子。
function setBackgroundWithCells(clickHandler){
for(var i=0;ifor(var j=0;jvar __sprite={};
var _s_w=GameSettings.cellWidth;
var _s_h=GameSettings.cellHeight;
var _x=_s_w*j;
var _y=GameOptions.height-(i+1)*_s_h;
var tmpBitMap=new LBitmap(new LBitmapData(resourceList["cell"]));
var tmpBitMap_error=new LBitmap(new LBitmapData(resourceList["cell_error"]));
tmpBitMap_error.visible=false;
tmpBitMap.name="normal";
tmpBitMap_error.name="error";
__sprite=new LSprite();
__sprite.addChild(tmpBitMap);
__sprite.addChild(tmpBitMap_error);
__sprite.width=GameSettings.cellWidth;
__sprite.height=GameOptions.cellHeight;
console.log(_x,_y);
__sprite.x=_x;
__sprite.y=_y;
bgGroup.addChild(__sprite);
__sprite.addEventListener(LMouseEvent.MOUSE_DOWN,function(event){
console.log("点击了普通单元格");
if(clickHandler){
clickHandler(event);
}
});
}
}
//--绘制线条、。
for(var i=0;i< GameSettings.rows;i++){
var _line_x1=0;
var _line_y1=0;
var _line_x2=0;
var _line_y2=0;
var _s_w=GameSettings.cellWidth;
var _s_h=GameSettings.cellHeight;
var _x=_s_w*j;
var _y=GameOptions.height-(i+1)*_s_h;
if(_y==0||_y>=GameOptions.height){
continue;
}
bgGroup.graphics.drawLine(1,'#70cbe5',[0,_y,GameOptions.width,_y]);
}
for(var j=0;j< GameSettings.columns;j++){
var _line_x1=0;
var _line_y1=0;
var _line_x2=0;
var _line_y2=0;
var _s_w=GameSettings.cellWidth;
var _s_h=GameSettings.cellHeight;
var _x=_s_w*j;
var _y=GameOptions.height-(i+1)*_s_h;
if(_x<=0||_x>=GameOptions.width){
continue;
}
bgGroup.graphics.drawLine(1,'#70cbe5',[_x,0,_x,GameOptions.height]);
}
//t4.graphics.drawLine(1,'#ff00ff',[0,0,200,200]);
}
//--这是自定义的猪脚格子。
function ActorCell(rowIndex,columnIndex,__opts){
var __child_root_=new LSprite();
var i_settings={
onClick:function(robj){
}
};
$.extend(i_settings,__opts);
var _i_data={
x:0
,y:0
,sequence:0
};
var _sprite_main=new LSprite();
_sprite_main.x=0;
_sprite_main.y=0;
var tmpBitMap=new LBitmap(new LBitmapData(resourceList["actor"]));
tmpBitMap.width=GameSettings.cellWidth-2;
tmpBitMap.height=GameSettings.cellHeight-2;
tmpBitMap.x=0;
tmpBitMap.y=0;
tmpBitMap.name="normal";
var tmpBitMap_error=new LBitmap(new LBitmapData(resourceList["actor_error"]));
tmpBitMap_error.width=GameSettings.cellWidth-2;
tmpBitMap_error.height=GameSettings.cellHeight-2;
tmpBitMap_error.x=0;
tmpBitMap_error.y=0;
tmpBitMap_error.name="error";
tmpBitMap_error.visible=false;
_sprite_main.addChild(tmpBitMap);
_sprite_main.addChild(tmpBitMap_error);
_sprite_main.addEventListener(LMouseEvent.MOUSE_DOWN,function(event){
console.log("点击了英雄单元格");
var _target = event.currentTarget;
window.target=_target;
var _theObj={
die:function(){
var tween = LTweenLite.to(_target,GameSettings.cellFadeOutTime/1000,{alpha:0,ease:Bounce.easeIn,onComplete:function(){
_target.die();
_target.remove();
}});
}
,getSequence:function(){
return _target.sequence;
}
//--下层。
,sink:function(){
var _y=(viewActorList.length-4+1)*GameSettings.cellHeight;
console.log(_y);
//--好了，现在要补上一个sprite才行。。。
var _random_column=parseInt(Math.random()*1000);
_random_column=_random_column%3;
var _r1=ActorCell(viewActorList.length,_random_column,{
onClick:function(robj){
_actorClickHandler(robj);
}
});
_r1.setSequence(viewActorList.length);
var _tmpSprite=_r1.getRoot();
_tmpSprite.alpha=0;
//--计算位置。
var preUnit=viewActorList[viewActorList.length-1];
var preUnitY=preUnit.getRoot().y;
var _now_y= preUnitY-GameSettings.cellHeight;
_tmpSprite.y=_now_y;
ActorList.push(_r1);
viewActorList.push(_r1);
_cellGroup.addChild(_tmpSprite);
//--逐渐显示效果。
LTweenLite.to(_tmpSprite,GameSettings.cellFadeOutTime/1000,{alpha:1,ease:Bounce.easeIn,onComplete:function(){
}});
var __tween_idle=LTweenLite.to(_cellGroup,GameSettings.cellMoveTime/1000,{y:_y,onComplete:function(){
}});
}
,showError:function(callback){
var _normalSprite=_target.getChildByName("normal");
var _errorSprite=_target.getChildByName("error");
var tween = LTweenLite.to(_target,GameSettings.cellFadeOutTime/1000,{alpha:0,onComplete:function(){
_normalSprite.visbile=false;
_errorSprite.visible=true;
LTweenLite.to(_target,GameSettings.cellFadeOutTime/1000,{alpha:1,onComplete:function(){
if(callback){
callback();
}
}});
}});
}
};
if(i_settings.onClick){
window.robj=_theObj;
i_settings.onClick(_theObj);
}
});
var _returnObj={
setLocation:function(_row,_column){
var _line_x1=0;
var _line_y1=0;
var _line_x2=0;
var _line_y2=0;
var _s_w=GameSettings.cellWidth;
var _s_h=GameSettings.cellHeight;
var _x=_s_w*_column;
var _y=GameOptions.height-(_row+1)*_s_h;
_sprite_main.x=_x;
_sprite_main.y=_y;
_i_data.x=_x;
_i_data.y=_y;
}
,getRoot:function(){
return _sprite_main;
}
,setSequence:function(_seq){
_i_data.sequence=_seq;
_sprite_main.sequence=_seq;
}
,getSequence:function(){
return _i_data.sequence;
}
,getX:function(){
return _i_data.x;
}
,getY:function()
{
return _i_data.y;
}
};
_returnObj.setLocation(rowIndex,columnIndex);
return _returnObj;
}
function _actorClickHandler(robj){
var _seq=robj.getSequence();
_seq=parseInt(_seq);
console.log("目前点中的sequence："+_seq);
if(GameData.playing==false&&_seq!=0){
console.log("尚未开始游戏。。");
return;
}
if(_seq==0){
GLOBAL_GAME.resetPlayStates();
//--开始进行下一步了。
Sound_click.play();
robj.die();
robj.sink();
return;
}
//--好了，假如是正式开始，那么就要判断点中的是不是需要点击的单元格了。
if(GameData.score==_seq-1){
console.log("正确。。");
GameData.score++;
Sound_click.play();
robj.die();
robj.sink();
gameTopBar.showScore(GameData.score);
}
else{
//--错误。
Sound_wrong.play();
GameData.playing=false;
robj.showError(function(){
GLOBAL_GAME.resetEndStates();
if(_i_settings.onClickError){
_i_settings.onClickError();
}
});
}
}
//--设定初始化的点游戏角色界面
function setActorsList(){
for(var i=0;i< GameSettings.rows-1;i++){
var _random_column=parseInt(Math.random()*1000);
_random_column=_random_column%3;
var _r1=ActorCell(i+1,_random_column,{
onClick:function(robj){
_actorClickHandler(robj);
}
});
_r1.setSequence(i);
ActorList.push(_r1);
viewActorList.push(_r1);
_cellGroup.addChild(_r1.getRoot());
}
window.actorList=ActorList;
_root_sprite.addChild(_cellGroup);
window.cellGroup=_cellGroup;
}
//--这是控制界面下沉滑动的逻辑。
function sink(){
var _y=(viewActorList.length-4+1)*GameSettings.cellHeight;
console.log(_y);
var __tween_idle=LTweenLite.to(cellGroup,GameSettings.cellMoveTime,{y:_y,ease:Bounce.easeIn,onComplete:function(){
//console.log("已经消失了。");
}});
return;
var _sep=10;
for(var i=0;i< viewActorList.length;i++){
var r1=viewActorList[i];
var sprite=r1.getRoot();
sprite.y=sprite.y+_sep;
}
}
var _white_cell_handler=function(event){
var _target = event.currentTarget;
if(GameData.playing==false){
console.log("尚未开始游戏。。");
return;
}
if(GameData.busy){
console.log("系统繁忙");
return;
}
if(GameData.timeOver){
console.log("游戏时间结束");
return;
}
if(GameData.showAnimation){
console.log("系统位移中。。");
return;
}
//--假如不是这些情况，那么可以判定，点击这个就是错了。。
Sound_wrong.play();
var _error_sprite=_target.getChildByName("error");
var _normal_sprite=_target.getChildByName("normal");
_normal_sprite.visible=false;
_error_sprite.visible=true;
GLOBAL_GAME.resetEndStates();
if(_i_settings.onClickError){
_i_settings.onClickError();
}
}
setBackgroundWithCells(_white_cell_handler);
bgGroup.x=0;
bgGroup.y=0;
_root_sprite.addChild(bgGroup);
setActorsList();
gameTopBar.init();
_root_sprite.addChild(topBarGroup);
//--添加
var returnObj={
getRoot:function(){
return _root_sprite;
}
,setTimeTips:function(_time){
gameTopBar.setTimeTips(_time);
}
,setSore:function(_score){
gameTopBar.setScore(_score);
}
,sink:function(){
//sink();
}
};
return returnObj;
}
function LayerGameClear(__opts){
var _root_sprite=new LSprite();
var _bg=new LBitmap(new LBitmapData(resourceList["bg_main"]));
var _tips_clear=new LBitmap(new LBitmapData(resourceList["stage_clear"]));
var _score_bg=new LBitmap(new LBitmapData(resourceList["Dialog_Item"]));
var _score_text=new LTextField();
_score_text.color="#ffffff";
_score_text.size=18;
_score_text.text="0";
_tips_clear.x=GameOptions.width/2-265/2;
_tips_clear.y=GameOptions.height/2-158/2-100;
_score_bg.x=GameOptions.width/2-153/2;
_score_bg.y=GameOptions.height/2-47/2+20;
_score_text.x=GameOptions.width/2-15;
_score_text.y=GameOptions.height/2+10;
_root_sprite.addChild(_bg);
_root_sprite.addChild(_tips_clear);
_root_sprite.addChild(_score_bg);
_root_sprite.addChild(_score_text);
var returnObj={
setScore:function(score){
_score_text.text=score+'';
}
,getRoot:function(){
return _root_sprite;
}
};
return returnObj;
}
var _layer_game_main={};
var _layer_game_clear={};
var GLOBAL_GAME={
init:function(){
var me=this;
console.log("pop star执行。");
me.initMusic();
_layer_game_main=LayerGameMain({
onClickError:function(){
me.onGameEnd();
}
});
Layers.Layer_Main=_layer_game_main.getRoot();
//Layers.Layer_Menu=_layer_game_menu.getRoot();
//Layers.Layer_Clear=_layer_game_clear.getRoot();
LGlobal.stage.addChild(Layers.Layer_Main);
me.initOnFrame();
_layer_game_main.setTimeTips(GameSettings.limitTime);
}
,initMusic:function(){
Sound_click=new LSound(resourceList["audio_click"]);
Sound_wrong=new LSound(resourceList["audio_wrong"]);
Sound_time_over=new LSound(resourceList["audio_time_over"]);
}
//--设置相关参数状态。
,resetPlayStates:function(){
GameData.timeOver=false;
GameData.playing=true;
GameData.beginTime=new Date().getTime();
GameData.busy=false;
GameData.sinkPause=false;
}
//--设置游戏结束状态。
,resetEndStates:function(){
GameData.timeOver=true;
GameData.playing=false;
GameData.beginTime=new Date().getTime();
GameData.busy=false;
GameData.sinkPause=true;
}
//-这是对于全局舞台的相关帧率控制设置。
,initOnFrame:function(){
var me=this;
LGlobal.stage.addEventListener(LEvent.ENTER_FRAME,function(event){
var layer = event.currentTarget;
// //每一帧，横坐标增长/减少==向右/向左移动一像素，方向取决于direction的正负
// layer.x += direction;
// //不停右移
// if(layer.x < 0){
// direction = 1;
// }
// //坐标大于700后，向左移
// if(layer.x > 700){
// direction = -1;
// }
//console.log(new Date());
//--假如游戏没有开始，那么就不执行。。。
if(GameData.playing==false){
return;
}
if(GameData.timeOver==true){
return;
}
var _nowTime=new Date().getTime();
var _passTime=parseInt((_nowTime-GameData.beginTime)/1000);
if(_passTime>=GameSettings.limitTime){
_layer_game_main.setTimeTips(0);
//GameData.timeOver=true;
Sound_time_over.play();
me.resetEndStates();
//LGlobal.stage.removeChild(Layers.Layer_Main);
//LGlobal.stage.addChild(Layers.Layer_Clear);
//_layer_game_main.showScore(GameData.score);
me.onGameEnd();
return;
}
_layer_game_main.setTimeTips(GameSettings.limitTime-_passTime);
});
}
,onGameEnd:function(){
location.href="rankList.html?score="+GameData.score;
}
}; 运行结果
资源下载
下载资源