Skip to content
Browse files

experimentage met donkerder thema

  • Loading branch information...
1 parent b53b989 commit e1d850374b0b8405a59143c015d27cd76a726090 Marcus Klaas de Vries committed Apr 6, 2012
Showing with 70 additions and 59 deletions.
  1. +1 −1 client/DOM.js
  2. +3 −3 client/GameEngine.js
  3. +1 −2 client/Player.js
  4. +63 −51 client/index.html
  5. +2 −2 test-server/helper.c
View
2 client/DOM.js
@@ -64,7 +64,7 @@ function createDomManager(game) {
function resizeWindow() {
if(game.state == 'editing')
- editor.resize();
+ game.editor.resize();
else if(game.state == 'playing' || game.state == 'watching' ||
game.state == 'ended' || game.state == 'countdown')
View
6 client/GameEngine.js
@@ -6,7 +6,6 @@ var rareNaam = (function() { // zodat we het zien als sommige plekken nog op een
var indexToPlayer = new Array(8);
var websocket;
var receiver;
- var torus = false;
var connected = false;
var canvasContainer;
var fpsMeasureTick = 0;
@@ -478,6 +477,7 @@ var rareNaam = (function() { // zodat we het zien als sommige plekken nog op een
this.type = 'custom';
this.scaleX = this.scaleY = 0;
this.noMapSent = false;
+ this.torus = false;
this.width = 0;
this.height = 0;
this.velocity = 0;
@@ -727,7 +727,7 @@ var rareNaam = (function() { // zodat we het zien als sommige plekken nog op een
this.holeSize = obj.hsize;
this.holeFreq = obj.hfreq;
this.pencilMode = obj.pencilmode;
- torus = (obj.torus != 0);
+ this.torus = (obj.torus != 0);
if(this.pencilMode != 'off')
this.pencil.setParameters(obj);
@@ -745,7 +745,7 @@ var rareNaam = (function() { // zodat we het zien als sommige plekken nog op een
document.getElementById('holeSize').value = this.holeSize;
document.getElementById('holeFreq').value = this.holeFreq;
document.getElementById('goal').value = obj.goal;
- document.getElementById('torus').checked = torus;
+ document.getElementById('torus').checked = this.torus;
document.getElementById('inkCapacity').value = obj.inkcap;
document.getElementById('inkRegen').value = obj.inkregen;
document.getElementById('inkDelay').value = obj.inkdelay;
View
3 client/Player.js
@@ -135,8 +135,7 @@ Player.prototype.simulate = function(endTick, ctx, state) {
ctx.drawLine(state.x, state.y, state.x = nextX, state.y = nextY);
/* wrap around: FIXME: werkt niet meer goed sinds FP ticks */
- if(this.game.torus && wholeTick && (state.x < 0 ||
- state.x > this.game.width || state.y < 0 || state.y > this.game.height)) {
+ if(this.game.torus && wholeTick) {
if(state.x > this.game.width)
state.x = 0;
else if(state.x < 0)
View
114 client/index.html
@@ -4,7 +4,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Achtung, die Kurve!</title>
- <link rel="stylesheet" type="text/css" href="base.css" />
+ <link rel="stylesheet" type="text/css" href="alt.css" />
<script src="DOM.js"></script>
<script src="communication.js"></script>
<script src="GameEngine.js"></script>
@@ -50,7 +50,7 @@ <h2 id="gameTitle"></h2><div id="goalDisplay"></div>
<section id="canvasContainer">
<div id="menuButton">&lt;</div>
<canvas id="baseCanvas"></canvas>
- <div id="winAnnouncer"></div>
+ <h2 id="winAnnouncer"></h2>
<div id="status"></div>
<div id="inkIndicator">
<div id="inkWrap">
@@ -62,58 +62,66 @@ <h2 id="gameTitle"></h2><div id="goalDisplay"></div>
<article id="connectionContainer" class="contentVisible">
<section>
- <h1>Achtung, die Kurve!</h1>
+ <div class="contentWrap">
+ <header>
+ <h1>Achtung, die Kurve!</h1>
+ </header>
- <div id="noWebsocket" class="alert alert-error">
- It seems like your browser does not support websockets! This is required to play the game. Please consider trying a websocket compliant browser like Firefox, Chrome or Safari.
- </div>
+ <div id="noWebsocket" class="alert alert-error">
+ It seems like your browser does not support websockets! This is required to play the game. Please consider trying a websocket compliant browser like Firefox, Chrome or Safari.
+ </div>
- <div id="introduction">
- <p id="welcome">Welcome to our online remake of the classic Achtung die Kurve! Instead of running on a single computer, this version works over the internet. If you are unfamiliar with the game, check out the quick-start guide below. Otherwise, enter your nickname and have fun!</p>
- <div id="connectForm">
- <input type="text" id="playername" placeholder="playername" />
- <button id="connect" class="primary">Connect</button>
+ <div id="introduction">
+ <p id="welcome">Welcome to our online remake of the classic Achtung die Kurve! Instead of running on a single computer, this version works over the internet. If you are unfamiliar with the game, check out the quick-start guide below. Otherwise, enter your nickname and have fun!</p>
+ <div id="connectForm">
+ <input type="text" id="playername" placeholder="playername" />
+ <button id="connect" class="primary">Connect</button>
+ </div>
</div>
- </div>
- <input type="checkbox" id="readMore" />
- <label for="readMore">
- <span>Expand quick start guide &darr;</span>
- <span>Collapse quick start guide &uarr;</span>
- </label>
+ <input type="checkbox" id="readMore" />
+ <label for="readMore">
+ <span>Expand quick start guide &darr;</span>
+ <span>Collapse quick start guide &uarr;</span>
+ </label>
- <div id="guide">
- <h3>The goal</h3>
- <p>In this game you are a snake which you can steer in two directions. The ultimate goal of the game has always been to survive as long as possible. You do this by avoiding collision with yourself, other players, the edges of the map and other obstacles. Every time an opponent fails to do this, you receive some points. The first player to reach a set point limit wins the game! Simple enough, right? When you die, you do not have to sit and wait until the next round: you can then draw obstacles on the map to sabotage the players that are still alive. <strong>Pro-tip:</strong> go for the player that is leading in points!</p>
- <h3>The basic controls</h3>
- <p>The basic controls are fairly simple, but depend on the type of device you are playing the game on. For machines with keyboards connected, you can steer your snake to the left or the right by holding the respective arrow keys. On fancy touch devices like mobile phones or tablets, you can steer by pressing the left and right of the playing field. To draw obstacles, simply click and drag on the playing field with either the mouse or a finger, depending on your machine. Keep an eye on the ink indicator in the bottom right corner of the field!</p>
- <h3>Automatches</h3>
- <p>There are two types of games. Automatches and custom games. Automatches are the easiest way to find a game. You specify with how many people you'd like to play and press the automatch button. You automatically join a game which fits your requirements, or a new game is created if such a game cannot be found. The game automatically starts when there are enough players. These automatches always use the default settings.</p>
- <h3>Custom games</h3>
- <p>Custom games on the other hand have a host, who desides when the game starts and has the authority to kick people from the game. The host can also set the game parameters to values of his or her liking (within reason). In addition, it is possible to add computer players to the game. Finally, you can also build your own map. Create obstacles, fixed starting positions and even teleporters! There are incredibly many different ways to make the game even more crazy!</p>
+ <div id="guide">
+ <h3>The goal</h3>
+ <p>In this game you are a snake which you can steer in two directions. The ultimate goal of the game has always been to survive as long as possible. You do this by avoiding collision with yourself, other players, the edges of the map and other obstacles. Every time an opponent fails to do this, you receive some points. The first player to reach a set point limit wins the game! Simple enough, right? When you die, you do not have to sit and wait until the next round: you can then draw obstacles on the map to sabotage the players that are still alive. <strong>Pro-tip:</strong> go for the player that is leading in points!</p>
+ <h3>The basic controls</h3>
+ <p>The basic controls are fairly simple, but depend on the type of device you are playing the game on. For machines with keyboards connected, you can steer your snake to the left or the right by holding the respective arrow keys. On fancy touch devices like mobile phones or tablets, you can steer by pressing the left and right of the playing field. To draw obstacles, simply click and drag on the playing field with either the mouse or a finger, depending on your machine. Keep an eye on the ink indicator in the bottom right corner of the field!</p>
+ <h3>Automatches</h3>
+ <p>There are two types of games. Automatches and custom games. Automatches are the easiest way to find a game. You specify with how many people you'd like to play and press the automatch button. You automatically join a game which fits your requirements, or a new game is created if such a game cannot be found. The game automatically starts when there are enough players. These automatches always use the default settings.</p>
+ <h3>Custom games</h3>
+ <p>Custom games on the other hand have a host, who desides when the game starts and has the authority to kick people from the game. The host can also set the game parameters to values of his or her liking (within reason). In addition, it is possible to add computer players to the game. Finally, you can also build your own map. Create obstacles, fixed starting positions and even teleporters! There are incredibly many different ways to make the game even more crazy!</p>
+ </div>
</div>
-
- <div id="credits">
+
+ <footer>
This game was made by Marcus and Rik as a holiday project. The code is hosted at <a href="https://github.com/marcusklaas/Achtung--die-Kurve-">github</a>, which you are free to fork. If you have any suggestions or complaints, or if you just want to tell us what you think about the game, send us an email at <a href="mailto:devnull@diekurve.net">devnull@diekurve.net</a>!
- </div>
+ </footer>
</section>
</article>
<article id="gameListContainer">
<section>
- <h2>Game List</h2>
- <div id="listWrapper">
- <table id="gameList" class="zebra-striped bordered-table">
- <thead><tr><th>#</th><th>Type</th><th>Host</th><th>State</th><th>Players</th><th></th></tr></thead>
- <tbody></tbody></table>
- <div id="noGames">No games active!</div>
+ <div class="contentWrap">
+ <header>
+ <h2>Game List</h2>
+ </header>
+ <div id="listWrapper">
+ <table id="gameList" class="zebra-striped bordered-table">
+ <thead><tr><th>#</th><th>Type</th><th>Host</th><th>State</th><th>Players</th><th></th></tr></thead>
+ <tbody></tbody></table>
+ <div id="noGames">No games active!</div>
+ </div>
</div>
+ <a id="createGame" class="btn primary">Create Game</a>
+
<div id="automatchContainer">
<span class="add-on">Minimum players</span><input type="number" min="1" max="8" steps="1" value="2" id="minplayers" /><span class="add-on">Maximum players</span><input type="number" min="1" max="8" steps="1" value="2" id="maxplayers" /><a id="automatch" class="btn primary">Automatch</a>
</div>
-
- <a id="createGame" class="btn primary">Create Game</a>
</section>
</article>
@@ -160,13 +168,17 @@ <h3 id="modalHeader">Modal header</h3>
<div class="btn-group">
<a id="editorDone" class="btn primary">Done</a>
</div>
- </div>
- </section>
- </article>
+ </div>
+ </div>
+ </section>
+ </article>
- <article id="waitContainer">
- <section>
- <h2>Game Settings</h2>
+ <article id="waitContainer">
+ <section>
+ <div class="contentWrap">
+ <header>
+ <h2>Game Settings</h2>
+ </header>
<table id="details">
<tr>
<td>Minimum players</td>
@@ -232,25 +244,25 @@ <h3 id="modalHeader">Modal header</h3>
<div id="hostContainer">
<div class="btn-group">
- <a id="addComputerEasy" class="btn">Add Easy Computer</a>
+ <a id="addComputerEasy" class="btn">+ Easy AI</a>
</div>
-
+
<div class="btn-group">
- <a id="addComputerHard" class="btn">Add Hard Computer</a>
+ <a id="addComputerHard" class="btn">+ Hard AI</a>
</div>
-
+
<div class="btn-group">
- <a id="editorStart" class="btn">Draw Custom Map</a>
+ <a id="editorStart" class="btn">Customize Map</a>
</div>
-
+
<div class="btn-group">
<a id="startGame" class="btn primary">Start Game</a>
</div>
</div>
-
+
<div id="nonhostContainer"></div>
- <div id="friendInviter" class="alert alert-info">Don't play alone, invite your friends!</div>
+ <div id="friendInviter">Don't play alone, invite your friends!</div>
</section>
</article>
</body>
View
4 test-server/helper.c
@@ -598,11 +598,11 @@ char *getFileExt(char *path) {
#ifdef _WIN32
#include <windows.h>
- inline void msleep(unsigned int msecs) {
+ void msleep(unsigned int msecs) {
Sleep(msecs);
}
#else
- inline void msleep(unsigned int msecs) {
+ void msleep(unsigned int msecs) {
usleep(1000 * msecs);
}
#endif

0 comments on commit e1d8503

Please sign in to comment.
Something went wrong with that request. Please try again.