Lottery ball Picker

cybrax

Community Advocate
Community Support
Messages
764
Reaction score
27
Points
0
Here's a quick little demo & script tutorial for HTML5 and its canvas feature.

The code below will create numbered bouncing balls in a variety of colours
each time they drop into the screen. Lots of tweekable settings to play
around so have fun. Online Demo is here and the download links for the three
external javascript files required.

Code:
<!DOCTYPE html>
  <html><head>
  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="chrome=1">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Freebie Lotto Number Picker</title>
  <style>
  body {
  overflow: hidden;
 margin-left: 0px;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px; 
  }
  .balltext{
  font-size:40px;
  color:#000000;
  font-weight: bold;
 
  }
  #canvas {
  height: 350px;
  width: 468px;
  background-repeat: no-repeat;<br />
  z-index: 2;
  }
#Layer1{
  width:468px;
  height:60px;
}
  </style>

  </head>
  <body>
  <div  id="canvas">
 
  </div>
<script src="protoclass.js"></script><br />
  <script src="box2d.js"></script><br />
  <script src="Main.js"></script><br />
  </body></html>
 

descalzo

Grim Squeaker
Community Support
Messages
9,373
Reaction score
326
Points
83
Chooses the same number for multiple balls.
 
Top