connect the dots

[odelia]

I'm trying to do a Connect the dots game.

what is the best way to do this?

I created points and a line sprite between them and when you click on the first point and over the line you draw on a bitmap data. it's not the best solutions.. 

That's the main code:

var connecttheDots = connecttheDots || {};

connecttheDots.GameController = function(state, gameData){
    this.state = state;
    this.game = this.state.game;
    this.gameData = gameData;
    
    this.TweenAnimation = new connecttheDots.TweenAnimation();
    this.SoundMannager = new connecttheDots.SoundMannager(this.game); 
    this.DataUtils = new connecttheDots.DataUtils();
    
    this.activeDrag = false;
    
    this.stroke = 1;
    
    this.dotGroup = this.game.add.group();
    this.lineGroup = this.game.add.group();
    this.canvasGroup = this.game.add.group();
    
    this.init();
}

connecttheDots.GameController.prototype = Object.create(Phaser.Sprite.prototype);
connecttheDots.GameController.prototype.constructor = connecttheDots.GameController;

connecttheDots.GameController.prototype.init = function(){
    
    this.pointArr = [
        /*{x: this.game.world.centerX - (this.game.width * .15), y: this.game.world.centerY - (this.game.height * .2), angle:-90, type: "start"},
        {x: this.game.world.centerX + (this.game.width * .15), y: this.game.world.centerY - (this.game.height * .2), angle:0, type: "middle"},
        {x: this.game.world.centerX + (this.game.width * .15), y: this.game.world.centerY + (this.game.height * .2), type: "end"}  */
        {x: this.game.world.centerX - (this.game.width * .15), y: this.game.world.centerY - (this.game.height * .2), angle:-49, type: "start"},
        {x: this.game.world.centerX + (this.game.width * .15), y: this.game.world.centerY + (this.game.height * .2), type: "end"},
        {x: this.game.world.centerX + (this.game.width * .12), y: this.game.world.centerY - (this.game.height * .2), angle:22, type: "start"},
        {x: this.game.world.centerX + (this.game.width * .05), y: this.game.world.centerY + (this.game.height * .06), type: "end"},
        {x: this.game.world.centerX - (this.game.width * .07), y: this.game.world.centerY - (this.game.height * .1), angle:22, type: "start"},
        {x: this.game.world.centerX - (this.game.width * .15), y: this.game.world.centerY + (this.game.height * .2), type: "end"}
    ]
    
    // dots
    
    var i, objData, lineData;
    for (i = 0; i < this.pointArr.length; i++) { 
        
        // line
        if(this.pointArr[i].type != "end") {
            lineData = {
                id: i,
                x1: this.pointArr[i].x,
                y1: this.pointArr[i].y,
                x2: this.pointArr[i+1].x,
                y2: this.pointArr[i+1].y,
                width: this.DataUtils.getDistanceFrom2Points(this.pointArr[i].x, this.pointArr[i].y, this.pointArr[i+1].x, this.pointArr[i+1].y),
                angle: this.pointArr[i].angle
            }
            this["line"+i] = new connecttheDots.line(this.state, lineData);
            //this.lineGroup.add(this["line"+i]);
        }
        
        // dot
        objData = {
            id: i,
            x: this.pointArr[i].x,
            y: this.pointArr[i].y,
            active: false,
            type: this.pointArr[i].type
        }
        
        if(i < this.pointArr.length-1) {
            objData.nextPoint = i+1;
        }
        
        this["dot"+i] = new connecttheDots.dot(this.state, this.pointArr[i].x, this.pointArr[i].y, objData);
        //this.dotGroup.add(this["dot"+i]);
    }
    
    this.dot0.glow(true);
    this.dot0.active(true);
    
    // canvas
    this.canvasBTM = this.game.add.bitmapData(this.game.width, this.game.height);
    //this.canvasBTM.context.fillStyle ="#ffffff";
    //this.canvasBTM.context.fillRect(0,0,this.game.width, this.game.height);
    
    this.canvasBTM.x = 0;
    this.canvasBTM.y = 0;
    this.canvasBTM.addToWorld(this.canvasBTM.x, this.canvasBTM.y);
    this.canvasBTM.smoothed = false;
    
    //this.canvasGroup.add(this.canvasBTM);
    
    this.game.input.addMoveCallback(this.draw, this);
    
    this.game.input.onUp.add(this.stopDrag, this);
}

connecttheDots.GameController.prototype.onUpdate = function(){
    if(this.curLine){
        if(this.curLine.item.input.pointerOver()){ this.activeDrag = true; } else { this.activeDrag = false; }
        if(this.destDot.item.input.pointerOver()){
            console.log("endPath");
            this.curLine = null;
            this.activeDrag = false;
            if(this.destDot.item.data.nextPoint) {
                this["dot"+Number(this.destDot.item.data.id+1)].glow(true);
                this["dot"+Number(this.destDot.item.data.id+1)].active(true);
            } else {
                console.log("finish!");
            }
        }
    }
}

connecttheDots.GameController.prototype.draw = function(pointer, x, y){
     if (pointer.isDown && this.activeDrag){ this.canvasBTM.draw("circle", x, y); }
}

connecttheDots.GameController.prototype.stopDrag = function(pointer){
    this.curLine = null;
}

connecttheDots.GameController.prototype.clickDot = function(btn){
    console.log("clickDot", btn.data);
    this["dot"+btn.data.id].glow(false);
    if(btn.data.nextPoint) {
        this.destDot = this["dot"+Number(btn.data.id+1)];
        this.destDot.glow(true);
        this.destDot.active(true);
    }
    this.curDot = btn.parent;
    this.curLine = this["line"+btn.data.id];
    console.log(this.curLine);
}

 

Hope you can help me.

Thank you.

[odelia]

anybody?

[drhayes]

Is there something wrong with the way you've got it right now?

[odelia]

I want it to be like the user drawing the line between the dots... it doesn't look like it now..

 

http://game.hop.co.il/odelia/html5/connectTheDots/