Permalink
Browse files

New graphics

  • Loading branch information...
1 parent 3c5ec96 commit f0335c4b3a10dd6977a3282c30bd7e0247f0ce0a @Seldaek committed Nov 21, 2012
Showing with 72 additions and 87 deletions.
  1. +3 −1 README.md
  2. +33 −61 css/styles.css
  3. BIN img/bar_empty.png
  4. BIN img/bar_full.png
  5. BIN img/bg.png
  6. +10 −6 index.html
  7. +9 −1 js/block.js
  8. +2 −2 js/energybar.js
  9. +6 −8 js/node.js
  10. +8 −7 js/split.js
  11. +1 −1 js/trails.js
View
@@ -12,12 +12,14 @@ I set out to imagine a game where your only way of moving is to fork/branch out,
# Tools
-No external libs are used for the core of the game. The game is simple enough that it does not require (and also does not really fit) the use of a game engine to render elements or track the game logic. I figured one can handle this with the browser APIs alone these days.
+No external libs are used for the core of the game. The game is simple enough that it does not require (and also does not really fit) the use of a game engine to render elements or track the game logic. I figured one can handle this with the browser APIs alone these days, plus it was a good learning exercise.
# Author
This has been conceived and put together by [Jordi Boggiano](http://seld.be/) ([@seldaek](https://twitter.com/seldaek)).
+[Meret Vollenweider](http://meret.com) kindly helped with the game graphics.
+
# License
The code is released under the GPLv3, see the LICENSE file for details.
View
@@ -1,7 +1,7 @@
@import url(http://fonts.googleapis.com/css?family=Lato:100,300);
body {
- background: #222;
+ background: #111;
color: #fff;
font: 16px 'Lato', sans-serif;
font-weight: 300;
@@ -10,28 +10,37 @@ footer {
text-align: center;
width: 320px;
margin: auto;
- font-size: 10px;
+ font-size: 14px;
}
a, a:link, a:visited, a:hover {
- color: #a998d1;
+ color: #bcaedb;
text-decoration: none;
}
#game {
- border: 4px solid #566;
+ border: 1px solid rgba(0,0,0,.5);
position: relative;
width: 320px;
height: 480px;
margin: 20px auto;
- background: #000;
+ background: #000 url(../img/bg.png);
+ box-shadow: 0 0 3px rgba(0,0,0,.5);
}
#game canvas {
position: absolute;
top: 0;
left: 0;
}
+
+#ingame {
+ visibility: hidden;
+}
+#ingame.playing {
+ visibility: visible;
+}
+
#score {
- right: 25px;
- top: 5px;
+ right: 19px;
+ top: 14px;
position: absolute;
line-height: 20px;
}
@@ -43,77 +52,40 @@ a, a:link, a:visited, a:hover {
text-align: center;
width: 100%;
}
-#messages, #score {
+#messages, #score, #strength {
font-weight: 100;
font-size: 23px;
text-shadow: 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000;
}
-#score, #energy-bar {
+#score {
font-size: 24px;
}
-#energy-bar {
- right: 5px;
- top: 5px;
- height: 100px;
- width: 10px;
- background: #000;
+#strength {
+ left: 19px;
+ bottom: 32px;
position: absolute;
- border: 1px solid #bbb;
+}
- background-image: linear-gradient(left, rgb(26,26,26) 0%, rgb(124,124,124) 62%, rgb(97,97,97) 94%);
- background-image: -o-linear-gradient(left, rgb(26,26,26) 0%, rgb(124,124,124) 62%, rgb(97,97,97) 94%);
- background-image: -moz-linear-gradient(left, rgb(26,26,26) 0%, rgb(124,124,124) 62%, rgb(97,97,97) 94%);
- background-image: -webkit-linear-gradient(left, rgb(26,26,26) 0%, rgb(124,124,124) 62%, rgb(97,97,97) 94%);
- background-image: -ms-linear-gradient(left, rgb(26,26,26) 0%, rgb(124,124,124) 62%, rgb(97,97,97) 94%);
- background-image: -webkit-gradient(
- linear,
- left,
- left,
- color-stop(0, rgb(26,26,26)),
- color-stop(0.62, rgb(124,124,124)),
- color-stop(0.94, rgb(97,97,97))
- );
+#energy-bar {
+ left: 14px;
+ bottom: 10px;
+ width: 290px;
+ height: 23px;
+ background: url(../img/bar_empty.png);
+ position: absolute;
}
#energy, #force {
- background: #674ba9;
- bottom: 0;
+ background: url(../img/bar_full.png);
+ top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
-
- background-image: linear-gradient(left, rgb(12,12,41) 0%, rgb(108,78,171) 62%, rgb(54,48,148) 94%);
- background-image: -o-linear-gradient(left, rgb(12,12,41) 0%, rgb(108,78,171) 62%, rgb(54,48,148) 94%);
- background-image: -moz-linear-gradient(left, rgb(12,12,41) 0%, rgb(108,78,171) 62%, rgb(54,48,148) 94%);
- background-image: -webkit-linear-gradient(left, rgb(12,12,41) 0%, rgb(108,78,171) 62%, rgb(54,48,148) 94%);
- background-image: -ms-linear-gradient(left, rgb(12,12,41) 0%, rgb(108,78,171) 62%, rgb(54,48,148) 94%);
- background-image: -webkit-gradient(
- linear,
- left,
- left,
- color-stop(0, rgb(12,12,41)),
- color-stop(0.62, rgb(108,78,171)),
- color-stop(0.94, rgb(54,48,148))
- );
}
#force {
- background: #990;
- height: 0;
-
- background-image: linear-gradient(left, rgb(7,7,79) 0%, rgb(75,18,194) 62%, rgb(24,16,180) 94%);
- background-image: -o-linear-gradient(left, rgb(7,7,79) 0%, rgb(75,18,194) 62%, rgb(24,16,180) 94%);
- background-image: -moz-linear-gradient(left, rgb(7,7,79) 0%, rgb(75,18,194) 62%, rgb(24,16,180) 94%);
- background-image: -webkit-linear-gradient(left, rgb(7,7,79) 0%, rgb(75,18,194) 62%, rgb(24,16,180) 94%);
- background-image: -ms-linear-gradient(left, rgb(7,7,79) 0%, rgb(75,18,194) 62%, rgb(24,16,180) 94%);
- background-image: -webkit-gradient(
- linear,
- left,
- left,
- color-stop(0, rgb(7,7,79)),
- color-stop(0.62, rgb(75,18,194)),
- color-stop(0.94, rgb(24,16,180))
- );
+ width: 33%;
}
+
@media (max-width: 340px) {
body, html {
margin: 0;
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -10,17 +10,20 @@
</head>
<body>
<section id="game">
- <canvas id="base" height="480" width="320"></canvas>
<canvas id="trails" height="480" width="320"></canvas>
- <div id="energy-bar">
- <div id="energy"></div>
- <div id="force"></div>
+ <canvas id="base" height="480" width="320"></canvas>
+ <div id="ingame">
+ <div id="strength">STRENGTH</div>
+ <div id="energy-bar">
+ <div id="energy"></div>
+ <div id="force"></div>
+ </div>
</div>
<div id="score"></div>
<div id="messages"></div>
</section>
<footer>
- <p>Split, a game designed and created by <a href="http://seld.be">Jordi Boggiano</a> for the GitHub Game Off 2012 contest.</p>
+ <p>Split, a game conceived and put together by <a href="http://seld.be">Jordi&nbsp;Boggiano</a> for the GitHub&nbsp;Game&nbsp;Off&nbsp;2012. Graphics by <a href="http://meret.com">Meret&nbsp;Vollenweider</a>.</p>
<p>Game sources <a href="https://github.com/Seldaek/split">available on GitHub</a>.</p>
</footer>
<script src="js/split.js"></script>
@@ -38,7 +41,8 @@
document.getElementById('energy'),
document.getElementById('force'),
document.getElementById('score'),
- document.getElementById('messages')
+ document.getElementById('messages'),
+ document.getElementById('ingame')
);
})();
</script>
View
@@ -22,8 +22,16 @@ Block.prototype.tick = function (multiplier) {
Block.prototype.draw = function (ctx, collCtx) {
var coords = this.matrix.map(this.x, this.y);
- ctx.fillStyle = '#cccccc';
+ ctx.save();
+ ctx.shadowColor = "#ba2c65";
+ ctx.shadowOffsetX = 0;
+ ctx.shadowOffsetY = 0;
+ ctx.shadowBlur = 5;
+ ctx.fillStyle = '#ba2c65';
ctx.fillRect(coords[0] - this.w / 2, coords[1] - this.h / 2, this.w, this.h);
+ ctx.restore();
+ ctx.fillStyle = '#aa285c';
+ ctx.fillRect(coords[0] - this.w / 2 + 1, coords[1] - this.h / 2 + 1, this.w - 2, this.h - 2);
collCtx.fillStyle = '#FF0000';
collCtx.fillRect(coords[0] - this.w / 2 - 3, coords[1] - this.h / 2 - 3, this.w + 6, this.h + 6);
View
@@ -21,8 +21,8 @@ EnergyBar.prototype.tick = function (multiplier) {
};
EnergyBar.prototype.draw = function () {
- this.forceNode.style.height = Math.round(this.force * 100).toString() + '%';
- this.energyNode.style.height = Math.round(this.energy * 100).toString() + '%';
+ this.forceNode.style.width = Math.round(this.force * 100).toString() + '%';
+ this.energyNode.style.width = Math.round(this.energy * 100).toString() + '%';
};
EnergyBar.prototype.start = function () {
View
@@ -17,12 +17,14 @@ var Node = function (game, matrix, x, y, angle, speed) {
this.accel = 0;
};
+Node.IMAGE = new Image();
+Node.IMAGE.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAATCAYAAACQjC21AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAxBJREFUeNpcVDtvFDEQnrG9G/aOy5ELESSEcAiBAkJ0QEODRIMoaGno6KjS8UfgPyAqGmgoEA0lDWkQUhoCinhccrnblz02440dGU76ZJ/X83m+eeHDjxMIPwwQCVRyHu9YhmNQ2FNydmwAgcDvJSML37LkDIORh2HoQIbhvz+3KiGLHuUBC2HN/nvYG7cBTcAxaSopkhUBfUKRORTIXzsP+ddJRWsLYckTlokySAmjTE/UY6sBCZmvl79vDOb794y1IyILRhu0zv4sF5ffTUer286BRGcjmY2SU6knPBl71d882H1wfrL7FKwZWuugqTU0TctooL+7c1+tX3o+2bj61iHzOUdBMongnYyEVoh8PN+7M97f3XJKDt1CD2zWZ98XAfuMou9FLRVfP2/1fuzcdkJGZd5exmR0ki2KhaVmvrrx+/tjTaIAx3ddDsg2QkmGAlQZYJazU9gvvm4/yqrZshNCBZUyLRXFhDisDq5hXV0hPrb8luOcAPI1lGHlM4ZlDjGfXsWmWgOfuECo/ilozqfVesTBz53kiBOFSkYgjqOHjyeRA8G+aDIDS7aXlB3EOoRYmGzQtK22Dhuhjk74gyc0PstgyHQ3La+tbo2DLs0u7RQXWwg5ME1e7NRkDlxdLSkmQxbR1QN7ZoxhIuK1grIswQj5DZT6lbagSFtJ8rOT4cqXw8XlN6Yqoa4rLpcadMNoG0YJ8/kUZodzoIqxNn7vBqe+da+EslFJP/rKr7lsyr0Lmy/PHP65jNPJLacWuiQYttFaQ8t1aMpDoNHKB3399isrZINETbAnufnkmUgnCsuWOi/q6tTKJyxngv78XG1ms17LHmn2mCz9MufGr83Nuy9cf7DHZBWbzb0zXiXy+JJJ653wrcc4yQVbSGp7ajq5SFqf5cDknIAWs+yHHZ7ecTIruYvKQFYFwlaFgMZZ18RZh9z8JLKaRmf3eSzIcMH5BCMZy2R1uF+FVafjy4agYpJ1w41fs8YsKBDdQ0ffdECb7G2cNi4hikOTwl4lwzVOlXRSR6I4sd1fAQYAlue9+sEeac8AAAAASUVORK5CYII';
+
Node.prototype.tick = function (multiplier) {
var coords;
this.x += this.speed * Math.cos(this.angle) * multiplier;
this.y += this.speed * Math.sin(this.angle) * multiplier;
-// this.y += this.baseSpeed * multiplier;
coords = this.matrix.map(this.x, this.y);
this.mappedX = coords[0];
@@ -74,15 +76,11 @@ Node.prototype.bounce = function () {
};
Node.prototype.draw = function (ctx, trails) {
- ctx.fillStyle = '#eadc00';
- ctx.beginPath();
- ctx.arc(this.mappedX, this.mappedY, 4, 0, Math.PI*2, true);
- ctx.closePath();
- ctx.fill();
+ ctx.drawImage(Node.IMAGE, this.mappedX - 11, this.mappedY - 10);
- trails.ctx.fillStyle = '#eadc00';
+ trails.ctx.fillStyle = '#8faec8';
trails.ctx.beginPath();
- trails.ctx.arc(this.mappedX, this.mappedY, 3, 0, Math.PI*2, true);
+ trails.ctx.arc(this.mappedX, this.mappedY, 2+Math.random()*2, 0, Math.PI*2, true);
trails.ctx.closePath();
trails.ctx.fill();
};
View
@@ -1,4 +1,4 @@
-var Split = function (node, trailsNode, energyNode, forceNode, scoreNode, messagesNode) {
+var Split = function (node, trailsNode, energyNode, forceNode, scoreNode, messagesNode, ingameNode) {
this.canvas = node;
this.collisionMap = document.createElement('canvas');
@@ -11,6 +11,7 @@ var Split = function (node, trailsNode, energyNode, forceNode, scoreNode, messag
this.energyBar = new EnergyBar(this, energyNode, forceNode);
this.scoreNode = scoreNode;
this.messagesNode = messagesNode;
+ this.ingameNode = ingameNode;
if (window.localStorage && !isNaN(parseInt(window.localStorage.getItem('highscore'), 10))) {
this.scoreNode.innerHTML = "HIGHSCORE " + window.localStorage.getItem('highscore') + "";
@@ -49,8 +50,9 @@ Split.prototype.start = function () {
this.playing = true;
this.paused = false;
this.score = 0;
+ this.ingameNode.className = 'playing';
- this.addNode(new Node(this, this.matrix, this.canvas.width / 2, 40));
+ this.addNode(new Node(this, this.matrix, this.canvas.width / 2, 80));
this.initControls();
this.tick();
@@ -59,6 +61,7 @@ Split.prototype.start = function () {
Split.prototype.gameOver = function () {
var msg, highscore, newHighscore = false;
this.playing = false;
+ this.ingameNode.className = '';
this.removeControls();
if (window.localStorage) {
@@ -115,8 +118,8 @@ Split.prototype.tick = function () {
this.matrix,
Math.random() * this.canvas.width,
20 + this.matrix.y + Math.random() * 20,
- Math.max(1, this.difficulty * this.canvas.width / 1.5 - 10 + Math.random() * 5),
- Math.max(1, Math.random() * this.difficulty * 40)
+ Math.max(10, this.difficulty * this.canvas.width / 1.5 - 10 + Math.random() * 5),
+ Math.min(Math.max(3, Math.random() * this.difficulty * 10), 10)
));
}
@@ -161,9 +164,7 @@ Split.prototype.draw = function () {
this.trails.draw(this.frame);
this.energyBar.draw();
- this.ctx.fillStyle = '#000000';
- this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
- //this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+ this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.collisionCtx.fillStyle = '#000000';
this.collisionCtx.fillRect(0, 0, this.canvas.width, this.canvas.height);
for (i = 0, len = this.nodes.length; i < len; i++) {
View
@@ -16,7 +16,7 @@ Trails.prototype.draw = function (frame) {
while (this.processedFrames < frame) {
imageData = this.ctx.getImageData(this.areaX, this.areaY, this.areaWidth, this.areaHeight);
for (i = 0, len = imageData.data.length; i < len; i += 4) {
- imageData.data[i+3] *= 0.9;
+ imageData.data[i+3] *= 0.8;
}
this.ctx.putImageData(imageData, this.areaX, this.areaY + this.matrix.speed / 25);

0 comments on commit f0335c4

Please sign in to comment.