SeeSaw

Developer
Anwesh Mishra
Size
2,195 Kb
Views
6,072
  1. SeeSaw Previews
  2. SeeSaw HTML Codes
  3. SeeSaw JS Codes

How do I make an seesaw?

What is a seesaw? How do you make a seesaw? This script and codes were developed by Anwesh Mishra on 08 January 2023, Sunday.

SeeSaw Previews
IQ Test

SeeSaw - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SeeSaw</title>
</head>
<body> <canvas id="c1" width="500px" height="500px">
</canvas> <script src="js/index.js"></script>
</body>
</html>

SeeSaw - Script Codes JS Codes

var canvas = document.getElementById('c1')
var context = canvas.getContext('2d')
var setDimension = () => { canvas.width = window.innerWidth canvas.height = window.innerHeight
}
setDimension()
window.onresize = ()=>{ setDimension() init()
}
class Bar { constructor(x,y,w,h) { this.x = x this.y = y this.w = w this.h = h this.deg = 0 this.dir = 1 } draw() { context.fillStyle = "#FFC107" context.save() context.translate(this.x,this.y) context.rotate(this.deg*Math.PI/180) for(var i=0;i<2;i++) { context.save() context.scale((i*2-1),1) context.fillRect(0,-this.h,this.w,this.h) this.drawHandler() context.restore() } context.restore() } drawHandler() { context.fillStyle="#FFC107" context.fillRect(4*this.w/5,-2*this.h,this.w/10,this.h) } update() { this.deg+=this.dir*6 if(this.deg<=-30) { this.dir = 1 } if(this.deg>=30) { this.dir = -1 } } handleTap(x,y) { var handler1XL = this.x-(4*this.w)/5-this.w/10 ,handler1XH = handler1XL+(this.w/10) var handler2XL = this.x+(4*this.w)/5,handler2XH = handler2XL +(this.w/10) var handlerYL = this.y-(2*this.h),handlerYH = handlerYL+this.h if(y>=handlerYL && y<=handlerYH && this.deg == 0) { if(x>=handler1XL && x<=handler1XH) { this.dir = -1; } else if(x>=handler2XL && x<=handler2XH) { this.dir = 1; } } }
}
class Pivot { constructor(x,y,size) { this.x = x this.y = y this.size = size } draw() { var x = this.x,y = this.y,size = this.size context.fillStyle="#FFC107" context.beginPath() context.moveTo(x,y) context.lineTo(x+size/2,y+size/2) context.lineTo(x-size/2,y+size/2) context.fill() }
}
var t = 0,frames = 5
var rotatingBar
var pivot
var init = ()=>{ pivot = new Pivot(canvas.width/2,canvas.height/2,canvas.width/40) rotatingBar = new Bar(canvas.width/2,canvas.height/2,canvas.width/10,canvas.height/20) t = 0
}
init()
canvas.onmousedown = (event) => { console.log(event) var x = event.offsetX,y = event.offsetY rotatingBar.handleTap(x,y)
}
function draw() { context.clearRect(0,0,canvas.width,canvas.height) context.fillStyle="#00BCD4" context.fillRect(0,0,canvas.width,canvas.height) rotatingBar.draw() pivot.draw() if(t%5 == 0) { rotatingBar.update() } t++ window.requestAnimationFrame(draw)
}
window.requestAnimationFrame(draw)
SeeSaw - Script Codes
SeeSaw - Script Codes
Home Page Home
Developer Anwesh Mishra
Username Anwesh43
Uploaded January 08, 2023
Rating 3
Size 2,195 Kb
Views 6,072
Do you need developer help for SeeSaw?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Anwesh Mishra (Anwesh43) Script Codes
Name
MovingBall
Material Boxes Animation
TumblingPins
Fractal Spirograph
SettingButton
EllipticalSwitch
A Pen by Anwesh Mishra
Html5CanvasPingPong
Clapperboard
Jumping Triangles
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!