我必须构建一个android应用程序游戏。
以前，我尝试使用 pixi.JS 构建它，但它在 Canvas for Android 上效果不佳。
我实际上是在尝试用 CollieJS 构建它，这里有一个简单的例子：
<script type="text/javascript">
var stats = new Stats();
stats.setMode(0); // 0: fps, 1: ms
// Align top-left
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.body.appendChild( stats.domElement );
setInterval( function () {
stats.begin();
stats.end();
}, 1000 / 60 );
//Creation calque
var layer = new collie.Layer({
width: 1280,
height: 700
});
var score = 0;
var thisManyDb=10;
var comboCounter=0;
function letWinSomePoints(){
score+=thisManyDb;
comboCounter++;
txt_score.text(score+"dB");
txt_ComboCounter.text("Combo: "+comboCounter);
};
//Chargement de la planche
collie.ImageManager.add({
sprite_bassiste: "assets/img/spriteBass2.png",
sprite_batteur: "assets/img/spriteDrummer2.png",
sprite_guitF: "assets/img/spriteGuitF2.png",
sprite_guitH: "assets/img/spriteGuitH.png"
});
//Découpage de la planche
collie.ImageManager.addSprite(
"sprite_bassiste", {
normal:[0,0,187,268,3],
normal_rose:[561,0,186,268,3],
normal_click:[0,268,264,394,3],
occupe:[0,662,215,283,3],
occupe_rose:[645,662,215,283,3],
occupe_rouge:[0,945,215,283,3],
combo:[0,1223,277,309,3]
}
);
collie.ImageManager.addSprite(
"sprite_batteur", {
normal:[0,0,297,297,3],
normal_rose:[891,0,297,295,3],
normal_click:[0,297,273,376,3],
occupe:[819,339,356,334,3],
occupe_rose:[0,662,356,334,3],
occupe_rouge:[1068,662,356,334,3],
combo:[0,1007,297,306,3]
}
);
collie.ImageManager.addSprite(
"sprite_guitF", {
normal:[0,0,216,265,3],
normal_rose:[648,0,216,265,3],
normal_click:[0,265,351,372,3],
occupe:[0,637,216,265,3],
occupe_rose:[648,637,216,265,3],
occupe_rouge:[0,902,216,265,3],
combo:[0,1167,281,309,3]
}
);
collie.ImageManager.addSprite(
"sprite_guitH", {
normal:[0,0,174,219,3],
normal_rose:[522,0,174,279,3],
occupe:[0,280,269,256,3],
occupe_rose:[0,535,269,256,3],
occupe_rouge:[0,791,269,256,3],
normal_click:[0,1047,309,376,3],
combo:[0,1423,283,309,3]
}
);
//Creation d'un objet
var bassiste = new collie.DisplayObject({
width: 187,
height: 268,
y:0,
x:0,
backgroundImage: "sprite_bassiste",
spriteSheet : "normal",
set_normal:function(){
bassiste.set("spriteSheet", "normal");
bassiste._htOption.height=268;
bassiste._htOption.width=187;
bassiste._htOption.x=0;
bassiste._htOption.y=0;
},
set_occupe:function(){
bassiste.set("spriteSheet", "occupe");
bassiste._htOption.height=283;
bassiste._htOption.width=215;
bassiste._htOption.x-15;//(-15)
bassiste._htOption.y=2;//(+2)
},
set_occupe_rose:function(){
bassiste.set("spriteSheet", "occupe_rose");
bassiste._htOption.height=283;
bassiste._htOption.width=215;
bassiste._htOption.x-15;//(-15)
bassiste._htOption.y=2;//(+2)
},
set_combo:function(){
bassiste.set("spriteSheet", "combo");
bassiste._htOption.height=309;
bassiste._htOption.width=277;
bassiste._htOption.x-40;//(-40)
bassiste._htOption.y-20;//(+20)
},
}).attach({
click: function (e){
if (bassiste.get("spriteSheet")=="normal_rose" && has_been_clicked==false) {
has_been_clicked=true;
bassiste.set("spriteSheet", "normal_click");
bassiste._htOption.height=394;
bassiste._htOption.width=264;
bassiste._htOption.x-=55;//(-40)
bassiste._htOption.y-=126;//(-126)
letWinSomePoints();
setTimeout(function(){
bassiste._htOption.set_normal();
has_been_clicked=false;
},500);
};
}
}).addTo(layer);
var batteur = new collie.DisplayObject({
x:187,
y:0,
width: 297,
height: 297,
backgroundImage: "sprite_batteur",
spriteSheet : "normal",
set_normal:function(){
batteur.set("spriteSheet", "normal");
batteur._htOption.height=297;
batteur._htOption.width=297;
batteur._htOption.x=187;
batteur._htOption.y=0;
},
set_occupe:function(){
batteur.set("spriteSheet", "occupe");
batteur._htOption.height=334;
batteur._htOption.width=356;
batteur._htOption.x-=73;//-73
batteur._htOption.y-=39;//-39
},
set_occupe_rose:function(){
batteur.set("spriteSheet", "occupe_rose");
batteur._htOption.height=334;
batteur._htOption.width=356;
batteur._htOption.x-=73;//-73
batteur._htOption.y-=39;//-39
},
set_combo:function(){
batteur.set("spriteSheet", "combo");
batteur._htOption.height=306;
batteur._htOption.width=297;
batteur._htOption.x=187;//pas de modifs position
batteur._htOption.y=0;
},
}).attach({
click: function (e){
if (batteur.get("spriteSheet")=="normal_rose" && has_been_clicked==false) {
has_been_clicked=true;
batteur.set("spriteSheet", "normal_click");
batteur._htOption.height=376;
batteur._htOption.width=273;
batteur._htOption.y-=84;//-84
batteur._htOption.x+=16;//+16
letWinSomePoints();
setTimeout(function(){
batteur._htOption.set_normal();
has_been_clicked=false;
},500);
};
}
}).addTo(layer);
var guitF = new collie.DisplayObject({
x:187+297,
y:0,
width: 216,
height: 265,
backgroundImage: "sprite_guitF",
spriteSheet : "normal",
set_normal:function(){
guitF.set("spriteSheet", "normal");
guitF._htOption.height=265;
guitF._htOption.width=216;
guitF._htOption.x=187+297;
guitF._htOption.y=0;
},
set_occupe:function(){
guitF.set("spriteSheet", "occupe");
guitF._htOption.height=265;
guitF._htOption.width=216;
guitF._htOption.x+=21;//+21
},
set_occupe_rose:function(){
guitF.set("spriteSheet", "occupe_rose");
guitF._htOption.height=265;
guitF._htOption.width=216;
guitF._htOption.x+=21;//+21
},
set_combo:function(){
guitF.set("spriteSheet", "combo");
guitF._htOption.height=309;
guitF._htOption.width=281;
guitF._htOption.x-=32;//+32
guitF._htOption.y-=44;//+44
},
}).attach({
click: function (e){
if (guitF.get("spriteSheet")=="normal_rose" && has_been_clicked==false) {
has_been_clicked=true;
guitF.set("spriteSheet", "normal_click");
guitF._htOption.height=372;
guitF._htOption.width=351;
guitF._htOption.y-=96;//-96
guitF._htOption.x-=67;//-67
letWinSomePoints();
setTimeout(function(){
guitF._htOption.set_normal();
has_been_clicked=false;
},500);
};
}
}).addTo(layer);
var guitH = new collie.DisplayObject({
x:187+297+216,
y:0,
width: 174,
height: 279,
backgroundImage: "sprite_guitH",
spriteSheet : "normal",
set_normal:function(){
guitH.set("spriteSheet", "normal");
guitH._htOption.height=279;
guitH._htOption.width=174;
guitH._htOption.x=187+297+216;
guitH._htOption.y=0;
},
set_occupe:function(){
guitH.set("spriteSheet", "occupe");
guitH._htOption.height=256;
guitH._htOption.width=269;
guitH._htOption.x-=19;//-19
guitH._htOption.y+=12;//+12
},
set_occupe_rose:function(){
guitH.set("spriteSheet", "occupe_rose");
guitH._htOption.height=256;
guitH._htOption.width=269;
guitH._htOption.x-=19;//-19
guitH._htOption.y+=12;//+12
},
set_combo:function(){
guitH.set("spriteSheet", "combo");
guitH._htOption.height=309;
guitH._htOption.width=283;
guitH._htOption.x-=71;//-71
guitH._htOption.y+=22;//+22
},
}).attach({
click: function (e){
if (guitH.get("spriteSheet")=="normal_rose" && has_been_clicked==false) {
has_been_clicked=true;
guitH.set("spriteSheet", "normal_click");
guitH._htOption.y-=76;//76
guitH._htOption.x-=102;//102
guitH._htOption.height=376;
guitH._htOption.width=309;
letWinSomePoints();
setTimeout(function(){
guitH._htOption.set_normal();
has_been_clicked=false;
},500);
};
}
}).addTo(layer);
var txt_score = new collie.Text({
width : 100,
height : 100,
x : 0,
y : 0,
fontColor : "#000000"
}).text(score+"dB").addTo(layer);
var txt_DbCounter = new collie.Text({
width : 100,
height : 100,
x : 100,
y : 0,
fontColor : "#000000"
}).text('').addTo(layer);
var txt_ComboCounter = new collie.Text({
width : 100,
height : 100,
x : 200,
y : 0,
fontColor : "#000000"
}).addTo(layer);
//Définition de l'anim du sprite
var timer = collie.Timer.cycle(
bassiste, "10fps", {
from:0,
to:2,
}
);
collie.Timer.cycle(
batteur, "10fps", {
from: 0,
to: 2,
}
);
collie.Timer.cycle(
guitF, "10fps", {
from: 0,
to: 2,
}
);
collie.Timer.cycle(
guitH, "10fps", {
from: 0,
to: 2,
}
);
var choosen_musician = 0;
var busy_musican = 0;
var trap_musician = 0;
var has_been_clicked = false;
// Fonction boucle intégrée dans collie
collie.Timer.repeat(function () {
//Pioche un musicien
choosen_musician=Math.round(Math.random()*3);
busy_musican = Math.round(Math.random()*10);
trap_musician = Math.round(Math.random()*20);
if (busy_musican==0 && busy_musican!=choosen_musician) {
busy_musican=bassiste;
} else if (busy_musican==1 && busy_musican!=choosen_musician){
busy_musican=batteur;
} else if (busy_musican==2 && busy_musican!=choosen_musician){
busy_musican=guitF;
} else if (busy_musican==3 && busy_musican!=choosen_musician){
busy_musican=guitH;
};
if (choosen_musician==0) {
choosen_musician=bassiste;
} else if (choosen_musician==1){
choosen_musician=batteur;
} else if (choosen_musician==2){
choosen_musician=guitF;
} else if (choosen_musician==3){
choosen_musician=guitH;
};
// On change son sprite, bug lorsqu'on met un sprite "fixe"
choosen_musician.set("spriteSheet", "normal_rose");
if (busy_musican._htOption) {busy_musican._htOption.set_occupe()};
setTimeout(function(){
if (has_been_clicked==false) {
choosen_musician._htOption.set_normal();
//comboCounter=0;
};
if (busy_musican._htOption) {busy_musican._htOption.set_normal();};
},2000);
}, 2500);
//On render tout ça
collie.Renderer.addLayer(layer);
collie.Renderer.load(document.getElementById("container"));
collie.Renderer.start();
</script>
我知道这是一个很长的例子，但我需要一些帮助..
这是一个带有一些精灵开关的简单动画精灵。
实际上，游戏在我的 Android 平板电脑上以 4-6 FPS 运行，我不知道为什么..