Schönschreibwettbewerb

[k7c4]

Inspiriert von den vielen Wettbewerben und hok Konventionen-Thread kommt hier mal ein neuer Wettbewerbsvorschlg, der aber nicht ganz ernst gemeint ist

Wie wäre es denn, wenn man eine Beschreibung meinetwegen einer Klasse inn Klartext gibt, und jeder Wettbewerber soll daraus den am besten lesbaren Code machen, den es gibt?
Oder den, der am meisten auf Design Patterns beruht oder so.

Ich denke, da kann man viel bei lernen, wenn man den anderen beim Coden auf die Finger schaut, wie hok in seinem Thread ja auch Inspirationen in seine Liste hineingenommen hat.

Zum Abschluss müßte man dannnoch einen Poll machen und Ehre dem Gewinner.

[secp]

hört sich gut an, es sollte aber nicht zu viel code sein. Und was ist eine klasse im klartext?

Wenn du den 'veranstalter' spielst könnte der bokel auch mal teilnehmen .

[pheidrias]

können ja verschiedene Wertungen sein : Lesbarkeit, Konventionalität, Performance und Originalität...

,
pheidrias

[k7c4]

Geschrieben von secp
hört sich gut an, es sollte aber nicht zu viel code sein. Und was ist eine klasse im klartext?

Wenn du den 'veranstalter' spielst könnte der bokel auch mal teilnehmen .

Ich meine, man schreibt so eine Art Spezifikation oder vielleicht auch schon die Klasse selber und dann macht jeder Bewerber ein Refactoring über der Klasse oder so ähnlich, so dass man das mal in live-Action sieht und vorallen Dingen sieht, wie andere damit umgehen.

[makese]

jute gidee ... :-)

wann gehts los ???

makese

[k7c4]

So, ich habe mir ein wenig Gedanken gemacht darüber, was man machen könnte.

Und zwar schwebt mir ein Verschiebe-Puzzle vor! Das kennt bestimmt jeder. Man hat einen Rahmen, in dem quadratische flache Teilchen liegen, die man gegeneinander verschieben kann, weil ein Teilchen fehlt und die in den richtigen Positionen ein Bild ergeben. Gibt ja auch genügend Beispiele im Netz.

Dass ich so etwas auswähle, liegt daran, dass es ja nicht um die Originalität oder Komplexheit des Codes geht, sondern darum, dass man das ganze so strukturiert, dass auch andere Leute mit dem Code was anfangen können.

Dem Coder sind hierbei keine Grenzen gesetzt, nur soviel sollte im vorne herein geklärt werden.

Man sollte das Bild, das aus der Library attachet wird, die Anzahl der Zeilen und Spalten sowie die Rasterweite (also Abmessungen der einzelnen Quadrate) nicht hardcoden, sondern Userseitig ändern können.

Es ist nicht unbedingt erforderlich, eine Methode zu coden, die überprüft, ob man gewonnen hat, oder eine, die sicherstellt, dass so gemischt wird, dass das Puzzle auch lösbar ist. Es geht darum, dass die Technik, wie wird das Puzzle erzeugt und wie kann man ein Teilchen verschieben, dargelegt wird, um die Sache recht einfach zu halten. Allerdings wäre es von Vorteil, dass der Code so angelegt ist, dass man diese Methoden leicht implementieren kann.

Was haltet Ihr davon?

[secp]

find ich gut - wo bleibt der klartext?

[k7c4]

Ohne eine Diskussion über das machbare kommt hier kein Klartext hin.

[secp]

Ja, so ein puzzle ist gar nicht so einfach. Letztendlich wird man zu unschönen sachen gezwungen. Wenn man für P4 optimiert kann man sich aber einiges erlauben .

Ich würde ein bmp w*h mal attachen und noch jeweihls eine maske drauflegen. Maus aktionen drauf und fertig.

Lauter einzel bmp's find ich zuviel arbeit, wenn man das bild mal ändern will.

Übergroße puzzles mit culling und scrolling braucht eh keiner, oder?

[k7c4]

Also, erst mal denke ich, dass die Sache relativ einfach zu halten ist, da es schließlich darum geht, das Prinzip zu zeigen, wie man an die Sache ran geht.

Als einzige Voraussetzungen würde ich aus Gründen der Flexibilität angeben, dass man sich die Anzahl der Zeilen und Spalten sowie die Größe eines einzelnen verschiebbaren Teilchen bei der Initialisierung aussuchen kann, und dass das Bild, was den Teilchen zugrunde liegt, nicht in der Flash-Umgebung zerschnitten wird, sondern durch Action-Script und Masken. Der Einfachheit halben nehmen wir ein attchMovie, da nachladbare Bilder hier nicht unbedingt zum Verständnis beitragen würden.

Das Kriterium, dass ich anlegen würde ist, dass der Code auch ohne Kommentare leicht verständlich ist, deswegen kann er auch ruhig kurz und knackig sein. Außerdem sollen alle möglichen Aufteilungen auf AS-Dateien, die included werden, erlaubt sein, da ich auch das für eine wichtige strukturelle Maßnahme halte.

Weiter mit der Diskussion

[secp]

also ich bring mal ein paar fakten

Ist nicht sehr leserlich, aber einfach.

_global.puzzle = function( target, picture, zeilen, spalten, depth) {
    this.tl = target;
    this.bild = picture;
    this.tiefe = depth;
    this.spalten = spalten;
    this.zeilen = zeilen;
}
 
o = puzzle.prototype;
 
o.init = function() {
    this.tmc = this.tl.createEmptyMovieClip("tiles_mc", this.tiefe);
    
    var m = this.tmc.attachMovie(this.bild, "testPic_mc", 1, {_x:0, _y:0});
 
    this.TileW = m._width/this.spalten;
    this.TileH = m._height/this.zeilen;
 
    this.bounds = m.getBounds(this.tmc);
 
    removeMovieClip(m);
    
    this.tmc._x = -this.bounds.xMin;
    this.tmc._y = -this.bounds.yMin;
    
    this.createTiles();
}
 
o.createTileMask = function(pic, maskX, maskY) {
    
    var m = pic.createEmptyMovieClip("TileMask_mc", 1);
    
    var x = 1;
    var y = 1;
    var w = this.tileW-1;
    var h = this.tileH-1;
    
    m.lineStyle(1,0,100);
    m.beginFill(0,60);
    m.moveTo(x,y);
    m.lineTo(w, y);
    m.lineTo(w,h);
    m.lineTo(x, h);
    m.lineTo(x, y);
    
    m._x = maskX;
    m._y = maskY;
    
    pic.setMask( m );
}
 
o.createTiles = function() {
    var m, t = 0;
    
    for(var i=0; i<this.zeilen; i++) {
        for(var j=0; j<this.spalten; j++) {
            
            m = this.tmc.attachMovie(this.bild, "pic_"+i + "_" + j, ++t);
 
            this.createTileMask(m, this.bounds.xMin+this.TileW*j, this.bounds.yMin+this.TileH*i );
 
        }
    }
} 

Den code hab ich nochmal geändert, jetzt muß das bild nicht auf 0,0 liegen und globla ist auch besser.

Müßte nur och eine drag&release routine dazu.

[k7c4]

Das sieht doch schon mal nicht schlecht aus und auch übersichtlich. Ist aber noch lange nicht fertig

Was auf jeden Fall noch fehlt, ist eine Methode, die das ganze durcheinander wirbelt, also shuffle(). Dann vielleicht noch eine checkWin()-Methode, die überprüft, ob das alles gelöst ist, zusammen mit dem Aufruf der onWin()-Event-Methode, die vom User bereit gestellt wird, etc.

Ich denke, es sollte schon ein komplett funktionierendes Spiel rauskommen, dass dann als Tutorial verwendet werden kann.

[k7c4]

Ich komme auch mal mit meinem rüber:

Ist auch noch nicht das leserlichste, aber wir wollen hier ja vielleicht auch einen Prozess aufzeigen.

Voraussetzung, dass das funktioniert ist eine Verknüpfung in der Library auf einem MovieClip, die "Bild" heisst.

// Namespace Puzzle
if(!Puzzle)
{
    _global.Puzzle = {}
    
    // class Puzzle.Puzzle
    // constructor
    Puzzle.Puzzle = function(lib_mx,x_count,y_count,grid_size,gap_size,shuffle_max)
    {
        this.$lib_mc$ = lib_mc
        this.$x_count$ = x_count
        this.$y_count$ = y_count 
        this.$grid_size$ = grid_size
        this.$gap_size$ = gap_size
        this.$shuffle_max$ = shuffle_max
        this.$next_shuffled$ = null
        this.$shuffle_count$ = 0
    }
    // inherit from MovieClip
    Puzzle.Puzzle.prototype.__proto__ = MovieClip.prototype
 
    // shuffle <count> times by swapping two tiles' positions
    Puzzle.Puzzle.prototype.shuffle = function(count)
    {
        var isMov, x, y, ran
 
        this.$shuffle_count$++
        if(this.$shuffle_max$ > this.$shuffle_count$)
        {
            do
            {
                nextMov = this.getRandomMoveable()
            }
            while(this.Tiles[nextMov.x][nextMov.y]==this.$next_shuffled$)
//      isMov = this.Tiles[nextMov.x][nextMov.y].isMoveable()
            this.move(nextMov.x,nextMov.y)
        }
    }
    
    // move one tile to specified x,y position (x,y are not pixels but 2dimensional coordinates in the tiles raster)
    Puzzle.Puzzle.prototype.move = function(x,y)
    {
        var temp_x, temp_y, temp
        
        temp_x = this.empty.x
        temp_y = this.empty.y
        
        this.Tiles[x][y].$curr_x = temp_x
        this.Tiles[x][y].$curr_y = temp_y
 
        this.empty.x = x
        this.empty.y = y
 
        this.$next_shuffled$ = this.Tiles[x][y]
        this.Tiles[x][y].dx = temp_x * (this.$grid_size$ + this.$gap_size$)
        this.Tiles[x][y].dy = temp_y * (this.$grid_size$ + this.$gap_size$)
        // defines, how the movement should take place (in this case through modified madokan wabber)
        this.Tiles[x][y].onEnterFrame = function ()
            {
                this.xpos = this._x
                this._x = this.wabber("xpos",this.dx,.2,.3,0,5)
                this.ypos = this._y
                this._y = this.wabber("ypos",this.dy,.2,.3,0,5)
                if(Math.abs(this._x - this.dx) < 1 && Math.abs(this._y - this.dy) < 1 )
                {
                    this.onEnterFrame = null
                    this._x = this.dx
                    this._y = this.dy
                    this._parent.shuffle()
                }
            }
        
        temp = this.Tiles[temp_x][temp_y]
        this.Tiles[temp_x][temp_y] = this.Tiles[x][y]
        this.Tiles[x][y] = temp
    }
    // 
    Puzzle.Puzzle.prototype.getRandomMoveable = function()
    {
            ran = Math.round(Math.random()) // (0 or 1) used for randomely choosing x or y diretion
            switch(ran)
            {
            case 0: // move horizontally
                if(this.empty.x == 0)
                {
                    x = 1
                }
                else
                if(this.empty.x == this.$x_count$ -1)
                {
                    x = this.$x_count$ - 2
                }
                else
                {
                    x = this.empty.x + Math.randomPosNeg()
                }
                y = this.empty.y
                break;
            case 1: // move vertically
                if(this.empty.y == 0)
                {
                    y = 1
                }
                else
                if(this.empty.y == this.$y_count$ -1)
                {
                    y = this.$y_count$ - 2
                }
                else
                {
                    y = this.empty.y + Math.randomPosNeg()
                }
                x = this.empty.x
                break;
            }
            return {x:x,y:y}
    }
 
    Puzzle.Puzzle.prototype.createTile = function(lib_mc,start_x,start_y,grid_size,gap_size)
    {
        var temp,depth
        depth = getNextDepth()
        temp = this.createEmptyMovieClip("Tile" + depth,depth)
        temp.stop()
        temp.__proto__ = new Puzzle.Tile(lib_mc,start_x,start_y,grid_size,gap_size)
        temp.isMoving = false
        temp.attachMovie(lib_mc,"Picture",1)
        temp.Picture._x = -start_x * grid_size + Math.round(Math.random() * 20) -10
        temp.Picture._y = -start_y * grid_size + Math.round(Math.random() * 20) -10
        temp._x = start_x * (grid_size+gap_size)
        temp._y = start_y * (grid_size+gap_size)
        temp.createEmptyMovieClip("Mask",2)
        temp.Mask.stop()
        with(temp.Mask)
        {
            beginFill(0x000000,100)
            drawRect(0,0, grid_size , grid_size)
            endFill()
        }
        temp.setMask(temp.Mask)
        return temp
    }
    // /class Puzzle.Puzzle
 
    // class Puzzle.Tile
    // constructor
    Puzzle.Tile = function(lib_mc,start_x,start_y,grid_size,gap_size)
    {
        this.$lib_mc$ = lib_mc
        this.$curr_x$ = this.$start_x$ = start_x
        this.$curr_y$ = this.$start_y$ = start_y
        this.$grid_size$ = grid_size
    }
 
    // inherit fromMovieClip
    Puzzle.Tile.prototype.__proto__ = MovieClip.prototype
 
    Puzzle.Tile.prototype.isMoveable = function()
    {
//    trace("isMoveable: " add this.$curr_x$ add " <==> " add this._parent.empty.x add " ||| " add this.$curr_y$ add " <==> " add this._parent.empty.y)
        return (Math.abs(this._parent.empty.x - this.$curr_x$) == 1 && this._parent.empty.y == this.$curr_y$) || (Math.abs(this._parent.empty.y - this.$curr_y$) == 1 && this._parent.empty.x == this.$curr_x$)  
    }
 
    // /class Puzzle.Tile
 
    Puzzle.createPuzzle = function(target_mc,lib_mc,x_count,y_count,grid_size,gap_size,shuffle_max)
    {
        if(typeof target_mc != "movieclip")
            return false
        var depth, temp, i, j
        depth = getNextDepth()
        temp = target_mc.createEmptyMovieClip("Puzzle" + depth,depth)
        temp.__proto__ = new Puzzle.Puzzle(lib_mc,x_count,y_count,grid_size,gap_size,shuffle_max)
 
        temp.empty = {x: x_count-1,y: y_count-1}
        temp.tiles = []
 
        for( i=0; i < x_count;i++)
        {
            temp.tiles[i] = []
            for( j=0; j < y_count;j++)
            {
                temp.tiles[i][j] = temp.createTile(lib_mc,i,j,grid_size,gap_size)
            }
            temp.tiles[x_count -1][y_count-1]._visible = false
        }
        return temp
    }
}
else
{
    debug("_global.Puzzle existiert schon");
}
// / Namespace Puzzle
 
// create one Puzzle with 4x4 Tiles into mc: _root, take Library-link "bild" as image template, each 20 pixels wide with 1 pixel gap between them. and shuffle 500 times
myPuzzle = Puzzle.createPuzzle(_root.dummy,"bild",4,4,20,1,500)
myPuzzle.shuffle()
stop()
 
// Hilfsmethoden
_global.getNextDepth = function(){return ++_global.$$nextDepth}
 
MovieClip.prototype.wabber=function(cp,ce,cv,cs,cc){
    cc = cc ? cc : Infinity
    return this[cp] += this["_d" add cp]= Math.max(-cc, Math.min(cc, this["_d" add cp] * cs + (ce - this[cp]) * cv))
};
 
MovieClip.prototype.drawRect = function(x,y,width,height)
{
    with(this)
    {
        moveTo(x,y)
        lineTo(x+width,y)
        lineTo(x+width,y+height)
        lineTo(x,y+height)
        lineTo(x,y)
    }
}; 

[bokel]

@k7c4 ... und ein MovieClip auf root namens dummy.

@secp .. bei dir muss es auch ein Symbol und einen mc
geben und ein Beispielcode wäre auch nicht schlecht,
so was wie

p = new puzzle( dummy, "BildSymbol", 2, 2, 1);
p.init(); 

mfg r.

[e2e4]

Edit: Ich meinte natürlich den Code von k7c4
ohne mir das jetzt wirklich angeschaut zu haben, würde ich behaupten wollen, das der ganze temp Kram in die Tile-Klasse gehört, da passieren mir zu viele Dinge die IMHO nicht in die Puzzle Klasse gehören, da sollte nicht mehr als ein new Tile(Param1...ParamX) stehen.