Moving ball

by jywglady

HTML

<!DOCTYPE html>
<html>

<head>
    <script src="https://unpkg.com/konva@3.3.3/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Game Test</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://bit.webduino.io/blockly/components/webduino-bit-module-mpu9250/BitMPU9250-blockly.js"></script>
    <script src="https://bit.webduino.io/blockly/components/webduino-bit-module-mpu9250/BitMPU9250.js"></script>
    <script
      src="https://bit.webduino.io/blockly/components/webduino-bit-module-led-matrix/BitLedMatrix-blockly.js"></script>
    <script src="https://bit.webduino.io/blockly/components/webduino-bit-module-led-matrix/BitLedMatrix.js"></script>
  
    <script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
    </script>
    <link rel="stylesheet" href="./game03.css">
</head>

<body>
    <h1>Gravity Game</h1>
    <p>Your mission is to shoot the ball into the red circle.</p>
    <p>According to Newton's mechanics theorem:</p>
    <p>Ball position at \(t = (v_xt, v_yt-\frac12gt^2)\)</p>
    <div id="container"></div>
    <p>
        Use your webduino bit to adjust speed and angle, button B to shoot or reset.
    </p>
    <br>
    <p>Designed by Jia-Yin Wang (Online...

CSS

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #f0f0f0;
}

p {
  text-align: center;
}

h1 {
  background: blue;
  color: white;
  padding: 12px;
  text-align: center;
}

#container {
  width: 800px;
  display: block;
  margin: 20px auto;
  background: lightgoldenrodyellow;
}

JavaScript

var value;
var buttonA;
var buttonB;
var mpu9250;
var matrix;
var range;
var mx;
var my;
var nowx;
var nowy;
var column;
var row;
var shootbut = false;

function Quantize(value) {
    value = Math.round(1 + 4.0 * (value + range) / (2 * range));
    if (value > 5) value = 5;
    if (value < 1) value = 1;
    return value;
}

boardReady({ board: 'Bit', device: 'bit77730e', transport: 'mqtt', multi: true }, async function (board) {
    board.samplingInterval = 100;
    buttonA = getPullupButton(board, 35);
    buttonB = getPullupButton(board, 27);
    mpu9250 = getMPU9250(board);
    matrix = getMatrix(board, 4, 25);
    mx = 0;
    my = 180;
    nowx = 0;
    nowy = 180;
    range = 30;
    buttonA.on('pressed', async function () {
        await delay(0.1);
        mx = nowx;
        my = nowy;
    });
    buttonB.on('pressed', async function () {
        if (life>0) shoot();
        else reset();
    });
    mpu9250.on(webduino.module.MPU9250Event.ANGLE_MESSAGE, async function () {
        nowx = Math.round(mpu9250.angVals[1]);
        nowy = Math.round(mpu9250.angVals[0]);
        if (nowy < -90) nowy = nowy + 360;
        var dx = nowx - mx;
        var dy = nowy - my;
        var flag = 0;
        column = Quantize(dx);
        row = Quantize(dy);
        matrix.off();
        matrix.setColor((((row - 1) * 5 + column) - 1), '#ff0000');
        if (!shooting && angle + column - 3 < 86 && angle + column - 3 > 14) {
            angle += column - 3;
            canontube.rotation(-angle);
            flag = 1;
        }
        if (!shooting && row != 3) { speed += row - 3; flag = 1; }
        if (flag) {
            updatePara();
            baselayer.draw();
        }
    });
});

var width = 800;
var height = 470;
var speed;
var angle;
var shooting = false;
var angleadd = 0;
var speedadd = 0;
var targetr = 30;
var ballr = 10;
var baser = 80;
var gravity = 9.8;
var life = 3;
var basecenter = { x: 30, y: 480 };
var tubedim = { len: 40, r: 10 };
var trace = 1;
var...