HTML
<!DOCTYPE html>
<html>
<head>
<body>
<h1>calculator</h1>
<p>by frogggeee</p>
<canvas id = "canvas" width = "4800" height = "360"></canvas>
<script>
document.addEventListener('mousedown', onDown, false);
let cX = 0;
let cY = 0;
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
let number1 = "";
let number2 = "";
let operator = "+";
let stage = 1;
function onDown(e) {
cX = e.pageX;
cY = e.pageY;
//alert (cX + ", " + cY);
hitbox(23, 83, 168, 209, 1);
hitbox(93, 154, 168, 209, 2);
hitbox(163, 224, 168, 209, 3);
hitbox(23, 83, 218, 260, 4);
hitbox(93, 153, 218, 260, 5);
hitbox(163, 224, 218, 260, 6);
hitbox(23, 83, 268, 309, 7);
hitbox(93, 154, 268, 309, 8);
hitbox(163, 224, 268, 309, 9);
hitbox(93, 154, 317, 360, 0);
hitbox2(248, 309, 168, 209, 1);
hitbox2(248, 309, 218, 260, 2);
hitbox2(248, 309, 268, 309, 3);
hitbox2(248, 309, 317, 360, 4);
hitbox2(329, 449, 168, 209, 5);
hitbox2(329, 449, 218, 260, 6);
}
function hitbox(x1, x2, y1, y2, key) {
if (cX > x1 && cX < x2) {
if (cY > y1 && cY < y2) {
if (stage == 1) {
number1 = number1 + "" + key;
} else if (stage == 2) {
number2 = number2 + "" + key;
} else if (stage == 3) {
clear();
number1 = number1 + "" + key;
}
}
}
}
function hitbox2(xx1, xx2, yy1, yy2, func) {
if (cX > xx1 && cX < xx2) {
if (cY > yy1 && cY < yy2) {
if (func == 1) {
if (stage == 1) {
operator = "+";
stage = 2;
}
} else if (func == 2) {
if (stage == 1) {
operator = "-";
stage = 2;
}
} else if (func == 3) {
if (stage == 1) {
operator = "*";
stage = 2;
}
} else if (func == 4) {
if (stage == 1) {
operator = "/";
stage = 2;
}
} else if (func == 5) {
if (stage == 2) {
stage = 3;
}
} else if (func == 6) {
clear();
}
...