JSFiddle - React, Tailwind, and code Playground
HTML
<canvas width="500" height="500"></canvas>
<input type="button" value="prev"/>
CSS
canvas{
position:relative;
}
canvas.onHover{
cursor:pointer;
}
JavaScript
function Coin(pos, radius, value){
this.x=pos.x,
this.y=pos.y,
this.radius=radius,
this.value=value;
this.coinStyle='orange';
}
Coin.prototype.setCoinStyle=function(style){
this.coinStyle=style;
}
Coin.prototype.plot=function(ctx){
ctx.fillStyle=this.coinStyle;
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2);
ctx.fill();
ctx.stroke();
ctx.closePath();
ctx.fillStyle='black';
ctx.fillText(this.value, this.x, this.y);
}
Coin.prototype.contains=function(pos){
return d(this, pos) < this.radius;
}
function Game(opts){
this.canvas = opts.canvas;
this.ctx = this.canvas.getContext('2d');
this.ctx.textAlign='center';
this.ctx.textBaseline='middle';
this.radius = opts.radius;
this.cbkSuccess=opts.cbkSuccess?opts.cbkSuccess:function(){}
var deltaAngle = Math.PI*2/opts.numbers.length;
var currentAngle = 0;
this.coins = opts.numbers.map(function(n){
var center={
x:this.canvas.height/2,
y:this.canvas.width/2
};
var r=0.9*Math.min(center.x, center.y);
var point = {
x:r*Math.cos(currentAngle),
y:r*Math.sin(currentAngle)
};
var p = {
x:point.x + center.x,
y:point.y+center.y
}
var coin = new Coin(p, this.radius, n);
currentAngle += deltaAngle;
return coin;
}, this);
this.moves=[];
}
Game.prototype.refresh=function(){
var ctx = this.ctx;
ctx.clearRect(0,0,this.w,this.h);
this.coins.forEach(function(x){
x.plot(ctx);
});
}
Game.prototype.correspondingCoin=function(o){
var minDis=10000;
var minCoin={};
//get nearest button
this.coins.forEach(function(x){
var dist = d(x, o);
if(dist<minDis){
minDis = dist;
minCoin = x;
}
});
//get distance to center
if(minCoin.contains(o)){
return minCoin;
}
return false;
}
Game.prototype.success=function(){
var l=this.coins.length;
for(var i=0;i<this.coins.length-1;++i){
var value = this.coins[i].value-1;
var nextValue =...