最近闲来无聊，想学习Cocos Creator游戏编程，并把自己在学习过程中的一些案例分享出来，后面会陆续推出一些小游戏的，由于本人第一次接触Cocos Creator 和JavaScript，代码多有疏漏欢迎留言指正。
?
游戏画面展示：
游戏源码共享：
https://download.csdn.net/download/hucailai/20166220
游戏引擎版本：2.3.3
// 学习交流：QQ群：624554876
cc.Class({
extends: cc.Component,
properties: {
RootNode: {
type: cc.Node,
default:null,
},
smallNode: {
type: cc.Node,
default:null,
},
Success: {
type: cc.Label,
default:null,
},
},
onLoad () {
this.cellWidth = 50;
this.cellHeight = this.cellWidth;
this.lineWidth = 2;
this.cellCnt = 9; //9*9格子
this.frameWidth = 20;
this.baseX = -(this.cellCnt * this.cellWidth + (this.cellCnt + 1) * this.lineWidth )/2;
this.baseY = -(this.cellCnt * this.cellHeight + (this.cellCnt + 1) * this.lineWidth )/2;
this.sCellWidth = 25;
this.sCellHeight = this.sCellWidth;
this.sLineWidth = 1;
this.sCellCnt = 9; //9*9格子
this.sFrameWidth = 10;
this.sBaseX = -(this.sCellCnt * this.sCellWidth + (this.sCellCnt + 1) * this.sLineWidth )/2;
this.sBaseY = -(this.sCellCnt * this.sCellHeight + (this.sCellCnt + 1) * this.sLineWidth )/2;
this.node.on(cc.Node.EventType.MOUSE_DOWN, this.onMouseDown, this);
this.array= new Array()
this.desArray = new Array()
this.heap = new Array()
this.level = 1 // 游戏难度
},
initArray(){
for (i = 0; i < this.cellHeight; i++){
this.array[i] = new Array()
for (j = 0; j < this.cellWidth; j++){
this.array[i][j] = false
}
}
},
initDestArray(){
for (i = 0; i < this.cellHeight; i++){
this.desArray[i] = new Array()
for (j = 0; j < this.cellWidth; j++){
this.desArray[i][j] = false
}
}
for (i = 0; i < 2+this.level*4; i++){
x = this.random(0, this.cellCnt)
y = this.random(0, this.cellCnt)
cc.log("i=" + x + " j=" + y)
this.onClickArray(this.desArray, true, x, y)
}
cc.log("desArray:" + this.desArray)
},
onDestroy: function () {
this.node.off(cc.Node.EventType.MOUSE_DOWN, this.onMouseDown, this);
},
onMouseDown: function (event) {
let mouseType = event.getButton();
if (mouseType === cc.Event.EventMouse.BUTTON_LEFT) {
// 鼠标左键按下
let mousePoint = event.getLocation();
let localPoint = this.RootNode.convertToNodeSpace(mousePoint);
let j = Math.floor((localPoint.x - this.baseX - this.lineWidth) / (this.cellWidth + this.lineWidth))
let i = Math.floor((localPoint.y - this.baseY - this.lineWidth) / (this.cellHeight + this.lineWidth))
if (!(i < 0 || j < 0 || i >= this.cellCnt || j >= this.cellCnt)){
this.onClick(i, j)
}
}
},
onClickArray(array, small, i, j){
array[i][j] = !array[i][j]
this.fillCell(i, j, small, array[i][j])
if ((j+1) < this.cellCnt){
array[i][j+1] = !array[i][j+1]
this.fillCell(i, j+1, small, array[i][j+1])
}
if ((j-1) >= 0){
array[i][j-1] = !array[i][j-1]
this.fillCell(i, j-1, small, array[i][j-1])
}
if ((i+1) < this.cellCnt){
array[i+1][j] = !array[i+1][j]
this.fillCell(i+1, j, small, array[i+1][j])
}
if ((i-1) >= 0){
array[i-1][j] = !array[i-1][j]
this.fillCell(i-1, j, small, array[i-1][j])
}
},
onClick(i, j){ // 单击了i行，j列
this.Success.node.active = false
this.onClickArray(this.array, false, i, j)
// 放到堆栈中以便回退
pos=[i,j]
this.heap.push(pos)
// 检测是否完成，并重新开始
if(this.checkFinished()){
this.Success.node.active = true
this.restart()
}
},
onBack(){
// 回退算法就是重复点击上次的位置
if (this.heap.length > 0){
var pos = this.heap.pop(pos)
this.onClickArray(this.array, false, pos[0], pos[1])
}
},
onLevel(sender, level){
cc.log("Level：" + level)
if (level == this.level){
return
}
this.level = level
this.restart()
},
drawBackCells(graphics, cellWidth,cellHeight, cellCnt,
lineWidth, frameWidth, baseX, baseY){
graphics.fillColor = cc.color(255, 255, 255, 255);
nodeWidth = cellCnt * cellWidth +
(cellCnt + 1) * lineWidth +
2 * frameWidth;
graphics.fillRect(-nodeWidth/2,-nodeWidth/2,nodeWidth,nodeWidth)
// 绘制9*9的格子
graphics.fillColor = cc.color(0, 0, 0, 255);
for (i =0; i <= cellCnt; i++){
graphics.fillRect(baseX, baseY + (cellHeight+lineWidth) * i,
cellCnt * cellWidth + (cellCnt + 1) * lineWidth,
lineWidth)
graphics.fillRect(baseX + (cellWidth+lineWidth) * i, baseY ,
lineWidth,
cellCnt * cellHeight + (cellCnt + 1) * lineWidth)
}
},
fillCell(i, j, bSmall, bBlack) {
graphics = this.graphics
cellWidth = this.cellWidth
cellHeight = this.cellHeight
x = this.baseX + this.lineWidth + j * (this.cellWidth + this.lineWidth)
y = this.baseY + this.lineWidth + i * (this.cellHeight + this.lineWidth)
if (bSmall) {
graphics = this.smallgraphics
cellWidth = this.sCellWidth
cellHeight = this.sCellHeight
x = this.sBaseX + this.sLineWidth + j * (this.sCellWidth + this.sLineWidth)
y = this.sBaseY + this.sLineWidth + i * (this.sCellHeight + this.sLineWidth)
}
graphics.fillColor = cc.color(255, 255, 255, 255);
if (bBlack){
graphics.fillColor = cc.color(0, 0, 0, 255);
}
graphics.fillRect(x, y, cellWidth, cellHeight)
},
checkFinished(){
for (i = 0; i < this.cellHeight; i++){
for (j = 0; j < this.cellWidth; j++){
if (this.array[i][j] != this.desArray[i][j])
return false
}
}
cc.log("Finished")
return true
},
restart(){
this.drawBackCells(this.graphics, this.cellWidth, this.cellHeight, this.cellCnt,
this.lineWidth, this.frameWidth, this.baseX, this.baseY);
this.drawBackCells(this.smallgraphics, this.sCellWidth, this.sCellHeight, this.sCellCnt,
this.sLineWidth, this.sFrameWidth, this.sBaseX, this.sBaseY);
this.initArray()
this.initDestArray()
this.heap.length = 0
},
start () {
this.Success.node.active = false
this.graphics = this.RootNode.addComponent(cc.Graphics);
this.drawBackCells(this.graphics, this.cellWidth, this.cellHeight, this.cellCnt,
this.lineWidth, this.frameWidth, this.baseX, this.baseY);
this.smallgraphics = this.smallNode.addComponent(cc.Graphics);
this.drawBackCells(this.smallgraphics, this.sCellWidth, this.sCellHeight, this.sCellCnt,
this.sLineWidth, this.sFrameWidth, this.sBaseX, this.sBaseY);
this.initArray()
this.initDestArray()
},
random : function (lower, upper) {
return Math.floor(Math.random() * (upper - lower)) + lower;
},
});