public void Render(Retyped.dom.HTMLElement root)
{
// define document width and height
width = 640;
height = 480;
// create SVG document and set its size
draw = svgjs2.Self(root);
draw.size(width, height);
draw.viewbox(0, 0, width, height);
// draw background
var background = draw.rect(width, height).fill("#dde3e1");
// draw line
var line = draw.line(width / 2, 0, width / 2, height);
line.stroke(new svgjs.StrokeData
{
width = 5,
color = "#fff",
dasharray = "5,5"
});
// define paddle width and height
paddleWidth = 15;
paddleHeight = 80;
// create and position left paddle
paddleLeft = draw.rect(paddleWidth, paddleHeight);
paddleLeft.x(0).Value.cy(height / 2).Value.fill("#00ff99");
// create and position right paddle
paddleRight = paddleLeft.clone();
paddleRight.x(width - paddleWidth).Value.fill("#ff0066");
// define ball size
var ballSize = 10;
// create ball
ball = draw.circle(ballSize);
ball.center(width / 2, height / 2).Value.fill("#7f7f7f");
// define inital player score
playerLeft = 0.0;
playerRight = 0.0;
// create text for the score, set font properties
scoreLeft = (svgjs.Text)draw.text(playerLeft + "").font(
new svgjs.FontData
{
size = 32,
family = "Menlo, sans-serif",
anchor = "end",
style = "color:#fff"
}).Value.move(width / 2 - 10, 10);
// cloning rocks!
scoreRight = (svgjs.Text)((svgjs.Text)scoreLeft.clone())
.text(playerRight + "").Value
.font("anchor", "start")
.x(width / 2 + 10);
// AI difficulty
difficulty = 2;
callback(0);
paddleDirection = 0;
paddleSpeed = 5;
svgjs2.on(document, "keydown", new Action <KeyboardEvent>(e =>
{
// Let's skip non-control keys
if (e.keyCode == 38)
{
paddleDirection = -1;
e.preventDefault();
}
else if (e.keyCode == 40)
{
paddleDirection = 1;
e.preventDefault();
}
else if (e.keyCode == 32 && vx == 0 && vy == 0)
{
// random velocity for the ball at start
vy = Math.random() * 500 - 150;
vx = Math.random() > 0.5 ? 250 : -250;
e.preventDefault();
}
else
{
paddleDirection = 0;
}
}));
svgjs2.on(document, "keyup", new Action <KeyboardEvent>(e =>
{
// Let's skip non-control keys
if (e.keyCode == 38 || e.keyCode == 40)
{
paddleDirection = 0;
e.preventDefault();
}
}));
// ball color update
ballColor = CreateColor("#ff0066");
ballColor.morph("#00ff99");
}
private void update(double dt)
{
// move the ball by its velocity
ball.dmove(vx * dt, vy * dt);
// get position of ball
var cx = ball.cx();
var cy = ball.cy();
// get position of ball and paddle
var paddleLeftCy = paddleLeft.cy();
// move the left paddle in the direction of the ball
var dy = Math.min(difficulty, Retyped.es5.Math.abs(cy - paddleLeftCy));
paddleLeftCy += cy > paddleLeftCy ? dy : -dy;
// constraint the move to the canvas area
paddleLeft.cy(Math.max(paddleHeight / 2, Math.min(height - paddleHeight / 2, paddleLeftCy)));
// check if we hit top/bottom borders
if ((vy < 0 && cy <= 0) || (vy > 0 && cy >= height))
{
vy = -vy;
}
var paddleLeftY = paddleLeft.y();
var paddleRightY = paddleRight.y();
// check if we hit the paddle
if ((vx < 0 && cx <= paddleWidth && cy > paddleLeftY && cy < paddleLeftY + paddleHeight) ||
(vx > 0 && cx >= width - paddleWidth && cy > paddleRightY && cy < paddleRightY + paddleHeight))
{
// depending on where the ball hit we adjust y velocity
// for more realistic control we would need a bit more math here
// just keep it simple
vy = (cy - ((vx < 0 ? paddleLeftY : paddleRightY) + paddleHeight / 2)) * 7; // magic factor
// make the ball faster on hit
vx = -vx * 1.05;
}
else
// check if we hit left/right borders
if ((vx < 0 && cx <= 0) || (vx > 0 && cx >= width))
{
// when x-velocity is negative, it"s a point for player 2, otherwise player 1
if (vx < 0)
{
++playerRight;
}
else
{
++playerLeft;
}
reset();
scoreLeft.text(playerLeft + "");
scoreRight.text(playerRight + "");
}
// move player paddle
var playerPaddleY = paddleRight.y();
if (playerPaddleY <= 0 && paddleDirection == -1)
{
paddleRight.cy(paddleHeight / 2);
}
else if (playerPaddleY >= height - paddleHeight && paddleDirection == 1)
{
paddleRight.y(height - paddleHeight);
}
else
{
paddleRight.dy(paddleDirection * paddleSpeed);
}
// update ball color based on position
ball.fill(ballColor.at(1 / width * ball.x()).toString());
}
