html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<style>
canvas {
border-width: 4px;
border-style: black;
}
</style>
<script>
document.write("<h1> Dancing Ball!</h1>")
var canvas;
var ctx;
var balls = [];
var circleX = 30;
var circleY = 30;
var circleXModifier = 2;
var circleYModifier = 2;
function Ball() {
r = Math.round(Math.random() * 255);
g = Math.round(Math.random() * 255);
b = Math.round(Math.random() * 255);
this.x = 30+(Math.random()*(canvas.width-60));
this.y = 30+(Math.random()*(canvas.height-60));
this.modx = 1;
this.mody = 1;
this.color = "rgb("+r+","+g+","+b+")";
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
body {
background-color: aquamarine;
}
.mycanvas {
background-color:deepskycolor;
}
.mar{
font-family:cursive;
font-size:20px;
}
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
//im sory if there is a bug.
alert("☺ guys.... maybe there is some bug..😯 i can't fixed it so i'm sory...😅");
// the color of the ball is random.
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run