const canvas = document.getElementById("gameboard");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let width = canvas.width;
let height = canvas.height;
//The web coordinate system is the original point in the upper left corner, and the right is the X-axis positive direction, and the Y-axis positive direction is down.
//In order to meet mathematical habits, convert it to a Cartesian coordinate system
ctx.save();
ctx.translate(0,height);
ctx.rotate(Math.PI);
ctx.scale(-1,1);
//Draw the initial circle
ctx.fillStyle = "hsl(170, 100%, 50%)";
ctx.beginPath();
ctx.arc($("#circX").val(), $("#circY").val(), $("#circR").val(),0, 2 * Math.PI);
ctx.fill();
//Rolling friction coefficient
let mk=0;
//Kinetic attenuation coefficient
let me=0;
//Residual kinetic energy coefficient
let loseProp=0;
//Screen long wide
const screenWidth=$(window).width(),screenHeight=$(window).height();
$("#screenWidth").text(screenWidth);$("#screenHeight").text(screenHeight);
//Display / hide information bar
let clickFlag=false;
function showBox(){
if(clickFlag){
$("#showBox").animate({left:'-150px'});
clickFlag=false;
}
else{
$("#showBox").animate({left:'0'});
clickFlag=true;
}
}
//implement
function start(obj){
if($ (obj) .Text () == "Start"){
mk=parseFloat($("#mk").val());
me=parseFloat($("#me").val());
loseProp=1-me;
const game = new Circle();
$(obj).text("stop");
}
else{
window.location.reload();
}
}
//Ball
class Circle{
/**
* @Param {Object} Start is initialized
* @Param {Object} MF Addition initial movement
* @Param {Object} MG ball weight
* @Param {Object} x round x-axis position
* @Param {Object} Y round y-axis position
* @Param {Object} R round radius
* @Param {Object} VX moves distance to the X-axis
* @Param {Object} VY moves distance to the Y-axis
* @Param {Object} VH slanting movement distance
* @Param {Object} PICKX hits the X-axis coordinate
* @Param {Object} Picky hits the Y-axis coordinate
* @Param {Object} DIRX moving in the X-axis
* @Param {Object} DIRY moving in the Y-axis positive direction
* @Param {Object} lasttime last frame consumption
*/
constructor() {
this.start=true;
this.mf = parseFloat($("#mf").val());
this.mg = parseFloat($("#mg").val());
this.x = parseFloat($("#circX").val());
this.y = parseFloat($("#circY").val());
this.r = parseFloat($("#circR").val());
this.vx = 0;
this.vy = 0;
this.vh = 0;
this.pickX = parseFloat($("#pickX").val());
this.pickY = parseFloat($("#pickY").val());
this.dirX = null;
this.dirY = null;
this.lastTime = null;
this.init();
}
// Initialized drawing
init() {
this.circles = [
this.draw(this.x, this.y, this.r, 0, 2 * Math.PI)
];
window.requestAnimationFrame(this.Sport.bind(this));
}
draw(x,y,r,sAngle,eAngle){
ctx.fillStyle = "hsl(170, 100%, 50%)";
ctx.beginPath();
ctx.arc(x, y, r,sAngle,eAngle);
ctx.fill();
}
print(obj){
let str="";
$.each(obj,function(key,value){
str+=key+":"+value+"。";
})
console.log(str);
}
//Reference Web API https://developer.mozilla.org/en-cn/docs/web/api/window/requestanimationFrame
//WINDOW.REQUESTANIMATIONFRAME () will pass the number of milliseconds (ie timestamp: 00.000) of the current time to the callback function
Sport(timestamp){
let flag=true;
//Calculate the last frame consumption
if (!this.lastTime) {
this.lastTime = 0;
flag=false;
}
let timeDiff=(timestamp-this.lastTime)/1000;
this.lastTime=timestamp;
//It is performed here to perform the calling method, rather than loading, so the first frame time can cause accumulation, exclude the first frame
if(flag) this.locationReset(timeDiff)
window.requestAnimationFrame(this.Sport.bind(this));
}
locationReset(t){
let obj= {"Synergy":this.mf};
this.print(obj);
var s=this.mf*t**2/(this.mg+this.mg*mk);
if(this.mf>this.mg+this.mg*mk){
this.calcAngle(s*1400,this.r);
this.mf-= this.mg*mk*s*10;
}
}
calcAngle(s,r){
if(this.start){
//TRUE moves in the X-axis positive direction, FALSE moves in the x-axis negative direction
this.dirX=this.x-this.pickX>=0;
//True moves in the Y-axis positive direction, and FALSE moves into the Y-axis negative direction.
this.dirY=this.y-this.pickY>=0
//Power point to the shaft distance of the heart
let calcX=Math.abs(this.x-this.pickX);
//Power point to the Y-axis distance of the ball
let calcY=Math.abs(this.y-this.pickY);
//Power point to the head of the heart
let calcH=Math.sqrt(calcX**2+calcY**2);
let prop=s/calcH;
let moveX=prop*calcX;
let moveY=prop*calcY;
let moveH=prop*calcH;
this.vx=this.dirX?moveX:-moveX;
this.vy=this.dirY?moveY:-moveY;
this.vh=moveH;
this.start=false;
}
else{
//this.vh/s=this.vx/x=this.vy/y
this.vx=s*this.vx/this.vh;
this.vy=s*this.vy/this.vh;
this.vh=s;
}
this.x=this.dirX?this.x+this.vx:this.x-this.vx;
this.y=this.dirY?this.y+this.vy:this.y-this.vy;
this.reboundPath(this.dirX,this.dirY,Math.abs(this.x/this.y));
}
reboundPath(dirX,dirY,prop){
let thisScreenWidth=screenWidth-this.r;
let thisScreenHeight=screenHeight-this.r;
//The center position is outside the X-axis positive direction, inevitably collisions
if(this.x>thisScreenWidth){
//debugger;
let moreThanX=this.x-thisScreenWidth;
let moreThanY=this.y>this.r?this.y-thisScreenHeight:this.r-this.y;
//First touch the right wall first
if(moreThanX/moreThanY>prop||this.y
this.r?this.y-thisScreenHeight:this.r-this.y;
//First touch the left wall
if(moreThanX/moreThanY>prop||this.y=thisScreenHeight){
let moreThanY=this.y-thisScreenHeight;
this.y=thisScreenHeight-moreThanY*loseProp;
this.dirY=!this.dirY;
this.mf*=loseProp;
}
else if(this.y<=this.r){
let moreThanY=this.r-this.y;
this.y=this.r+moreThanY*loseProp;
this.dirY=!this.dirY;
this.mf*=loseProp;
}
if(this.x>thisScreenWidth||this.xthisScreenHeight||this.y
Comments
Post a Comment