ACTIONCODERZ: GAME EDIT | NEW

## ACTIONCODERZ [...]

## ACTIONCODERZ [|||]

Welcome to the actioncoding-gaming platform. Coding is here key and not banned and stuffed in exes. Solve problems by coding: Toggle comments in the running code!

###

Games: Monday Morning in Europe | Der Weg des Atomkraftwerkes | In der Demoscene
^ SHARE

## SOLVE THE WEEKLY TASK!

Easy not?
HERE
[ TOGGLE COMMENT ]
MOVE & COMMENT: [ CURSORS ] or [ MOUSE ] or [ TOUCH CONTROL ]

### Inspiration [...]

### Inspiration [|||]

...
[QRCODE]

## EDIT GAME & LEVELCODE

You are in the create and edit zone. Code your own action coding puzzles (for your friends hahah)! But be aware this is an dev-tool. Code code!
[ COMPILE & RUN > ]
[ ^ SHARE ]
// directcode // codeStoryShow(); // codePlayerShow(); // codeStoryHide(); // codePlayerHide(); function getTitle() { return 'DAY AFTER'; } function getStory() { return 'What the fuck? The display was frozen!'; } function drawAfter() { // circle(100,100,50) // circle(100,100,50*ccVM.executor) // circle(100,100,50*ccVM.coder) // codeX += 0.5; codeX = width/2; codeY = 20; stdoutX = 10; } // playercode function start() { var a=5; cprint("start here"); } // file:sperat function update() { // oh god ... // cclear(); cprint("hello"); a=0; /**///cprint("default"); if (a==5) { print("hello"); } }
TOOLS: [ CLEAR ]
[ DOCU / EXAMPLES ]
[ OUTPUT / PARSING ]
...
[ GAME | MULTIPLE LEVELS ]

##### [ GAME ]

ActionCoderZ is a game, that mixes front end and code directly. It is a play/puzzle with this mix. It ends the split between code and exe. Vars can now be meaningful.

##### [ GAMES/PUZZLE ]

Enjoy to bring all your knowhow about coding, debugging, fails and failures as a background for creating here puzzles. It is coding for code-game-puzzles.

##### [ INFRASTRUCTURE ]

The Game-ActionCoderZ is based on Javascript and p5JS >. The game uses an own virtual machine, called ActionCodingVirtualMachine: ACVM.

##### [ GAME&LEVELEDITOR ]

The game/leveleditor is just a texteditor. Here you can write and define in javascript your game/level. Than you can compile it and test ist out.Use picture/sound etc as external ressources (URLs).

##### [ PROCESS ]

The gameengine takes the sourcecode and splits it by levels. than parses it to get the structure (flow: if etc). seperate compiled functions and interpreted functions (visible). after this flats the code again (ccVM.tmpArrCodeObjectsFlated ). And than starts to execute with init() > start() > update()

##### [ MINIMAL GAME ]

The minimal game consist of just one tag and one function.

    // playercode

    function start() {
       cprintln("start (1x)");
    }

    function update() {
       cprintln("hello world (repetativly)");
    }

Variables
use var not let!

    var b = 0;

    // playercode

    function start() {
       cprintln("b: "+b);
    }

    function update() {
       b++;
       cprintln("b: "+b);
    }

Before // playercode you can place normal javascript code. After editorcode there is the code in the gameeditor. There you can toggle/comment code in the game! Default: the commands will be interpretated step by step in the VirtualMachine.

##### [ FLOW CONTROL ]

You can only use a restricted set of flow control in the // playercode-zone.
This are:
- functions
- ifs
- whiles

    // playercode

    function update() {
       var a=0;
       if (a==0) {
       }
       while (a==0) {

       }
       uhh();
    }
    function uhh() {
      cprint("ohh");
    }

##### [ COMMANDS ]

There are a lot of very basics commands. Here some commands.

    cclear(); // clears stdout
    cprint("hello"); // printing to the stdout-display
    cprintln("world"); // printingline to the stdout-display

    // overlay message (simple)
    // show
    msg("HELLO");
    // remove
    msg("");

    // gameover or won
    // you can define message bfore with msg('xyz')
    // game over
    gameOver();
    // won
    gameWon()
    // enable restart
    // waits some time - with toggle you can restart
    enablePlayerRestart();
    // draw routine (overwrite if need)
    // function drawPlayerRestart() {}

    // control interpeters speed
    ccVM.executorSpeed = 0; // fastest
    ccVM.executorSpeed = 1; // fast
    ccVM.executorSpeed = 30; // slow

    // pause the execution
    executorPause();
    executorResume();
    // position of the executor (dont change)
    ccVM.executor = 5

    // find / change source codes
    var so = ccVM.getSourceObjectAt(ccVM.coder);
    cprintln("oooo "+so.sourceCode);
    so.sourceCode="// ohhh ";
    // * setSourceCode() // auto update for compiled

    // coder - can be changed manually (planar)
    ccVM.coder

Extremly Dangerous: It is dark spaghetti code time - the goto(4) code or the relative version jmp(-3). And yes even java or javascript has it: goto label. Here we have the even darker one: jump to code line. Enable editorLineNumberType='number'. Only works in non-compiled playercode. Use it only on the same hierarchy!

    var pos = executorPos();

Cursor control and position

    // cursor position
    var pos = pcursorPos();

    // move coder/cursor to
    pcursorTo(50)
    // cursor relative
    pcursor(-1);

    // show a page
    setCursorPage(4)

##### [ CURSOR-EVENTS IN PLAYERCODE ]

There is also the possibility to work with events on the player cursors like enter a line, stay on a line, action/click on a line, hold key/mousebutton pressed. This is only possible in this vm and can lead to extremly interactive sourcecode. the dangerous code .-)

    // special tags for cursor events

    //! thisWillbeExecutedIfThePlayerCursorIsHere();

    //! if (ph) thisWillBeExecutedOnEnterLine();

    //! if (pa) pressedToggleActions();
    //! if (pas) stayOnToggleAction();

##### [ LEVELEDITOR TAGS ]

There are some tags you can use to define the levels.
With /**/ in front of a line, this line can't be changed by the player in the playereditor. With /*b*/ and /*f*/ you can hide code.

    /**/ // alwaysCommented();
    /**/ alwaysThere();

    /*b*/ censoredLine();
    /*f*/ showIfCoderIsNear();

If you want to have more pages. This can also be a good thing for leveldesign than you can use // nextpage. This splists source-code pages in the playereditor.

    // playercode

       // page 1
    // nexpage
       // page 2
    // nexpage
       // page 3

    // jump to page setCursorPage(4)

You can also disable pages for displaying/interacting*: "no access".

    function init() {
      console.log("init");
      var pob = ccVM.getEditorPage( 1 );
      if (pob!=null) {
        pob.visible = false;
      }
    }

These are the most simple tags to use in the gameeditor. There are also two more importants: /*c*/ and // nextlevel. The will be explained later.

##### [ COMPILED FUNCTIONS - drawAfter() ++ ]

You can also use compiled functions in the non-player-code-zone (and even in the playereditorzone /*c*/).
Before the "// playercode" you can use default javascript and overwrite existing scripts of the VirtualMachine. The first called regular function is init(). But you can also use javascript at all.

    // compiled javascript

    // first called function
    function init() {
     cprint("wake up ghost now! (1x)");
    }

    alert('yes here');
    function hallo() {
    }

    // clear background
    function drawClear() { fill(255,255,0,100); rect(0,0,width, height); }

    // playercode

    function update() {

    }

But there is more. The VirtualMachine uses also compiled functions. The whole game will be processed in the background in a P5js draw routine and will be painted on canvas 50times a second. The used function is draw().
There is now a function that will be called before and after this draw(): drawBefore() and drawAfter(). And you can overwrite this in the "// playercode"-area. You can paint there or mange objects and and and.

    // compiled javascript

    function init() {

    }

    // playercode- and stdout-
    // position
    codeX = width/2;
    codeY = 20;
    // function renderPlayerEditorBefore() { push(); rotate(45); }
    // function renderPlayerEditorBefore() { pop() };
    stdoutX = 0;
    stdoutY = 20;

    // editor add ons
    // show stats (size)
    displayStats = true;
    // getPlayerCodeSize() // get size of the code

    // display detail of a line (focus)
    displayCodeLine = true;

    // overblend whole scene (stdout/editor)
    function drawAfter() {
       circle(with/2,height/2,random(0,100));
    }

    // playercode

    function update() {

    }

You can also have compiled code in the // playercode. This works with the tag /*c*/ for compiled. Just put this before a function in the // visual-code-zone. if the player changes something. it will be automaticly be compiled.

    // playercode

    function update() {

    }

    // compiled function in the editorcode
    /*c*/function drawAfter() {
       // paint something
       // p5js canvas is width wide and height heigh.
       // for fill/stroke etc > p5js
       rect(with/2,height/2,random(0,100),random(0,100));
    }

You can also organize, paint and interact with it.

    var arrObjs = [];
    class Obj {
      this.constructor(x,y) {
        this.x = x;
        this.y = y;
      }

    }
    for (var z=0;z<40;z++) {
      var o = new Obj(random(0,width),random(0,height));
      arrObjs.push( o );
    }

    // playercode

    function update() {
       for (var z=0;z < arrObjs.length;z++) {
           var obj = arrObjs[z];
           obj.x += 5;
        }
    }

    // compiled function in the editorcode
    /*c*/function drawAfter() {
        for (var z=0;z < arrObjs.length;z++) {
           var obj = arrObjs[z];
           rect(obj.x,obj.y,5,5);
        }

    }

##### [ MOST IMPORTANT FUNCTIONS* ]

There are a lot of functions - also because you can directly use the gameengine/vm and p5js.

    // resize the vm-player
    resizeCanvas(with,200)

    // control playereditor
    editorFontSize = 10;
    codeX = 100;
    codeWidth = 50;

    // control sdtoutput
    stdoutX = 100
    stdoutY = 50

    // enable stats
    displayStats = true;

    // enable code line detail view
    // displayCodeLine = true;

    // control toggle interaction
    playerEditorInteraction = false;

    // control playereditor

    // control toggle
    function toggleBefore() {}
    function toggleCommentDo() { return true; } // false if you forbid toggle
    function toggleAfter() {}

##### [ WASDR JOYSTICK ]

There is a simple controller for console implemented: WASDR

    // all 4 directions + fire

    if (kw) { doKeyW(); }
    if (ka) { doKeyA();}
    if (ks) { doKeyS();}
    if (kd) { doKeyD();}
    if (kr) { doKeyR();}

##### [ TITLE OF A LEVEL/GAME ]

First you can define the title, story and/or after.

    [TITLE(html)]
    [STORY(html)]
    [GAMEENGINE]
    [HOOK(html)]

The functions for this.

    // default will be called on start
    function getTitle() { return 'LGAME'; }
    function getStory() { return 'My game ... '; }

    // change on runtime
    setTitle("Random place");
    setStory("<img src='abc.png'>");
    setHook("ZZZZ");

Of course you can use the story-html also to tell story, use html-input etc.

##### [ MULTILEVEL GAMES ]

Of course you can create multlevel games. To split the levels use "// next level".

     // level1

     // playercode

     function update() {
       println("level2");
     }

    // nextlevel

     // level2

     // playercode

     function update() {
       println("level2");
     }

     // [...]

The functions for control the levels:

     nextLevel();
     jumpToLevel(4);

##### [ CHANGE PLAYER-SOURCE-CODE ]

You can also change the commentable source code. Then you can use the SourceCode also as a playfield with breakpoint-bombs+.

     // go through all lines (ex. drawAfter())

      // flatted code objects
      for (var t=0;t < ccVM.tmpArrCodeObjectsFlated.length;t++) {
         var scobj = ccVM.tmpArrCodeObjectsFlated[t];
         if (scobj.sourceCode.indexOf("bomb")!=-1) {
            scobj.sourceCode = "// explosion";
         }
      }

Simple changes for the executor/exe direct:

      // get player code line
      var lo = getPlayerCode( index );
      lo.commented = !lo.commented;
      lo.canBeToggled = false;

     setPlayerCode( 1, "// abc()" );  // relative -1,0,1,2,4
      spc(5,"// synonym ");
      setPlayerCodeAt( 40, "// hmmm " ); // at line ...
      spcat(10,"// synonym ");

Simple change relative to the coder:

      setPlayerCodeCoder( 1, "// abc()" );  // relative -1,0,1,2,4
      spcc(5,"// synonym ");

If you want to overwrite/add a compiled function ad hoc (in execution), than you can use "eval('')" of course, write it directly in the interpretated code function xy() { } or more VM-secure:

      // overwrite compiled function or eval any js-expression
      ocf(" function xyz() { } ";

insertPlayerCode()*
setPlayerCode() // evtl. changePlayerCode
deletePlayerCode()*
* not yet implemented but planed.

##### [ EXTERNAL LIBRARIES ]

First you can define the title, story and/or after.
Libraries included:
- jquery
If you want to include other libraries. You can do inc. But it is clear it is a risk .-)

    function start() {
    inc("https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.js");
    }

if you enabled you can get website contents to the stdout. attention: this is quite dangerous for spaming etc.
// enabling getwebsite.txt > getwebsite.php

    // get website content
    // you have to wait for the output
    // output is in var website
    getWebsite( url )
    if (stdout!="") {
      while (website=="") {
      }
      if (stdout.indexOf("restricted")!=-1) {
         cprintln(website);
      } else {
         cprintln("restricted");
      }
    }

##### [ TIPPS - HOW TO CREATE LEVELS* ]

...