dynajoe/index.html

## index.html

<html>
   <head>
      <script type="text/javascript">
         window.onload = function () {
            var canvas = document.getElementById('game-canvas');
            var context = canvas.getContext("2d");
            context.fillStyle = "#0000FF";
            var radius = 30;
            var x = 250;
            var y = 0;
            var direction = 1;
            var velocity_y = 0;
            var velocity_x = 0;
            var accelleration = .0005;
            var update_rate = 1000 / 60;
            var last_jump = 0;

            //v = v + a * t;
            //d = v * t

            setInterval(function () {
               context.clearRect(0, 0, 500, 500);
               var current_time = new Date().getTime();

               velocity_y = velocity_y + accelleration * update_rate;
               var distance_traveled = (velocity_y * update_rate);

               if (window.Keyboard.isPressed('a')) {
                  velocity_x = -.1;
               } else if (window.Keyboard.isPressed('d')) {
                  velocity_x = .1;
               }
               else if (window.Keyboard.isPressed('s')){
                  y = y + 3;
               }
               else {
                  velocity_x = 0;
               }

               if (window.Keyboard.isPressed('w')) {
                  // dont do anything with y
               }
               else {
                  y = y + distance_traveled;
               }

               x = x + (velocity_x * update_rate);

               if (x > 450) {
                  x = 450;
               } else if (x < 0) {
                  x = 0;
               }

               if (y > 450) {
                  y = 450;
                  velocity_y = velocity_y * .9 * -1;
               } else if (y < 0) {
                  y = 0;
                  velocity_y = velocity_y * -1;
               }

               context.beginPath();
               context.arc(x + radius, y + radius, radius, 0, 2 * Math.PI, false);
               context.fillStyle = 'green';
               context.fill();

            }, update_rate);

         }


         var map = {
            37: 'left',
            39: 'right',
            38: 'up',
            40: 'down',
            13: 'enter',
            32: 'space'
         }

         window.Keyboard = {};
         pressed = {};

         var onKeyChanged = function (e, down) {
            if (map[e.which]) {
               pressed[map[e.which]] = down;
            } else {
               pressed[e.which] = down;
            }

            pressed['shift'] = e.shiftKey;
            pressed['ctrl'] = e.ctrlKey;
            pressed['alt'] = e.altKey;

         }

         document.addEventListener("keydown", function (e) {
            onKeyChanged(e, true);
         }, false);


         document.addEventListener("keyup", function (e) {
            onKeyChanged(e, false);
         }, false);

         window.Keyboard.isPressed = function (key) {
            if (key.length === 1) {
               return pressed[key.toUpperCase().charCodeAt(0)];
            }

            return pressed[key.toLowerCase()];
         }

      </script>
   </head>

   <body bgcolor="black">
      <canvas style="background: white;" width="500" height="500" id="game-canvas">
      </canvas>
   </body>
</html>

	<html>
	<head>
	<script type="text/javascript">
	window.onload = function () {
	var canvas = document.getElementById('game-canvas');
	var context = canvas.getContext("2d");
	context.fillStyle = "#0000FF";
	var radius = 30;
	var x = 250;
	var y = 0;
	var direction = 1;
	var velocity_y = 0;
	var velocity_x = 0;
	var accelleration = .0005;
	var update_rate = 1000 / 60;
	var last_jump = 0;

	//v = v + a * t;
	//d = v * t

	setInterval(function () {
	context.clearRect(0, 0, 500, 500);
	var current_time = new Date().getTime();

	velocity_y = velocity_y + accelleration * update_rate;
	var distance_traveled = (velocity_y * update_rate);

	if (window.Keyboard.isPressed('a')) {
	velocity_x = -.1;
	} else if (window.Keyboard.isPressed('d')) {
	velocity_x = .1;
	}
	else if (window.Keyboard.isPressed('s')){
	y = y + 3;
	}
	else {
	velocity_x = 0;
	}

	if (window.Keyboard.isPressed('w')) {
	// dont do anything with y
	}
	else {
	y = y + distance_traveled;
	}

	x = x + (velocity_x * update_rate);

	if (x > 450) {
	x = 450;
	} else if (x < 0) {
	x = 0;
	}

	if (y > 450) {
	y = 450;
	velocity_y = velocity_y * .9 * -1;
	} else if (y < 0) {
	y = 0;
	velocity_y = velocity_y * -1;
	}

	context.beginPath();
	context.arc(x + radius, y + radius, radius, 0, 2 * Math.PI, false);
	context.fillStyle = 'green';
	context.fill();

	}, update_rate);

	}


	var map = {
	37: 'left',
	39: 'right',
	38: 'up',
	40: 'down',
	13: 'enter',
	32: 'space'
	}

	window.Keyboard = {};
	pressed = {};

	var onKeyChanged = function (e, down) {
	if (map[e.which]) {
	pressed[map[e.which]] = down;
	} else {
	pressed[e.which] = down;
	}

	pressed['shift'] = e.shiftKey;
	pressed['ctrl'] = e.ctrlKey;
	pressed['alt'] = e.altKey;

	}

	document.addEventListener("keydown", function (e) {
	onKeyChanged(e, true);
	}, false);


	document.addEventListener("keyup", function (e) {
	onKeyChanged(e, false);
	}, false);

	window.Keyboard.isPressed = function (key) {
	if (key.length === 1) {
	return pressed[key.toUpperCase().charCodeAt(0)];
	}

	return pressed[key.toLowerCase()];
	}

	</script>
	</head>

	<body bgcolor="black">
	<canvas style="background: white;" width="500" height="500" id="game-canvas">
	</canvas>
	</body>
	</html>