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.
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>
