<!DOCTYPE html>
<html>
<head>
<title>BALLIN</title>
<script src=”https://ball.js”></script>
 <script src=”https://leg.js”></script>
 <script src=”https://arm.js”></script>
 <link rel=”stylesheet” type=”text/css” href=”style.css”>
 <meta charset=”utf-8″ />
div{
width: 100px;
height: 100px;
background: black;
position:relative;
border-radius: 50%;
-webkit-animation-duration:
animation-name: mymove;
animation-duration:8s;
-webkit-animation: spin 1000ms linear infinite, moveLeftToRight 8s
@-webkit-keyframes spin {
from{ transform :rotate 0px;}
to{ left:200px;}
@-webkit-keyframes bounce{}
animation-name: mymove;
animation-duration:5s;
-webkit-animation:vertical move
Up To Down 5s
-webkit-animation-duration:
animation-name: mymove;
animation-duration:0s
</head>
<body>
<canvas id=“gameCanvas” width=“1080” height=“720”>
Your browser does not support this canvas.
</canvas>
<script>
var myCanvas = document.getElementById(“gameCanvas”);
var myContext = myCanvas.getContext(“2d”);
var imgs = [];
var numImages = 8;
var numImagesLoaded = 0;
var currentImageIdx = -1;
main();
function main()
{
// 1. Take care of checking image loading
// 2. Invoke startGame() when images are ready
for (var i=1; i < numImages + 1; i++)
myContext.strokeStyle = “#0000FF”;
myContext.lineWidth = 2;
myContext.rect(0, 0, 100, 100);
myContext.stroke();
myContext.translate(200, 100);
myContext.rotate(Math.PI / 6);
myContext.rect(0, 0, 500, 200);
myContext.stroke()’
</script>
</body>
</html>
