[]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学些一般基础知识。
再建立个linkgame.js，用下列代码进行初始化。个人建议把窗口初始化成16:9的，否则全屏会变形或在白边。我是写完之后才发现的，不想重新算坐标，就这样了。
加入下列代码设置窗口位置和拉伸效果。
2.设置标题和输出信息
网上找了个图片当背景，加了个text当标题，加了版权信息，并且为版权信息注册了个匿名函数，点击会跳转到我的个人网站。
3.设置积分板和开始菜单
右下弄了个“点击开始游戏”的文本，点击只会游戏开始，这个文本会变成得分，游戏结束，这个文本会变成得分信息。
加入一个显示得分的函数，分数由时间和出错次数决定，这个函数将会在游戏gameStart函数中调用，因为这个函数在结束游戏会改变，所以不能用匿名函数。
4.设置卡片
设置8×3个卡片，正常来说，应该用class封装一下，但是本人偷懒，直接弄了两个数组，一个是card，主要是监听鼠标点击Laya.Event.CLICK事件，用color属性标记对错，用winCount记录成功对数，当成功数达到12时，停止timer计时，游戏结束，输出得分（100-时间经过-出错次数）。另一个数组是button，负责输出片面的假名，当卡片被点击时会变成红色，配错对会恢复黑色。button的内容是根据gameStart函数时进行初始化的。代码中做了下坐标转换，用一维代二维，简化了下坐标计算。
4.补全游戏流程
也就是写个gameStart函数，并且初始化botton的数据。用g_list_A/B初始化平假名和片假名，然后用g_list_C作为索引，每次开始时用GetRandomNum把索引打乱，然后随便取12的平假名和12个片假名进行初始排名，开始执行timer计时器。注意，一定要用个gameStatue变量来控制游戏状态，否则不点开始就可以点卡片了。
个人游戏开发经验大概就是之前看过几天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);
}
}
没有找到相关结果
已邀请:
要回复问题请先登录
3 个回复
cuixueying
赞同来自:
websun
赞同来自:
Laya_XS
赞同来自: