Skip to content

Instantly share code, notes, and snippets.

@colemilne54

colemilne54/index.html

Last active December 3, 2021 20:37
Show Gist options
  • Save colemilne54/ee1c7d6549e650141648b0593d2eea67 to your computer and use it in GitHub Desktop.
Save colemilne54/ee1c7d6549e650141648b0593d2eea67 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<title>HTML 5 Game Tutorial</title>
</head>
<body>
<canvas id="surface" width="600" height="400"></canvas>
</body>
</html>
Raw
main.dart
import 'dart:html';
var context = querySelector("#surface") as CanvasElement;
var ctx = context.getContext('2d') as CanvasRenderingContext2D;
num x = 20.0;
num y = 20.0;
var r = 25.0;
double vx = 0;
double vy = 0;
void clear() {
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 400, 400);
}
void drawMove(MouseEvent event) {
x = event.offset.x;
y = event.offset.y;
clear();
drawBall();
}
void drawBall() {
ctx.beginPath();
ctx.arc(x, y, r, 0, 3.14 * 2);
ctx.fillStyle = "black";
ctx.fill();
ctx.closePath();
}
void physics() {
clear();
x += vx;
y += vy;
vy *= .99;
vx *= .99;
vy += .25;
vx += .25;
print('test');
if (x + r > 400) {
print("width");
x = 400 - r;
vx = -vx.abs();
}
if (y + r > 400) {
print('y test');
y = 400 - r;
vy = -vy.abs();
}
drawBall();
}
Future<void> physicsFuture() async {
return Future.delayed(Duration(milliseconds: 13), () => physics());
}
void main() async {
ctx.fillStyle = "black";
drawBall();
context.onClick.listen(drawMove);
bool t = true;
while (t == true) {
await physicsFuture();
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment