Permalink
Browse files

a few style modifications to the canvas and the surroundings

  • Loading branch information...
1 parent b87d978 commit da3514684945d64cb410fdf72f08e4e35e57f559 @cobexer committed Apr 8, 2012
Showing with 66 additions and 22 deletions.
  1. +13 −3 index.html
  2. +5 −2 src/app.js
  3. +14 −13 src/ui.js
  4. +34 −4 style/5-in-a-row.css
View
@@ -7,14 +7,24 @@
<head>
<title>5 in a row</title>
<script src="lib/jquery-1.7.1.js"></script>
+ <script src="lib/jquery-ui/jquery-ui-1.8.18.js"></script>
+ <script src="lib/cobexer.chat.js"></script>
<script src="src/utils.js"></script>
<script src="src/ui.js"></script>
<script src="src/net.js"></script>
<script src="src/app.js"></script>
+ <link rel="stylesheet" href="lib/jquery-ui/jquery-ui-1.8.18.css" />
+ <link rel="stylesheet" href="lib/cobexer.chat.css" />
<link rel="stylesheet" href="style/5-in-a-row.css" />
</head>
- <body onload="init();">
- <canvas id="background" width="2000" height="1200"></canvas>
- <canvas id="game_array" width="2000" height="1200"></canvas>
+ <body>
+ <div id="content-wrapper">
+ <h1>5 in a row!</h1>
+ <div id="game-container">
+ <canvas id="background" width="640" height="480"></canvas>
+ <canvas id="game_array" width="640" height="480"></canvas>
+ </div>
+ <footer>Copyright &copy; 2012 Obexer Christoph, Watzinger Dietmar. All rights reserved.</footer>
+ </div>
</body>
</html>
View
@@ -4,5 +4,8 @@
*
* Released under the MIT and GPL licenses.
*/
-
-
+$(function() {
+ init();
+ $('<div id="ingame-chat"></div>')
+ .chat({ channels: ['Lobby'] });
+})
View
@@ -7,30 +7,28 @@
-var x_size_array = 10;
-var y_size_array = 5;
-var field_size = 50;
-var x_offset = 50;
-var y_offset = 50;
+var x_size_array = 20;
+var y_size_array = 15;
+var field_size = 32;
+var x_offset = 0;
+var y_offset = 0;
var color = "green";
var name = "Corni";
var array = new Array(x_size_array);
var animation_counter;
-var background_window;
var array_window;
+var game_array;
function init()
{
- background = document.getElementById("background");
- background_window = background.getContext('2d');
drawBackground();
- game_array = document.getElementById("game_array");
- array_window = game_array.getContext('2d');
- game_array.addEventListener('click', clickField, false);
+ game_array = $("#game_array");
+ array_window = game_array[0].getContext('2d');
+ game_array.on('click', clickField);
for(var i=0; i<array.length; i++)
{
@@ -40,6 +38,8 @@ function init()
function drawBackground()
{
+ var background = $("#background")[0];
+ var background_window = background.getContext('2d');
var img = new Image();
img.onload = function()
{
@@ -145,8 +145,9 @@ function getCursorPosition(e)
y = e.clientY + document.body.scrollTop +
document.documentElement.scrollTop;
}
- x -= game_array.offsetLeft;
- y -= game_array.offsetTop;
+ var offset = game_array.offset();
+ x -= offset.left;
+ y -= offset.top;
if(x<x_offset || x>(x_offset + x_size_array*field_size) || y<y_offset || y>(y_offset + y_size_array*field_size))
{
View
@@ -4,9 +4,39 @@
* Released under the MIT and GPL licenses.
*/
-#background {
- position: fixed;
+body {
+ font-family: Verdana,sans-serif;
+ background-color: #BDBDBD;
}
-#game_array {
- position: fixed;
+
+h1 {
+ text-align: center;
+}
+
+#content-wrapper {
+ width: 900px;
+ margin: 0 auto;
+}
+
+#game-container {
+ position: relative;
+ width: 640px;
+ height: 480px;
+ margin: 0 auto;
+ box-shadow: 0 0 15px black;
+ border-radius: 3px;
+}
+
+#game-container > canvas {
+ position: absolute;
+ top: 0;
+ left: 0;
+ padding: 0;
+ margin: 0;
}
+
+#content-wrapper footer {
+ padding-top: .8em;
+ font-size: 75%;
+ text-align: center;
+}

0 comments on commit da35146

Please sign in to comment.