By continuing to use the site, you agree to the use of cookies. You can find out more by following this link. I Accept
navi icon
Part one two three or so of a raw sketches collection about story telling puzzle games.
2015-07-21 19:29:06 Before I start, here some back-links:
About linear story telling. I'm sorry. I have to add the prototype sometimes.

Where you can play the Puzzle Adventure prototype This is a match 2 single person RPG.

The game All Men Are Pigs is a match for path-finding.


<style>
body {overflow: hidden;}
body, div, span {font-family: sans-serif;margin: 0; padding: 0;}
.cell {
min-width: 50px;
min-height: 50px;
width: 20%;
padding: 5px;
margin: 5px;
border: 10px #000 solid;
background: #aaa;
color: #000;
text-shadow: 1px 1px 2px rgba(255,255,255,0.85), -1px -1px 2px rgba(255,255,255,0.85), -1px 1px 2px rgba(255,255,255,0.85), 1px -1px 2px rgba(255,255,255,0.85);
display: inline-block;
}
#message {
color: white;
background: black;
width: 98%;
margin: 0;
padding: 1%;
min-height: 50px;
}
</style>

<div id="message"> </div>
<div id="output"> </div>

Another little code talk:
you can copy this code of a combination game and this shell work.
Place these lines of code into the body element of an HTML5 document.

<script>
/**
the singelton game class
*/
var game = {};
/**
the callable functions of the game
@attribute methods
*/
game.methods = {};
/**
combinations should call a callable game method
@attribute combinations
*/
game.combinations = [];
/**
the clicked/selected objects
@attribute queue
*/
game.queue = [];
/**
implemented as a click event
@method validate
*/
game.validate = function(id) {
game.queue.push(id);
//we can look for an combination
if (game.queue.length > 1) {
var combi = null;
//this is better then a return
//it allows a fine reaction in the future
var wrong = true;
for (var i = 0; i < game.combinations.length; i++) {
combi = game.combinations;
//find the right combination
if (combi.a == game.queue[0] && combi.b == game.queue[1]) {
//game['methods']['showMessage'](game.queue[0],'that's fine. No double fine!');
for (var j = 0; j < combi.calls.length; j++) {
//running through the combination calls
game['methods'][combi.calls[j].method](combi.calls[j].id,combi.calls[j].value);
}
wrong = false;
} else if ((combi.a == game.queue[0] && combi.a == game.queue[1]) ||
(combi.b == game.queue[0] && combi.b == game.queue[1])
)
{

} else if (combi.b == game.queue[0] && combi.a == game.queue[1] )
{
//give a hint here like
game['methods']['showMessage'](game.queue[1],'Something goes the wrong way.');
wrong = false;
} else {

}
}
if (wrong) {
game['methods']['isWrong'](game.queue[0]);
}
//clear the waiting line
game.queue = [];
//finally draw the result
game.draw();
} else {
//game.queue.push(id);
}
};
/**
this might not be part of the game methods
a callable game method
@method isWrong
*/
game.methods.isWrong = function(id) {
game.methods.showMessage(id, 'This is wrong.');
//we need more 'wrong' messages, so we can randomly access them.
};
/**
shell we show the object?
a callable game method
@method showObject
@param id - the id of the changing object
@param value - here a boolean true or false
*/
game.methods.showObject = function(id, value) {
game.getObject(id).visible = value;
};
/**
we don't use this right now
later on this might change to in-|decreaseObjectStatus
a callable game method
@method changeObjectStatus
@param id - the id of the changing object
@param value - the new status value
*/
game.methods.changeObjectStatus = function(id, value) {
game.getObject(id).status = value;
};

game.methods.increaseObjectStatus = function(id, value) {
game.getObject(id).status += value;
};

game.methods.decreaseObjectStatus = function(id, value) {
game.getObject(id).status -= value;
};

game.methods.onObjectStatus = function(id, value, calls) {
if (game.getObject(id).status >= value) {
for (var j = 0; j < calls.length; j++) {
game['methods'][combi.call[j].method](combi.calls[j].id,combi.calls[j].value);
}
};
};
/**
a callable game method
@method changeObjectColor
@param id - the id of the changing object
@param value - the new color of the object. A html conform color value.
*/
game.methods.changeObjectColor = function(id, value) {
game.getObject(id).color = value;
};
/**
a callable game method
@method showMessage
@param id - the id of the object saying this
@param value - the message to say to
*/
game.methods.showMessage = function(id, value) {
document.getElementById('message').innerHTML = '';
document.getElementById('message').appendChild(
document.createTextNode(game.getObject(id).name+' says: '+value));
};
/**
all objects of the game
@attribute objects
*/
game.objects = [];
/**
@method getObject
@param id - the id of the object to return to
@return null or the wanted game-object
*/
game.getObject = function(id) {
for (var i = 0; i < game.objects.length; i++) {
if (game.objects.id == id) {
return game.objects;
}
}
return null;
};
/**
@class GameObject
@param id - the unique object refrence
@param name - the name of the object. This may not be unique
@param visible - boolean
@param status - a value between [n .. m] - how far have we developed?
@param color - the current visible representation - not a unique value
*/
function GameObject(id, name, v, c, st) {
this.visible = v;
this.status = st;
this.color = c;
this.name = name;
this.id = id;
};
/**
@class GameCombination
@param a - the reference id of the first object
@param b - according to a the reference id of the second object b
@param calls - an array of method calls {method:'method-name',id:'the id of the object to change',value:'value'}
*/
function GameCombination (a, b, calls) {
this.a = a;
this.b = b;
/**
an array of method calls {method:'method-name',id:'the id of the object to change',value:'value'}
*/
this.calls = calls;
};
/**
currently based on the manipulation of the html context
@method draw
@see game.validate
*/
game.draw = function() {
var out = document.getElementById('output');
var obj = null;
var ele = null;
out.innerHTML = '';
for (var i = 0; i < game.objects.length; i++) {
obj = game.objects;
if (obj.visible) {
ele = document.createElement('div');
ele.className = 'cell';
ele.setAttribute('onclick','game.validate(''+obj.id+'');');
ele.appendChild(document.createTextNode(''+obj.id));
ele.appendChild(document.createElement('br'));
ele.appendChild(document.createTextNode(''+obj.name));
ele.style.background = obj.color;
out.appendChild(ele);
}
}
};
/**
prepare the game or the first time/restart
@method init
*/
game.init = function() {
game.object = [];
game.combinations = [];
game.queue = [];
//creating and adding 3 game objects
game.objects.push( new GameObject('a', 'Amber', true, '#00f', 0) );
game.objects.push( new GameObject('b', 'Bea', true, '#f00', 1) );
game.objects.push( new GameObject('c', 'Celia', false, '#0f0', 0) );
//adding ONE combination - what a game!
game.combinations.push( new GameCombination('a', 'b', [{method:'showObject', id: 'a', value: false},
{method:'showObject', id: 'c', value: true},{method:'showMessage', id: 'a', value: 'That's fine with me, although I'm vanishing away!'}]));
game.combinations.push( new GameCombination('c', 'b', [{method:'showObject', id: 'b', value: false},
{method:'showObject', id: 'c', value: true},{method:'showMessage', id: 'b', value: 'Oh, no! What have you done?'}]));
//now we draw the whole thing for the first time
game.draw();
}
//Let's start the whole thing on page load
window.onload = setTimeout(game.init, 100);
</script>



Share the article: 




comments powered by Disqus
create your own online editor

create your own online editor

With javascript for javascript. first: open the chrome console click on the menu icon in the top right choose the option 'More tools', click next 'Developer Tools'.

Preparing for GDC 2015

Preparing for GDC 2015

GDC 2015 will start soon. For the first time I will be an IGDA volunteering minion.