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 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>
        Speed: <button onmousedown="adjustAngleAndSpeed(0,1)" onmouseup="setAngleAndSpeed()">+</button>
        <button onmousedown="adjustAngleAndSpeed(0,-1)" onmouseup="setAngleAndSpeed()">-</button>&nbsp;&nbsp;&nbsp;
        Angle: <button onmousedown="adjustAngleAndSpeed(1,0)" onmouseup="setAngleAndSpeed()">+</button>
        <button onmousedown="adjustAngleAndSpeed(-1,0)" onmouseup="setAngleAndSpeed()">-</button>&nbsp;&nbsp;&nbsp;
        <button onmouseup="shoot()">Shoot</button>
        <button onmouseup="reset()">Reset</button>
    </p>
    <br>
    <p>Designed by Jia-Yin Wang (Online Calculation: <a href="https://instacalc.com/52844" target="_blank">Click here</a>)</p>
    <script src="game03.js"></script>
</body>

</html>

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 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 shooting = false;

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

var baselayer = new Konva.Layer();
var tracelayer = new Konva.Layer();

var showtext = new Konva.Text({
    x: 30,
    y: 30,
    lineHeight: 1.28,
    fontSize: 22,
    fontFamily: 'Calibri',
    fill: 'blue'
});

var result = new Konva.Text({
    text: '',
    fontSize: 60,
    fontFamily: 'Calibri',
    fill: 'red',
    align: 'center'
});

var hintHText = new Konva.Text({
    text: '',
    fontSize: 18,
    fontFamily: 'Calibri',
    fill: 'gray',
    align: 'center'
});

var hintVText = new Konva.Text({
    text: '',
    fontSize: 18,
    fontFamily: 'Calibri',
    fill: 'gray'
});

var target = new Konva.Circle({
    x: 700,
    y: 200,
    radius: targetr,
    stroke: 'red'
});

var canonbase = new Konva.Wedge({
    x: basecenter.x,
    y: basecenter.y,
    radius: baser,
    angle: 180,
    fill: 'darkgreen',
    rotation: 180
});

var canontube = new Konva.Rect({
    x: basecenter.x,
    y: basecenter.y,
    width: tubedim.len,
    height: 2 * tubedim.r,
    fill: 'brown',
    offset: { x: -(baser - 5), y: tubedim.r },
    rotation: -angle
});

var ball = new Konva.Circle({
    radius: ballr,
    fill: 'orange',
});

var hintline = new Konva.Line({
    points: [],
    stroke: '#cccccc',
    dash: [5, 5]
});

var ballpos;


baselayer.add(result);
baselayer.add(hintHText);
baselayer.add(hintVText);
baselayer.add(hintline);
baselayer.add(showtext);
baselayer.add(ball);
baselayer.add(target);
baselayer.add(canonbase);
baselayer.add(canontube);
stage.add(baselayer);
if (trace > 0) stage.add(tracelayer);
reset();

function distance2(p1, p2) {
    return (p1.x -...