ACTIONCODERZ: GAME EDIT | NEW

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

MOVE & COMMENT: [ CURSORS ] or [ MOUSE ] or [ TOUCH CONTROL ]

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 ]

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* ]

...

ACTIONCODERZ [...]