[]LayaAir开发笔记(1)五十音图连连看

最近工作不太忙,打算随便看下h5游戏开发,上网搜了下国内主流的h5游戏开发引擎。主要是cocos2d-h5,egret,layaAir。感觉layaAir性能好些(虽然我对性能没要求),就选了这个。

个人游戏开发经验大概就是之前看过几天cocos2dx引擎,做了一个射击小游戏。不过本质工作是做高性能计算方向的,所以看文档之类基本功没啥问题,js大学有点基础,所以直接把demo看了一遍,之后就现学现用了。

想了想,决定做个对对碰类的游戏,内容定为日语五十音图,做这个基本不用准备素材,而且自己片假名一直背不下来,做完了自己也可以用用。

代码没多长,也没进行封装,命名也不太规范,大家凑合看。http://www.coderluan.com/gameluan/linkgame.html,大家可以在这里玩游戏并查看全部代码,下面是一些要点介绍:

1.根据引擎的文档进行初始化

先建立个linkgame.html文件,调用下laya库还有自己的js代码,不多说,理解不了请先去w3school学些一般基础知识。
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>五十音图对对碰</title>

</head>

<body bgcolor="gainsboro">

</body>

<script src="libs/laya.core.js"></script>

<script src="linkgame.js"></script>

</html>


再建立个linkgame.js,用下列代码进行初始化。个人建议把窗口初始化成16:9的,否则全屏会变形或在白边。我是写完之后才发现的,不想重新算坐标,就这样了。
var g_stat_width = 800;
var g_stat_heiht = 600;
Laya.init(g_stat_width, g_stat_heiht);


加入下列代码设置窗口位置和拉伸效果。
Laya.stage.scaleMode = Laya.Stage.SCALE_SHOWALL;
Laya.stage.screenMode = Laya.Stage.SCREEN_HORIZONTAL;
Laya.stage.alignH = Laya.Stage.ALIGN_CENTER;
Laya.stage.alignV = Laya.Stage.ALIGN_MIDDLE;


2.设置标题和输出信息

网上找了个图片当背景,加了个text当标题,加了版权信息,并且为版权信息注册了个匿名函数,点击会跳转到我的个人网站。
// 设定背景

var background = new Laya.Sprite();

background.loadImage("linkgame_back.jpg");

background.cacheAsBitmap = true;

Laya.stage.addChild(background);



// 设定标题

var title = new laya.display.Text();

title.text = g_game_title;

title.font = "Arial";

title.fontSize = 50;

title.stroke = 2;

title.strokeColor = "Black";

title.pos(g_stat_width / 2 - title.width / 2, 40);

Laya.stage.addChild(title);



// 设定版权信息

var copyright = new laya.display.Text();

copyright.text = "Copyright © 2016 程序员之乱";

copyright.font = "Arial";

copyright.fontSize = 20;

copyright.bold = true;

copyright.pos(20, g_stat_heiht - 35);

copyright.on(Laya.Event.CLICK, this, function() {

window.location.href = "http://www.coderluan.com";

});

Laya.stage.addChild(copyright);


3.设置积分板和开始菜单

右下弄了个“点击开始游戏”的文本,点击只会游戏开始,这个文本会变成得分,游戏结束,这个文本会变成得分信息。
var  txt  = new  laya.display.Text();

txt.text = "点击此处开始游戏";

txt.font = "Arial";

txt.fontSize = 30;

txt.bold = true;

txt.pos(g_stat_width - txt.width - 40, g_stat_heiht - txt.height - 20);

Laya.stage.addChild(txt);

txt.on(Laya.Event.CLICK, this, function(e) {

switch (e.type) {

case Laya.Event.CLICK:

gameStart();

break;

}

}); //注册鼠标点击


加入一个显示得分的函数,分数由时间和出错次数决定,这个函数将会在游戏gameStart函数中调用,因为这个函数在结束游戏会改变,所以不能用匿名函数。
var timeCount = 0;
var errorCount = 0;

function gameCounter() {

txt.text = "用时 : " + timeCount + " 失误:" + errorCount;

timeCount += 1;

}


4.设置卡片

设置8×3个卡片,正常来说,应该用class封装一下,但是本人偷懒,直接弄了两个数组,一个是card,主要是监听鼠标点击Laya.Event.CLICK事件,用color属性标记对错,用winCount记录成功对数,当成功数达到12时,停止timer计时,游戏结束,输出得分(100-时间经过-出错次数)。另一个数组是button,负责输出片面的假名,当卡片被点击时会变成红色,配错对会恢复黑色。button的内容是根据gameStart函数时进行初始化的。代码中做了下坐标转换,用一维代二维,简化了下坐标计算。
var card = ;

var button = ;



// 设定卡片

for (var i = 0; i < 8; i++) {

for (var j = 0; j < 3; j++) {

var index = 8 * j + i

card[index] = new Laya.Sprite();

Laya.stage.addChild(card[index]);

card[index].name = index;

card[index].graphics.drawRect(0, 0, 80, 120, null, "#000000", 2);

card[index].graphics.loadImage("linkgame_card.jpg");

card[index].size(80, 120);

card[index].pos(10 + 100 * i, 130 + 140 * j);

card[index].on(Laya.Event.CLICK, this, function(e) {

if (gameStatue == true) {

if ((card_A == -1) && (card_B == -1)) {

card_A = e.target.name;

button[card_A].color = "red";

} else if ((card_A != -1) && (card_B == -1)) {

card_B = e.target.name;

if ((g_list_A.indexOf(button[card_A].text) != -1) && (g_list_A.indexOf(button[card_A].text) == g_list_B.indexOf(button[card_B].text)) || (g_list_A.indexOf(button[card_A].text) == -1) && (g_list_A.indexOf(button[card_B].text) == g_list_B.indexOf(button[card_A].text))) {

button[card_A].color = "red";

button[card_B].color = "red";

winCount = winCount + 1;

if (winCount == 8 * 3 / 2) {

//游戏结束

Laya.timer.clear(this, gameCounter);

var score = 100 - timeCount - errorCount;

txt.text = "游戏结束 得分 : " + score;

}

} else {

button[card_A].color = "black";

button[card_B].color = "black";

errorCount += 1;

}

} else if ((card_A != -1) && (card_B != -1)) {

card_A = e.target.name;

card_B = -1;

button[card_A].color = "red";

}

}

});

button[index] = new laya.display.Text();

Laya.stage.addChild(button[index]);

button[index].fontSize = 50;

button[index].pos(5 + 100 * i + 40 - 50 / 2, 150 + 140 * j + 60 - 50 / 2);

}

}


4.补全游戏流程

也就是写个gameStart函数,并且初始化botton的数据。用g_list_A/B初始化平假名和片假名,然后用g_list_C作为索引,每次开始时用GetRandomNum把索引打乱,然后随便取12的平假名和12个片假名进行初始排名,开始执行timer计时器。注意,一定要用个gameStatue变量来控制游戏状态,否则不点开始就可以点卡片了。
var g_list_A = ["あ", "い", "う", "え", "お", "か", "き", "く", "け", "こ", "さ","し", "す", "せ", "そ", "た", "ち", "つ", "て", "と", "な", "に", "ぬ", "ね", "の","は", "ひ", "ふ", "へ", "ほ", "ま", "み", "む", "め", "も", "や", "ゆ", "よ", "ら","り", "る", "れ", "ろ", "わ", "を", "ん"];

var g_list_B = ["ア", "イ", "ウ", "エ", "オ", "カ", "キ", "ク", "ケ", "コ", "サ","シ", "ス", "セ", "ソ", "タ", "チ", "ツ", "テ", "ト", "ナ", "ニ", "ヌ", "ネ", "ノ","ハ", "ヒ", "フ", "ヘ", "ホ", "マ", "ミ", "ム", "メ", "モ", "ヤ", "ユ", "ヨ", "ラ","リ", "ル", "レ", "ロ", "ワ", "ヲ", "ン"];

// 随机下标顺序

var g_list_C = ;

for (var i = 0; i < g_list_A.length; i++) {

g_list_C = i;

}

function GetRandomNum(Min, Max) {

var Range = Max - Min;

var Rand = Math.random();

return (Min + Math.round(Rand * Range));

}

// 开始游戏

function gameStart() {

if (!gameStatue) {

gameStatue = true;

//初始化随机下标数组

g_list_C.sort(function() {

return 0.5 - Math.random()

})

var g_list_word = ;

for (var i = 0; i < 8 * 3 / 2; i++) {

g_list_word = g_list_A[g_list_C[i]];

g_list_word[i + 8 * 3 / 2] = g_list_B[g_list_C[i]];

}

g_list_word.sort(function() {

return 0.5 - Math.random()

})

for (var i = 0; i < 24; i++) {

button.text = g_list_word;

}

//开始计时

Laya.timer.loop(1000, this, gameCounter);
}
}
已邀请:

cuixueying

赞同来自:

感谢,很棒!d=====( ̄▽ ̄*)b

websun

赞同来自:

你好,请问你的这个游戏的源码有共享吗?(js代码),我试了试,有一些问题,但是找了好久还是没找出来,所以只能在这求助大神你,希望指点一下,多谢

Laya_XS

赞同来自:

谢谢分享,不错!

要回复问题请先

商务合作
商务合作