Moving ball

by jywglady

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Moving Ball</title>
  <script src="https://bit.webduino.io/blockly/components/jquery/dist/jquery.min.js"></script>
  <script src="https://bit.webduino.io/blockly/dist/lib/webduino-all.min.js"></script>
  <script src="https://bit.webduino.io/blockly/dist/MessageTransport.min.js"></script>
  <script src="https://bit.webduino.io/blockly/dist/webduino-blockly.min.js"></script>
  <script src="https://bit.webduino.io/blockly/dist/lib/firebase.min.js"></script>
  <script src="https://bit.webduino.io/blockly/dist/lib/runtime.min.js"></script>
  <script src="https://bit.webduino.io/blockly/components/webduino-bit-module-button/BitButton.js"></script>
  <script src="https://bit.webduino.io/blockly/components/webduino-bit-module-button/BitButton-blockly.js"></script>
  <script src="https://unpkg.com/konva@3.4.1/konva.min.js"></script>
</head>
<body>
  <div id="container"></div>
  <button onclick="toLeft()">← To Left</button>
  <button onclick="stopBall()">stop</button>
  <button onclick="toRight()">To Right → </button>
</body>
</html>

CSS

#container {
    width: 600px;
    height: 200px;
    border: solid blue 1px;
    margin: 0 auto;
}

body {
    text-align: center;
}

JavaScript

var width = 600;
var height = 200;

var buttons = 0;

boardReady({board: 'Bit', device: 'bit77730e', transport: 'mqtt'}, function (board) {
  board.samplingInterval = 250;
  btnA = getPullupButton(board, 35);
  btnB = getPullupButton(board, 27);
  btnA.on('pressed', function () { 
  	buttons += 1; 
    if (buttons == 1) { toLeft(); }
    else { stopBall(); }
  });
  btnB.on('pressed', function () { 
  	buttons += 2; 
    if (buttons == 2) { toRight(); }
    else { stopBall(); }
  });
  btnA.on('released', function () { buttons -= 1; });
  btnB.on('released', function () { buttons -= 2; });
});

var stage = new Konva.Stage( {
  container: 'container',
  width: width,
  height: height
});

var layer = new Konva.Layer();

var ball = new Konva.Circle({
  x: width/2,
  y: height/2,
  radius:30,
  fill:'blue'
});

layer.add(ball);
stage.add(layer);

var dir = 0;
var speed = 200; // pixels per second

var aniBall = new Konva.Animation(function(frame){
  if (dir != 0) {
    ball.move({x: dir*speed*frame.timeDiff/1000, y:0});
    if(ball.x() >= width) {
      aniBall.stop()
      dir = 0;
      ball.x(width);
    }
    if(ball.x() <= 0) {
      aniBall.stop()
      dir = 0;
      ball.x(0);
    }
  }
}, layer);

function toRight() {
  dir = 1;
  aniBall.start();
}

function toLeft() {
  dir = -1;
  aniBall.start();
}

function stopBall() {
    dir = 0;
  aniBall.stop();
}