最近工作不太忙，打算随便看下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;[/code]
2.设置标题和输出信息

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

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);[/code]
3.设置积分板和开始菜单

右下弄了个“点击开始游戏”的文本，点击只会游戏开始，这个文本会变成得分，游戏结束，这个文本会变成得分信息。[code]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;

}

}); //注册鼠标点击[/code]
加入一个显示得分的函数，分数由时间和出错次数决定，这个函数将会在游戏gameStart函数中调用，因为这个函数在结束游戏会改变，所以不能用匿名函数。[code]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);
}
}