Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

part1 of the Simple Canvas game Tutorial

commit 6ce898b665304f8bcb098f8ff57edee613541509 0 parents
U-Michal-Komputer\Michal authored
Showing with 88 additions and 0 deletions.
  1. +4 −0 README
  2. +56 −0 part1/game.js
  3. +28 −0 part1/index.html
4 README
@@ -0,0 +1,4 @@
+Because 10KApart ( http://10k.aneventapart.com/ ) is closed now, and we are all waiting for the results, it is good time to remind my very simple "Stairs to heaven" ( http://10k.aneventapart.com/Entry/36 ) game and explain in details how it was made.
+Details on my blog:
+http://michalbe.blogspot.com/2010/09/simple-game-with-html5-canvas-part-1.html
+Cheers.
56 part1/game.js
@@ -0,0 +1,56 @@
+var width = 320,
+ height = 500,
+ gLoop,
+ c = document.getElementById('c'),
+ ctx = c.getContext('2d');
+
+ c.width = width;
+ c.height = height;
+
+
+var clear = function(){
+ ctx.fillStyle = '#d0e7f9';
+ ctx.clearRect(0, 0, width, height);
+ ctx.beginPath();
+ ctx.rect(0, 0, width, height);
+ ctx.closePath();
+ ctx.fill();
+}
+
+var howManyCircles = 10, circles = [];
+
+for (var i = 0; i < howManyCircles; i++)
+ circles.push([Math.random() * width, Math.random() * height, Math.random() * 100, Math.random() / 2]);
+
+var DrawCircles = function(){
+ for (var i = 0; i < howManyCircles; i++) {
+ ctx.fillStyle = 'rgba(255, 255, 255, ' + circles[i][3] + ')';
+ ctx.beginPath();
+ ctx.arc(circles[i][0], circles[i][1], circles[i][2], 0, Math.PI * 2, true);
+ ctx.closePath();
+ ctx.fill();
+ }
+};
+
+var MoveCircles = function(e){
+ for (var i = 0; i < howManyCircles; i++) {
+ if (circles[i][1] - circles[i][2] > height) {
+ circles[i][0] = Math.random() * width;
+ circles[i][2] = Math.random() * 100;
+ circles[i][1] = 0 - circles[i][2];
+ circles[i][3] = Math.random() / 2;
+ }
+ else {
+ circles[i][1] += e;
+ }
+ }
+};
+var GameLoop = function(){
+ clear();
+ MoveCircles(5);
+ DrawCircles();
+
+ gLoop = setTimeout(GameLoop, 1000 / 50);
+}
+
+GameLoop();
28 part1/index.html
@@ -0,0 +1,28 @@
+<html>
+<head>
+ <!--
+ by Michal Budzynski
+ http://michalbe.blogspot.com
+ http://twitter.com/michalbe
+ -->
+ <title>Simple game with HTML5 Canvas</title>
+ <style>
+ body {
+ margin:0px;
+ padding:0px;
+ text-align:center;
+ }
+
+ canvas{
+ outline:0;
+ border:1px solid #000;
+ margin-left: auto;
+ margin-right: auto;
+ }
+ </style>
+</head>
+<body>
+<canvas id='c'></canvas>
+<script src="game.js"></script>
+</body>
+</html>
Please sign in to comment.
Something went wrong with that request. Please try again.