版权声明：欢迎访问studio.holaverse.cn！HTML5游戏零基础超快上手！一天一个小游戏！！！ https://blog.csdn.net/yinlijun2004/article/details/50931503
消灭星星是一款经典的休闲游戏，因此花了一点时间在Hola Studio上实现它。本游戏包含完整的游戏元素，包括广告、音乐、音效、振动、关卡、分享等。
游戏截图
扫描二维码
游戏链接：http://studio.holaverse.com/apprun.html?mode=preview&user_id=0f4a0994-b11d-494f-bfa0-a1a006a63d01&game_key=23eeacdf3f2e4002b1d5f721e637b5e5&company_id=1cd6f6b2-30ae-43fc-8b87-25ff89e27699
导入链接
你可以将以下链接粘贴到地址栏，进行导入，这个游戏就成为你自己的项目了。
http://studio.holaverse.com/?mode=preview&user_id=0f4a0994-b11d-494f-bfa0-a1a006a63d01&game_key=23eeacdf3f2e4002b1d5f721e637b5e5&company_id=1cd6f6b2-30ae-43fc-8b87-25ff89e27699
游戏代码
整个游戏分为两部分，一部分是逻辑部分，是通用的，可以移植到任意的游戏引擎，另一部分是在Hola Studio上的实现。
游戏的逻辑
消灭星星的路程图如下：
玩家点击一颗星星——遍历周围的星星找出相同颜色的所有星星——挨个播放星星爆炸特效——向下移动——向左移动——判断有无相邻颜色相同的星星——升级或者游戏结束
其中几个主要的代码段
遍历相同颜色的星星
递归调用countRemoveableStar方法
StarGame.prototype.countRemoveableStar = function(clickedStar, row, col, removeableArray) {
var starArray = this.starArray;
if(row < 0 || row >= this.rowNum
|| col < 0 || col >= this.colNum
|| starArray[row][col] === null
|| starArray[row][col].counting === true) {
return;
}
var star = starArray[row][col];
if(!clickedStar.matchBlock(star)) {
return;
}
removeableArray.push(star);
starArray[row][col].counting = true;
starArray[row][col].countingNum = col * this.rowNum + row;
this.countRemoveableStar(clickedStar, row + 1, col, removeableArray);
this.countRemoveableStar(clickedStar, row - 1, col, removeableArray);
this.countRemoveableStar(clickedStar, row, col + 1, removeableArray);
this.countRemoveableStar(clickedStar, row, col - 1, removeableArray);
};向下移动
StarGame.prototype.movingDown = function() {
var starArray = this.starArray;
for(var j = 0; j < this.colNum; j++) {
var i = 0;
while(i < this.rowNum) {
if(starArray[i][j] !== null) {
i++;
continue;
}
var k = i + 1;
while(k < this.rowNum) {
if(starArray[k][j] === null) {
k++;
continue;
}
if(starArray[k][j].starHeightNum === undefined) {
starArray[k][j].starHeightNum = 0;
}
starArray[k][j].starHeightNum++;
k++;
}
i++;
}
for(i = 0; i < this.rowNum; i++) {
if(starArray[i][j] !== null) {
var star = starArray[i][j];
if(star.starHeightNum === undefined|| star.starHeightNum < 1) {
continue;
}
starArray[i - star.starHeightNum][j] = star;
starArray[i][j] = null;
star.queueAnimate(i - star.starHeightNum, j);
star.starHeightNum = 0;
}
}
}
};向左移动
StarGame.prototype.movingLeft = function() {
var needAnimate = false;
var blankNum = [];
var starArray = this.starArray;
for(var j = 0; j < this.colNum; j++) {
var blank = true;
for(var i = 0; i < this.rowNum; i++) {
if(starArray[i][j] !== null) {
blank = false;
break;
}
}
if(blank) {
for(k = j + 1; k < this.colNum; k++) {
if(blankNum[k] === undefined) {
blankNum[k] = 0;
}
blankNum[k]++;
needAnimate = true;
}
}
}
if(!needAnimate) {
return;
}
for(var j = 0; j < this.colNum; j++) {
if(!blankNum[j]) {
continue;
}
for(var i = 0; i < this.rowNum; i++) {
var star = starArray[i][j];
if(star !== null && blankNum[j] > 0) {
starArray[i][j - blankNum[j]] = starArray[i][j];
starArray[i][j] = null;
star.queueAnimate(i, j - blankNum[j]);
}
}
}
};判断有无相同颜色的星星
StarGame.prototype.checkCompleteCondition = function() {
var starArray = this.starArray;
for(var i = 0; i < this.rowNum; i++) {
for(var j = 0; j < this.colNum; j++) {
var block = starArray[i][j];
if(block !== null) {
if(((i < this.rowNum - 1) && block.matchBlock(starArray[i + 1][j]))
|| ((j < this.colNum - 1) && block.matchBlock(starArray[i][j + 1]))) {
return false;
}
}
}
}
return true;
};游戏的界面
游戏的界面在Hola Studio上大概300行代码左右。
星星溅落的效果
星星溅落效果采用贝塞尔曲线实现，Hola Studio提供了UIPath组件，只需要配置几个参数即可。
win.doBezeierAnimation = function(element) {
var path = win.dupChild("path");
var left = Math.random() > 0.5;
var begin = {};
begin.x = element.x;
begin.y = element.y;
var control = {};
var diffX = Math.random() * 300 * (left ? -1 : 1);
control.x = begin.x + diffX;
control.y = element.y - Math.random() * 800;
var end = {};
end.x = control.x + diffX;
end.y = win.h;
path.addQuad(1000, null, {x:begin.x, y:begin.y}, {x:control.x, y:control.y}, {x:end.x, y:end.y});
path.addObj(element, null, function() {
path.pause();
path.remove();
element.remove();
}, 0, true);
}星星的绘制
这里星星的绘制是用的canva手动绘制的，当然更建议你用图片。
StarInterfaces.drawStar = function(context) {
var element = this;
if(!StarInterfaces.STAR_CANVAS) {
StarInterfaces.STAR_CANVAS = {};
}
if(!StarInterfaces.STAR_CANVAS[element.blockColor]) {
StarInterfaces.STAR_CANVAS[element.blockColor] = StarInterfaces.prepareStarCanvas(element.blockColor);
}
var canvas = StarInterfaces.STAR_CANVAS[element.blockColor];
context.drawImage(canvas, 0, 0);
};
StarInterfaces.prepareStarCanvas = function(fillColor) {
var canvas = document.createElement("canvas");
canvas.height = 50;
canvas.width = 50;
var c2d = canvas.getContext("2d");
c2d.scale(0.8, 1);
c2d.beginPath();
c2d.moveTo(15/9, 150/9);
c2d.lineTo(100/9,140/9);
c2d.lineTo(170/9,90/9);
c2d.lineTo(230/9,140/9);
c2d.lineTo(315/9,150/9);
c2d.lineTo(230/9,200/9);
c2d.lineTo(300/9,263/9);
c2d.lineTo(170/9,233/9);
c2d.lineTo(30/9,263/9);
c2d.lineTo(100/9,200/9);
c2d.fillStyle = fillColor;
c2d.fill();
c2d.closePath();
canvas.c2d = c2d;
return canvas;
};广告的实现
把广告组件拖进来之后，
一行代码：
win.find("hola-ads").setEnable(true);如果你也想做H5游戏，或者在这个项目基础上修改。
