Commit 9f63f371 authored by Raphaël Bastide's avatar Raphaël Bastide

Levels, level list, README addition

parent 05b6e9a1
......@@ -2,15 +2,24 @@
A game you play in the URL
![](burl.png)
![](img/burl.png)
## Modify
It is easy to add more bonuses and platforms. For that, check out [`js/units.json`](https://gitlab.com/raphaelbastide/burl/blob/master/js/units.json).
### How to add a platform type
### Create your own level
**Soon**
- Fork this project and add a new `json` file in the `levels/` directory.
- You can copy the content of `levels/default.json` as a starter
- You can change the positions (`posX`,`posY`) of the bonuses and if want and can, create new [bonuses and platforms](#create-new-platform-types)
- Add your level in `levels/level-list.json` by adding its `name` and `file`
- Test your level
- Create a pull request to make your level available to the players
## Create new platform types
(soon)
## Thanks
......
......@@ -70,7 +70,7 @@ aside .inner{
}
.box{
border-radius: 10px;
padding: 5px;
padding: 5px 10px;
border:2px solid black;
align-self: flex-start;
width:25%;
......@@ -98,7 +98,6 @@ aside .inner{
#inventory p:first-child{
margin: 0 0 5px 0
}
#inventory p.locked{
opacity: .5;
position: relative;
......@@ -109,6 +108,9 @@ aside .inner{
#help{
background: #35f531;
}
#levelbox{
background: #9779fc;
}
p[data-char]{
/* background: #ffffff77; */
border-radius: 1em 2px 2px 1em;
......@@ -173,7 +175,7 @@ p[data-char]{
.pause-btn.button:hover{background: white;}
.paused .pause-icon, .play-icon{display: none;}
.pause-icon, .paused .play-icon{display: block;}
.button{
.button, a{
cursor: url(../img/pointer.png) 0 0, auto;
}
a{color: inherit;}
......@@ -29,6 +29,11 @@
<div id="infobox" class="box">
<span>Info</span>
</div>
<details id="levelbox" class="box button">
<summary>Levels</summary>
<div id="level-list"></div>
<p><a href="https://gitlab.com/raphaelbastide/burl#create-your-own-level">→ Create your own level</a></p>
</details>
<details id="help" class="box button">
<summary>Help</summary>
<p>To make a track for the ball, add the available inventory letters after a “#” in this url, just like that: <a href="#dff">#dff</a>. <a href="#dff"><img src="img/url.svg"></a></p>
......@@ -44,12 +49,13 @@
<span class="pause-icon"></span>
</span>
</main>
<script type="text/javascript" src="js/js.cookies.js"></script>
<script type="text/javascript" src="lib/decomp.js"></script>
<script type="text/javascript" src="lib/pathseg.js"></script>
<script src="lib/matter.min.js"></script>
<script src="js/start.js"></script>
<script src="js/functions.js"></script>
<script src="js/world.js"></script>
<script src="js/start.js"></script>
<!-- Matomo -->
<script type="text/javascript">
var _paq = window._paq || [];
......
......@@ -5,14 +5,53 @@ var d = document,
main = d.getElementsByTagName("main")[0]
function preloadImgs() {
var images = ['burl-ball.svg','burl-bonus.svg'];
var images = ['img/burl-ball.svg','img/burl-bonus.svg'];
for (var i = 0; i < arguments.length; i++) {
images[i] = new Image();
images[i].src = preload.arguments[i];
images[i] = new Image();
images[i].src = preload.arguments[i];
}
}
preloadImgs()
function listLevels(){
var levelList
var request = new XMLHttpRequest();
request.open('GET', 'levels/level-list.json');
request.onload = function() {
if (request.status >= 200 && request.status < 400) {
levelList = JSON.parse(request.responseText);
var levels = levelList.levels
for (var i = 0; i < levels.length; i++) {
var file = "levels/"+levels[i].file
var line = d.createElement("p")
line.setAttribute('data-file', file)
line.setAttribute('class', 'level-link')
line.setAttribute('onclick', 'selectLevel("'+file+'",true)')
line.innerHTML = levels[i].name
d.getElementById('level-list').appendChild(line)
}
}else{
console.log('json not found');
}
};
request.onerror = function() {
console.log('json request error');
};
request.send();
}
listLevels()
//
// var levelList = d.querySelectorAll('.level-link')
// console.log(levelList);
// for (var i = 0; i < levelList.length; i++) {
// console.log(levelList[i]);
// levelList[i].addEventListener("click", function(){
// selectLevel(file, true)
// });
// }
function getDistances(unit){
var realW = unit.bounds.max.x - unit.bounds.min.x
var realH = unit.bounds.max.y - unit.bounds.min.y
......
/*!
* JavaScript Cookie v2.2.0
* https://github.com/js-cookie/js-cookie
*
* Copyright 2006, 2015 Klaus Hartl & Fagner Brack
* Released under the MIT license
*/
;(function (factory) {
var registeredInModuleLoader = false;
if (typeof define === 'function' && define.amd) {
define(factory);
registeredInModuleLoader = true;
}
if (typeof exports === 'object') {
module.exports = factory();
registeredInModuleLoader = true;
}
if (!registeredInModuleLoader) {
var OldCookies = window.Cookies;
var api = window.Cookies = factory();
api.noConflict = function () {
window.Cookies = OldCookies;
return api;
};
}
}(function () {
function extend () {
var i = 0;
var result = {};
for (; i < arguments.length; i++) {
var attributes = arguments[ i ];
for (var key in attributes) {
result[key] = attributes[key];
}
}
return result;
}
function init (converter) {
function api (key, value, attributes) {
var result;
if (typeof document === 'undefined') {
return;
}
// Write
if (arguments.length > 1) {
attributes = extend({
path: '/'
}, api.defaults, attributes);
if (typeof attributes.expires === 'number') {
var expires = new Date();
expires.setMilliseconds(expires.getMilliseconds() + attributes.expires * 864e+5);
attributes.expires = expires;
}
// We're using "expires" because "max-age" is not supported by IE
attributes.expires = attributes.expires ? attributes.expires.toUTCString() : '';
try {
result = JSON.stringify(value);
if (/^[\{\[]/.test(result)) {
value = result;
}
} catch (e) {}
if (!converter.write) {
value = encodeURIComponent(String(value))
.replace(/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g, decodeURIComponent);
} else {
value = converter.write(value, key);
}
key = encodeURIComponent(String(key));
key = key.replace(/%(23|24|26|2B|5E|60|7C)/g, decodeURIComponent);
key = key.replace(/[\(\)]/g, escape);
var stringifiedAttributes = '';
for (var attributeName in attributes) {
if (!attributes[attributeName]) {
continue;
}
stringifiedAttributes += '; ' + attributeName;
if (attributes[attributeName] === true) {
continue;
}
stringifiedAttributes += '=' + attributes[attributeName];
}
return (document.cookie = key + '=' + value + stringifiedAttributes);
}
// Read
if (!key) {
result = {};
}
// To prevent the for loop in the first place assign an empty array
// in case there are no cookies at all. Also prevents odd result when
// calling "get()"
var cookies = document.cookie ? document.cookie.split('; ') : [];
var rdecode = /(%[0-9A-Z]{2})+/g;
var i = 0;
for (; i < cookies.length; i++) {
var parts = cookies[i].split('=');
var cookie = parts.slice(1).join('=');
if (!this.json && cookie.charAt(0) === '"') {
cookie = cookie.slice(1, -1);
}
try {
var name = parts[0].replace(rdecode, decodeURIComponent);
cookie = converter.read ?
converter.read(cookie, name) : converter(cookie, name) ||
cookie.replace(rdecode, decodeURIComponent);
if (this.json) {
try {
cookie = JSON.parse(cookie);
} catch (e) {}
}
if (key === name) {
result = cookie;
break;
}
if (!key) {
result[name] = cookie;
}
} catch (e) {}
}
return result;
}
api.set = api;
api.get = function (key) {
return api.call(api, key);
};
api.getJSON = function () {
return api.apply({
json: true
}, [].slice.call(arguments));
};
api.defaults = {};
api.remove = function (key, attributes) {
api(key, '', extend(attributes, {
expires: -1
}));
};
api.withConverter = init;
return api;
}
return init(function () {});
}));
var data
var request = new XMLHttpRequest();
request.open('GET', 'js/units.json', true);
var defaultLevel = 'levels/default.json'
request.onload = function() {
if (request.status >= 200 && request.status < 400) {
data = JSON.parse(request.responseText);
console.log('request success');
launch(data, false)
} else {
console.log('json not found');
}
};
request.onerror = function() {
console.log('json request error');
};
request.send();
if (!Cookies.get('level')) { // if no level selected
selectLevel(defaultLevel, false)
console.log('No level selected => default level');
}else {
selectLevel(Cookies.get('level'), false)
console.log('Level '+Cookies.get('level')+' selected');
}
function selectLevel(level, isUpdate){
Cookies.set('level', level, { expires: 1 });
// Json request
request.open('GET', level);
request.onload = function() {
if (request.status >= 200 && request.status < 400) {
data = JSON.parse(request.responseText);
console.log('request success');
launch(data, isUpdate)
}else{
console.log('json not found');
}
};
request.onerror = function() {
console.log('json request error');
};
request.send();
}
......@@ -39,8 +39,8 @@ function launch(units, isRefresh){
}
if (isRefresh) { // removes canvas when hashchange
var c = d.getElementsByTagName('canvas')[0]
body.classList.remove('paused')
c.parentElement.removeChild(c)
body.classList.remove('paused')
resetInfo()
}
// Listen to the URL hash change
......@@ -49,6 +49,7 @@ function launch(units, isRefresh){
launch(units, true)
}
// Create the character List
makeInventory(data)
......
{
"units": [
{
"name": "flat",
"char": "f",
"role": "platform",
"verticalShift":"0",
"isLocked": false,
"color":"#D7D7CD",
"angle":"0",
"isStatic":true
},
{
"name": "down",
"char": "d",
"role": "platform",
"verticalShift":"-1",
"isLocked": false,
"color":"#eeeeee",
"angle":"0.2",
"isStatic":true
},
{
"name": "gap",
"char": "g",
"role": "platform",
"verticalShift": "0",
"isLocked": false,
"color":"#ffffff00",
"angle":"0",
"isStatic":true,
"isSensor":true
},
{
"name": "up",
"char": "u",
"role": "platform",
"verticalShift": "1",
"isLocked": true,
"color":"#66b3cf",
"angle":"-0.2",
"isStatic":true
},
{
"name": "boost",
"char": "b",
"role": "platform",
"verticalShift": "0",
"isLocked": true,
"color":"#e26262",
"angle":"0",
"isStatic":true
},
{
"name": "teleport",
"char": "t",
"role": "platform",
"verticalShift": "0",
"isLocked": true,
"color":"#532890",
"angle":"0",
"isStatic":true
},
{
"name": "invertedGravity",
"char": "i",
"role": "platform",
"verticalShift": "0",
"isLocked": true,
"color":"#69e262",
"angle":"0",
"isStatic":true
},
{
"name": "jump",
"char": "j",
"role": "platform",
"verticalShift": "0",
"isLocked": true,
"color":"#24b995",
"angle":"0",
"isStatic":true
},
{
"name": "bulletTime",
"char": "z",
"role": "platform",
"verticalShift": "0",
"isLocked": true,
"color":"#cfd231",
"angle":"0",
"isStatic":true
},
{
"name": "buildUp",
"role": "buildZone",
"char": "1",
"verticalShift": -500
},
{
"name": "buildDown",
"role": "buildZone",
"char": "0",
"verticalShift": 500
},
{
"name": "bonus1",
"role": "bonus",
"posX": 220,
"posY": 300,
"unlocks":"boost"
},
{
"name": "bonus2",
"role": "bonus",
"posX": 200,
"posY": 300,
"unlocks":"up"
},
{
"name": "bonus3",
"role": "bonus",
"posX": 280,
"posY": 300,
"unlocks":"jump"
},
{
"name": "bonus4",
"role": "bonus",
"posX": 300,
"posY": 300,
"unlocks":"invertedGravity"
},
{
"name": "bonus5",
"role": "bonus",
"posX": 800,
"posY": 100,
"unlocks":"bulletTime"
},
{
"name": "bonus6",
"role": "bonus",
"posX": 800,
"posY": 700,
"unlocks":"teleport"
}
]
}
{
"levels": [
{
"name": "Default",
"file": "default.json"
},
{
"name": "Creative",
"file": "creative.json"
}
]
}
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment