blockly games

Sudhina Sidheek

unread,

Jun 19, 2018, 12:28:42 AM6/19/18

to Blockly

Hello,

i want to make a game with blockly. But doesnt know the connection code of blockly blocks and the object that wants to move. please anyone give me the movement code for objects with blockly.

Thank You!

picklesrus

unread,

Jun 19, 2018, 11:51:34 AM6/19/18

to Blockly

Hi,

Do you specifically mean https://blockly-games.appspot.com/? The code for that is open source and lives here: https://github.com/google/blockly-games

-picklesrus

Sudhina Sidheek

unread,

Jun 20, 2018, 1:31:32 AM6/20/18

to Blockly

HI.

Thanks for your rply.but i already checked that..i didnt want to make exact maze game..i just need that connection code_for eg:

if i dragged a block(move forward) to the workspace the object that present in the canvas must move in the forward direction..i just need that connection code.please give me suggestions.

Thank You!

picklesrus

unread,

Jun 20, 2018, 12:08:09 PM6/20/18

to Blockly

Hi,

Oh. Got it. If you're looking to detect changes on the workspace, and react accordingly, you probably want to start listening for events. Here's the documentation link: https://developers.google.com/blockly/guides/configure/web/events. There are a couple of demos that use events in the demos directory in the code. The mirror demo is one example: https://github.com/google/blockly/tree/master/demos/mirror

-picklesrus

Sudhina Sidheek

unread,

Jun 21, 2018, 1:37:39 AM6/21/18

to Blockly

HI.
Thanks for your reply.But sorry this is not_ what i want sir (This is a demo of a first blockly instance that controls a second blockly instance with events ) .i want to make a game using

blockly with "canvas".i want the connection code with blocks and canvas objects.

using "move forward block i want to make move an object for eg:ball. kindly waiting for your reply.

Thank You!

picklesrus

unread,

Jun 21, 2018, 10:23:03 AM6/21/18

to Blockly

You have to write the code to do what you want with the canvas. Blockly only provides the mechanism to create a blocks, generate code from those blocks, and the editor itself. We do not provide a runtime. You need to define your move block generator to a call into code that you write to manipulate your canvas.

Using the Blockly games maze move forward block as an example, here's where it does most of these things:

Here is the block definition: https://github.com/google/blockly-games/blob/master/appengine/maze/js/blocks.js#L60

Here is the code that the block generates: https://github.com/google/blockly-games/blob/master/appengine/maze/js/blocks.js#L76

Here is where the move forward block is hooked up to the js interpreter: https://github.com/google/blockly-games/blob/master/appengine/maze/js/maze.js#L990

Here is the definition of the moveForward function that actually manipulates the pegman graphic: https://github.com/google/blockly-games/blob/master/appengine/maze/js/maze.js#L1444

-picklesrus

Sudhina Sidheek

unread,

Jun 27, 2018, 1:55:04 AM6/27/18

to Blockly

Hi,

Thank you sir for ur reply. This is the code for moving forward in canvas.

function moveright() {

        myGamePiece.speedX = 1; 
    }                           
AND THIS IS MY FULL CODE:I DONT KNOW HOW TO CALL THE MOVING CODES TO BLOCKLY.
<body onload="startGame()">
    <script>
    
    var myGamePiece;
    
    function startGame() {
        myGamePiece = new component(30, 30, "https://i.pinimg.com/originals/4e/5c/f7/4e5cf7d4ccb9c59b6620a9c71944d51e.png", 10, 120, "image");
        myGameArea.start();
    }
    
    var myGameArea = {
        canvas : document.createElement("canvas"),
        start : function() {
            this.canvas.width = 480;
            this.canvas.height = 270;
            this.context = this.canvas.getContext("2d");
            document.body.insertBefore(this.canvas, document.body.childNodes[0]);
            this.frameNo = 0;
            this.interval = setInterval(updateGameArea, 20);
            },
        clear : function() {
            this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
        },
        stop : function() {
            clearInterval(this.interval);
        }
    }
    
    function component(width, height, color, x, y, type) {
        this.type = type;
        if (type == "image") {
            this.image = new Image();
            this.image.src = color;
        }
        this.width = width;
        this.height = height;
        this.speedX = 0;
        this.speedY = 0;    
        this.x = x;
        this.y = y;    
        this.update = function() {
            ctx = myGameArea.context;
            if (type == "image") {
                ctx.drawImage(this.image, 
                    this.x, 
                    this.y,
                    this.width, this.height);
            } else {
                ctx.fillStyle = color;
                ctx.fillRect(this.x, this.y, this.width, this.height);
            }
        }
        this.newPos = function() {
            this.x += this.speedX;
            this.y += this.speedY;        
        }
    }
    
    function updateGameArea() {
        myGameArea.clear();
        myGamePiece.newPos();
        myGamePiece.update();
    }
    
    function moveup() {
        myGamePiece.speedY = -1; 
    }
    
    function movedown() {
        myGamePiece.speedY = 1; 
    }
    
    function moveleft() {
        myGamePiece.speedX = -1; 
    }
    
    function moveright() {
        myGamePiece.speedX = 1; 
    }
    
    function clearmove() {
        myGamePiece.speedX = 0; 
        myGamePiece.speedY = 0; 
    }
    </script>
    
    <div style="text-align:center;width:480px;">
      <button onmousedown="moveup()" onmouseup="clearmove()" ontouchstart="moveup()">UP</button><br><br>
      <button onmousedown="moveleft()" onmouseup="clearmove()" ontouchstart="moveleft()">LEFT</button>
      <button onmousedown="moveright()" onmouseup="clearmove()" ontouchstart="moveright()">RIGHT</button><br><br>
      <button onmousedown="movedown()" onmouseup="clearmove()" ontouchstart="movedown()">DOWN</button>
      <button id="bt1" onclick="startGame()">RunS</button>
    </div>
    <div class="row">
      <!-- Blockly -->
      <div id="blocklyDiv" class="col s5" style="height: 600px; width: 560px; left: 500px;top: 139px; position: absolute; padding: 0; margin: 0;"></div>
      <div id="game-canvas" class="col s5 offset-s6" style="margin: 0;"></div>
    </div>

    <!-- Blockly Toolbox Config -->
    <xml id="toolbox" style="display: none">
      <block type="move_backward"></block>
      <block type="move_backward"></block>
      <block type="move_backward"></block>
      <block type="move_backward"></block>
      <block type="move_forward"></block>
      <block type="move_forward"></block>
      <block type="move_forward"></block>
      <block type="move_forward"></block>
      <block type="move_backward"></block>
    </xml>

   

      <script>
        var workspacePlayground = Blockly.inject('blocklyDiv',
            {toolbox: document.getElementById('toolbox')});
      </script>
    
    PLEASE SIR, KINDLY WAITING FOR YOUR FURTHER SUGGESTIONS.
                                                          Thank You!

picklesrus

unread,

Jun 27, 2018, 6:15:25 PM6/27/18

to Blockly

I believe you're missing the step where you turn your blocks into code. We use generators to turn blocks into code and then run it.

I'd take a look at our code lab, specifically steps 8 & 9 (generate javascript code and run javascript code) https://codelabs.developers.google.com/codelabs/blockly-web/index.html?index=..%2F..%2Findex#7 since that seems to be what you're missing.

Taking the moveForward example from blockly games in my previous reply in a bit more detail:

the block's generator (link to code in github is in my previous reply) is below. Notice how it returns a string which is essentially a call to the move forward function. The string will end up being something like "moveForward(block_id_1234);". You'll want yours to generate something like "moveup();"

Blockly.JavaScript['maze_moveForward'] = function(block) { 
  // Generate JavaScript for moving forward. 
  return 'moveForward(\'block_id_' + block.id + '\');\n';
};

-picklesrus

Sudhina Sidheek

unread,

Jun 28, 2018, 2:39:23 AM6/28/18

to Blockly

Hi,

Thank You so much sir for your reply.

sir my code for blocks generating is here below

// Move Forward
Blockly.Blocks['move_forward'] = {
  init: function() {
    //this.appendValueInput("move_forward")
      //  .setCheck("Number")
        //.appendField("move_forward");
    this.setInputsInline(true);
    this.setPreviousStatement(true, null);
    this.setColour(285);
    this.setTooltip("Specify Distance in Pixels");
    this.setHelpUrl("");
  }
};


Blockly.JavaScript['move_forward'] = function(block) {  
 var value_move_forward = Blockly.JavaScript.valueToCode(block, 'move_forward', Blockly.JavaScript.ORDER_ATOMIC);
  var code = ' moveright();\n' ;
  return code;
};

Blockly.Blocks['move_backward'] = {
  init: function() {                                                                                                                          
    this.appendValueInput("move_backward")
        .setCheck("Number")
        .appendField("move_backward");          
    this.setInputsInline(true);
    this.setPreviousStatement(true, null);
    this.setColour(285);                                                                               
    this.setTooltip("Specify Distance in Pixels");
    this.setHelpUrl("");
  }
};


Blockly.JavaScript['move_backward'] = function(block) {
  var value_move_backward = Blockly.JavaScript.valueToCode(block, 'move_backward', Blockly.JavaScript.ORDER_ATOMIC);
  return 'moveup()(\'move_backward_' + move_backward + '\');\n';

AND MY CODE FOR MOVING AN OBJECT IS: BELOW

function moveup() {
        myGamePiece.speedY = -1; 
    }

AND I TRIED TO CONNECT BLOCKS AND CANVAS FUNCTION BY CALLING LIKE THIS:

Blockly.JavaScript['move_forward'] = function(block) {  
 var value_move_forward = Blockly.JavaScript.valueToCode(block, 'move_forward', Blockly.JavaScript.ORDER_ATOMIC);
  var code = ' moveright();\n' ;
  return code;
};

BUT IT DIDNT WRKING..

I WILL ATTACH MY SCREENSHOTS HERE.

THANK YOU SO MUCH SIR FOR UR REPLY AND KINDLY WAITING FOR UR FURTHER SUGGESTIONS .

THANK YOU!

picklesrus

unread,

Jun 28, 2018, 3:01:00 PM6/28/18

to Blockly

Hi,

It looks like you're making progress on the generators! The one for the move forward block is what I expected to see.

Are you doing something equivalent to step 9 from the code lab? Are you calling workspaceToCode anywhere? I would verify that the string of javascript you get from calling workspaceToCode is what you want. i.e. if you have just a move Forward block on the workspace, workspaceToCode returns you 'moveup();'

Also, when are you actually executing the javascript? Are you using eval? or the javascript interpreter? If these questions are confusing, try re-reading step 9 from the code lab and https://developers.google.com/blockly/guides/app-integration/running-javascript

-picklesrus

Sudhina Sidheek

unread,

Jun 29, 2018, 3:14:52 AM6/29/18

to Blockly

Hi,

Thank you so much sir for your valuable reply.

here is the code:

Blockly.JavaScript['move_backward'] = function(block) {
  var value_move_backward = Blockly.JavaScript.valueToCode(block, 'move_backward', Blockly.JavaScript.ORDER_ATOMIC);
  return 'moveup()(\'move_backward_' + move_backward + '\');\n';

  //var code = ' myGamePiece.speedX(' + value_move_backward + ');\n';
  //return code;
};
Blockly.JavaScript['move_backward'] = function(block) {
  var value = '\'' + block.getFieldValue('VALUE') + '\'';
  return 'myGamePiece.speedY (' + value + ');\n';
};

i didnt get any output..there is no change in the page.

sir, i want to make move that smiley object to right,left,back,up and down while placing the corresponding move left ,move right etc blocks.so for this i need the code please give your suggestions.Thank you sir

Thank You!

Erik Pasternak

unread,

Jun 29, 2018, 4:52:06 PM6/29/18

to Blockly

Hi Sudhina,

You should capture the code that is being returned when you call workspaceToCode and compare it to the code you would write by hand. There's a couple errors in the generated code in your snippet and there might be more when you look closer at the output vs what you'd expect. An easy way to work through it would be to make a project with one of each block, generate the code, then copy + paste the generated code into your runtime to see what happens (once you've fixed the obvious bugs).

For example: return 'moveup()(\'move_backward_' + move_backward + '\');\n'; This would return "moveup()('move_backward_undefined');\n". value_move_backward is defined, but move_backward isn't.

Also, Blockly.JavaScript['move_backward'] is defined twice. Only the last one to be defined will actually be used.

Cheers,

Erik

Sudhina Sidheek

unread,

Jul 2, 2018, 2:08:48 AM7/2/18

to Blockly

Hi Eric,

Thank you for your reply. i just made change in the block definition,like made new blocks just move forward and move backwardwithout any connections.

i just want to make move my smiley image after placing move forward block to move right and placing backward block wants to move left.i dnt know the connection code what i call in custom js and also in index page where calling the xml blockly code.

HERE AM ATTACHING THE SCREENSHOTS AND CODES.

THIS IS THE MAIN CODE HAVING AN SMILEY OBJECT WITH IN A CANVAS.

    function moveup() {
        myGamePiece.speedY = -1; 
    }
    

    function movedown() {
        myGamePiece.speedY = 1; 
    }
    
    function moveleft() {
        myGamePiece.speedX = -1; 
    }
    
    function moveright() {
        myGamePiece.speedX = 1; 
    }
    
    function clearmove() {
        myGamePiece.speedX = 0; 
        myGamePiece.speedY = 0; 
    }
    </script>

AND ALSO BELOW THERE IS A CODE FOR ATTACHING BLOCKLY IN THE SAME PAGE..

 <div id="blocklyDiv" class="col s5" style="height: 600px; width: 560px; left: 500px;top: 139px; position: absolute; padding: 0; margin: 0;"></div>
      <div id="game-canvas" class="col s5 offset-s6" style="margin: 0;"></div>
    </div>

    <!-- Blockly Toolbox Config -->
    <xml id="toolbox" style="display: none">

      <block type="backward"></block>
      <block type="forward"></block>
      <block type="backward"></block>
      <block type="forward"></block>
      <block type="backward"></block>
      <block type="forward"></block>

     
    </xml>

     <script>
        var workspacePlayground = Blockly.inject('blocklyDiv',
            {toolbox: document.getElementById('toolbox')});

            var code = Blockly.JavaScript.workspaceToCode(workspace);
            function myUpdateFunction(event) {
  var code = Blockly.JavaScript.workspaceToCode(workspace);
  document.getElementById('textarea').value = code;
}
workspace.addChangeListener(myUpdateFunction);


Blockly.JavaScript.addReservedWords('code');
var code = Blockly.JavaScript.workspaceToCode(moveup());
try {
  eval(code);
} catch (e) {
  alert(e);
}


function handlePlay(event) {


  loadWorkspace(event.target);
  Blockly.JavaScript.addReservedWords('code');
  var code = Blockly.JavaScript.workspaceToCode(
      Blockly.getMainWorkspace());
  code += 'moveup();'
  try {
    eval(code);
  } catch (error) {
    console.log(error);
  }
}

      </script>
    
    </body>
    </html>

KINDLY WAITING FOR YOUR RESPONSE..

THANK YOU SIR!

JJHJHJKK

Erik Pasternak

unread,

Jul 2, 2018, 1:49:10 PM7/2/18

to Blockly

I'm not sure what your question is. Are you asking how to add connections on your blocks? If so, you should read the creating blocks developer docs. They cover all the details about how to make your own blocks.

--
You received this message because you are subscribed to a topic in the Google Groups "Blockly" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/blockly/6HOKFviygbc/unsubscribe.
To unsubscribe from this group and all its topics, send an email to blockly+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Erik Pasternak | Master of the House | epas...@google.com

picklesrus

unread,

Jul 2, 2018, 2:37:03 PM7/2/18

to Blockly

Hi,

I believe nothing is happening in your code because your callbacks aren't doing what you think. You have a call to workspace.addChangeListener, but your myUpdateFunction only sets the value of the text area to the code. If the code in that text area is what you expect and changes as you add/remove/edit your workspace, I think your problem is the location of your call to eval. In your code it looks like it is just floating there. Every time you want your code to execute, you need to call workspaceToCode to get the most up to date version of what is on the workspace and then call eval to actually run it.

Here are two examples of what I mean:

The generator demo does that on a button click: https://github.com/google/blockly/blob/master/demos/generator/index.html#L132

The graph demo does this on any workspace update: https://github.com/google/blockly/blob/master/demos/graph/index.html and

-picklesrus

Reply all

Reply to author

Forward