gameloop = {
let n = 0;
let {r, x, xSpeed, y, ySpeed} = mutable ball;
function pauseBall(duration){
mutable ball = {r, x, y, xSpeed, ySpeed}
return Promises.delay(duration, mutable ball)
}
while (true) {
x = x + xSpeed;
y = y + ySpeed;
if (x < r) {
xSpeed = Math.abs(xSpeed);
yield pauseBall(0);
}
if (x + r > w) {
xSpeed = -Math.abs(xSpeed);
yield pauseBall(0);
}
if (y < r) {
ySpeed = Math.abs(ySpeed);
yield pauseBall(1000);
}
if (y + r > h) {
ySpeed = -Math.abs(ySpeed);
yield pauseBall(0);
}
// when the ball hits the paddle
let px = mutable paddleX;
if ( x + r > px && x - r < px + paddleLength && y + r > h - scale) {
// return true;
yield pauseBall(1000);
ySpeed = -ySpeed;
// let xChangeRateDirection = ((x - px) / paddleLength - 0.5) * Math.PI;
xSpeed = speed * ((x - px) / paddleLength - 0.5) * Math.PI;
// return xSpeed;
}
mutable ball = {r, x, y, xSpeed, ySpeed};
yield true;
}
}
mutable paddleX = {
return w/2 - paddleLength/2;
}
mutable ball = {
return {r: scale, x: w/2, y: h-2*scale, xSpeed: speed, ySpeed: speed};
}
mousemove = c.canvas.onmousemove = e => {
if ( paddleLength/2 <= e.offsetX && e.offsetX < w - paddleLength/2 ) {
mutable paddleX = e.offsetX - paddleLength/2
} else if ( paddleLength/2 > e.offsetX ) {
mutable paddleX = 0
} else {
mutable paddleX = w - paddleLength
}
}
draw = {
gameloop;
c.fillStyle="black";
c.fillRect(0,0,w,h);
const {r, x, y} = mutable ball;
c.beginPath();
c.fillStyle = "red";
c.arc(x, y, r, 0, 2 * Math.PI);
c.fill();
c.fillStyle = "green"
c.font = "15px Arial"
if ( x < r ) c.fillText(`x < r : ${x < r}`, x + 20, (y < h/2)? y + 20 : y - 20);
if ( x + r > w ) c.fillText(`x + r > w : ${x + r > w}`, x - 120 , (y < h/2)? y + 20 : y - 20);
if ( y < r ) c.fillText(`y < r : ${y < r}`, ( x < w/2) ? x + 20 : x - 80, y + 20, );
if ( y + r > h ) c.fillText(`y + r > h : ${y + r > h}`,( x < w/2) ? x + 20 : x - 80, y - 20);
c.fillStyle = "blue";
c.fillRect(mutable paddleX,
h - scale,
paddleLength,
scale);
c.fillStyle = "cyan";
c.fillRect(mutable paddleX, h - scale, 2, 2)
}
videoyt("Aznz6oLbuFQ")
import {videoyt, slider, button} from "@embracelife/tutorial-utilities"
FileAttachment("chart.svg").image()
FileAttachment("chart.png").image()
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
