Commit 578852ef authored by Raphaël Bastide's avatar Raphaël Bastide

Renaming the project again, url is now burl.link + css reset + menu styles

parent d8097029
# URL Rider
# Burl
A game you build in your URL
......
burl.png

25.5 KB

......@@ -5,20 +5,15 @@ html, body{
height: 100%;
}
h1{
font-size: 50vh;
line-height: .9em;
margin: 0;
position: absolute;
top:0;
left: 0;
width: 100%;
z-index: 100;
font-weight: 200;
text-align: center;
font-weight: 900;
}
body.debug{
background:gray;
}
h1.hidden{display: none;}
body {
font:24px/1.1em 'version 4';
font:24px/1.4em 'version 4';
background: #7ceb9f;
font-weight: 700;
margin: 0;
......@@ -34,21 +29,37 @@ canvas{
}
aside{
position: absolute;
top:0;
justify-content: space-between;
display: flex;
top:10px;
left:0;
width: 100%;
padding: 5px 20px;
z-index: 200;
}
#alertbox p{
display: none;
background: yellow;
.box{
border-radius: 10px;
padding: 5px;
border:2px solid black;
}#alertbox p.visible{
align-self: flex-start;
}
#alertbox{
background: #d0c2ae;
}
#alertbox p{
/* display: none; */
}
#alertbox p.visible{
display: block;
}
#charindex{
line-height: .8em;
background: yellow;
}
#charindex p.locked{
color:#333;
text-decoration: line-through;
}
#help{
background: #35f531;
}
a{color: inherit;}
html {box-sizing: border-box;}*,*::before,*::after {box-sizing: inherit;}body,h1,h2,h3,h4,h5,h6,ul,ol,li,p,pre,blockquote,figure,hr {margin: 0;padding: 0;}ul {list-style: none;}input,textarea,select,button {color: inherit;font: inherit;letter-spacing: inherit;}input,textarea,button {border: 1px solid gray;}button {border-radius: 0;padding: 0.75em 1em;background-color: transparent;}button * {pointer-events: none;}embed,iframe,img,object,video {display: block;max-width: 100%;}table {table-layout: fixed;width: 100%;}[hidden] {display: none !important;}noscript {display: block;margin-bottom: 1em;margin-top: 1em;}
/* Buttons and input buttons */
[role="button"],input[type="submit"],input[type="reset"],input[type="button"],button { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box;}
input[type="submit"], input[type="reset"], input[type="button"], button { background: none; border: 0; color: inherit; font: inherit; line-height: normal; overflow: visible; padding: 0; -webkit-appearance: button; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }
input::-moz-focus-inner, button::-moz-focus-inner { border: 0; padding: 0;}
This diff is collapsed.
This diff is collapsed.
......@@ -4,22 +4,24 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui">
<meta name="theme-color" content="#000000">
<meta name="msapplication-navbutton-color" content="#000000">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="robots" content="noindex">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="fonts/stylesheet.css">
<title>Url Rider</title>
<title>burl</title>
</head>
<body>
<h1>URL <br> Rider</h1>
<aside>
<details id="charindex">
<summary>Characters</summary>
<h1>burl</h1>
<details id="charindex" class="box">
</details>
<details id="help" class="box">
<summary>Help</summary>
<p>To make a terrain for the ball to run, add some of the characters after a # in this url, just like that <a href="#dff">#dff</a>.</p><p>Available characters are listed in the «Characters» box.</p>
<p>An experiment by <a href="https://raphaelbastide.com/">Raphaël Bastide</a> made with <a href="http://brm.io/matter-js/">Matter.js</a>. <a href="https://gitlab.com/raphaelbastide/burl">Sources on Gitlab</a></p>
</details>
<details id="alertbox" class="box">
<summary>Info</summary>
</details>
<div id="alertbox"></div>
</aside>
<!-- <button class="play">play</button> -->
<script type="text/javascript" src="lib/decomp.js"></script>
......
......@@ -32,10 +32,6 @@ function findObjectsByKey(array, key, value) {
}
return result
}
function title(){
var t = d.getElementsByTagName('h1')[0]
window.setTimeout(function(){t.classList.add('hidden')},1000)
}
function getAvailableChar(data, role=false){
var availableChar = []
......@@ -59,9 +55,15 @@ function getAvailableChar(data, role=false){
function makeCharIndex(data){
var el = d.getElementById('charindex')
var availableChar = getAvailableChar(data,'platform')
el.innerHTML = "<summary>Characters</summary>" // first, empty (almost all) existing list
for (var i = 0; i < availableChar.length; i++) {
var p = d.createElement('p')
p.innerHTML = availableChar[i]
var char = availableChar[i]
var unit = findObjectsByKey(data.units, 'char', char)[0]
p.innerHTML = availableChar[i]+' : '+unit.name
if (unit.isLocked) {
p.classList.add('locked')
}
el.appendChild(p)
}
}
......@@ -76,10 +78,9 @@ function testHash(data){
return false
}else{
hashChar = hash.split('')
console.log(hashChar, availableChar);
for (var i = 0; i < hashChar.length; i++) {
if (availableChar.indexOf(hashChar[i]) <= -1) { // incompatible character
notifAlert(hashChar[i]+" is not a valid character")
notifAlert("["+hashChar[i]+"] is not a valid character")
}else {
cleanHash.push(hashChar[i])
}
......
......@@ -36,7 +36,7 @@
"char": "u",
"role": "platform",
"verticalShift": "1",
"isLocked": true,
"isLocked": false,
"color":"#eeeeee77",
"angle":"-0.2",
"isStatic":true
......@@ -52,7 +52,7 @@
"isStatic":true
},
{
"name": "time",
"name": "teleport",
"char": "t",
"role": "platform",
"verticalShift": "0",
......@@ -108,8 +108,8 @@
{
"name": "bonus1",
"role": "bonus",
"posX": 1300,
"posY": 500,
"posX": 200,
"posY": 400,
"unlocks":"boost"
},
{
......@@ -122,7 +122,7 @@
{
"name": "bonus3",
"role": "bonus",
"posX": 300,
"posX": 1300,
"posY": 200,
"unlocks":"up"
}
......
......@@ -13,6 +13,7 @@ function launch(units, isRefresh){
Body = Matter.Body,
Events = Matter.Events;
var debug = false,
body = document.getElementsByTagName('body')[0],
startX = 100,
startY = 300,
nextPos = 0,
......@@ -29,10 +30,10 @@ function launch(units, isRefresh){
zoom = 500,
zoomTarget = 500,
counterBonus = counterTime = counterZoom = 0,
bulletTime, bonusTime, isBackInTime, checkPoint, lastCollided = false
bulletTime, bonusTime, isTeleported, checkPoint, lastCollided = false
if (!debug || isRefresh) {
title() // Do not show title if hashchange refresh
if (debug) {
body.classList.add('debug')
}
if (isRefresh) { // removes canvas when hashchange
var c = d.getElementsByTagName('canvas')[0]
......@@ -75,8 +76,8 @@ function launch(units, isRefresh){
}
// Building common objects
var ball = Bodies.circle(100, 100, 100, { friction:1, frictionAir:.003, restitution: 0.2})
ball.render.sprite.texture = 'img/ball.svg'
var ball = Bodies.circle(100, 100, 100, { friction:1, frictionAir:0.000001, restitution: 0.4})
ball.render.sprite.texture = 'img/burl-ball.svg'
const bonuses = findObjectsByKey(data.units, 'role', 'bonus')
for (var i = 0; i < bonuses.length; i++) {
var bonus = bonuses[i]
......@@ -113,13 +114,17 @@ function launch(units, isRefresh){
}
w += w * Math.round(Math.abs(unit.angle))
var toBuild = Bodies.rectangle(posX, posY, w - strokeWidth*2, h - strokeWidth*2, {isStatic:unit.isStatic,angle: Math.PI * unit.angle})
toBuild.isLocked = unit.isLocked
if (debug) {
toBuild.isLocked = false
}else {
toBuild.isLocked = unit.isLocked
}
toBuild.name = unit.name
if (checkLock(unit) === false) { // if unlocked
if (checkLock(unit) === false || debug) { // if unlocked
toBuild.isSensor = unit.isSensor
toBuild.render.fillStyle = unit.color
toBuild.render.lineWidth = strokeWidth
}else { // if locked
}else{ // if locked
toBuild.isSensor = true
toBuild.render.lineWidth = 1
toBuild.render.fillStyle = "#ffffff00"
......@@ -141,7 +146,7 @@ function launch(units, isRefresh){
nextPos.y += Math.round(toBuild.distances.h) - rh / 2
}else {
nextPos.x += Math.round(toBuild.distances.w)
nextPos.y += Math.round(toBuild.distances.h) - rh / 2
nextPos.y += Math.round(toBuild.distances.h) - rh / 2 + 10
}
}
}
......@@ -182,7 +187,7 @@ function launch(units, isRefresh){
timeScaleTarget = 0.05
}
if (counterZoom >= 60 * 3.6) {
ball.render.sprite.texture = 'img/ball.svg'
ball.render.sprite.texture = 'img/burl-ball.svg'
}
if (counterTime >= 60 * 4.5) {
engine.timing.timeScale = 1
......@@ -196,7 +201,7 @@ function launch(units, isRefresh){
}
if (bonusTime) {
if (counterBonus >=20) {
ball.render.sprite.texture = 'img/ball.svg'
ball.render.sprite.texture = 'img/burl-ball.svg'
counterBonus = 0
bonusTime = false
}
......@@ -212,40 +217,42 @@ function launch(units, isRefresh){
var pair = pairs[i];
var b1 = pair.bodyB
var b2 = pair.bodyA // can differ accordins to World.add order
// console.log(pair);
var col = b2.render.fillStyle
if (col !== "#ffffff00") { // If not transparent, highlight the color when collision
col = col.substring(0, col.length - 2);
b2.render.fillStyle = col+"ff"
}
if (!b2.isLocked) {
if (b2.name === 'boost') {
if (b2.name === 'boost' && !b1.inactiveBuffer) {
b1.render.fillStyle = '#00FF00';
Body.setVelocity(ball, { x: 50, y: 0 });
}else if(b2.name === 'bulletTime') {
Body.setVelocity(ball, { x: 40, y: 0 });
b1.inactiveBuffer = true
}else if(b1.name === 'bulletTime') {
ball.render.sprite.texture = 'img/ball-bullettime.svg'
bulletTime = true
}else if(b2.role === 'bonus') {
}else if(b1.role === 'bonus') {
bonusTime = true
var bonus = b2
ball.render.sprite.texture ="img/bonus.svg"
var bonus = b1
ball.render.sprite.texture ="img/burl-bonus.svg"
unlockFromBonus(bonus)
}else if(b2.name === 'jump') {
Body.setVelocity(ball, { x: ball.speed, y: -50 });
Body.setVelocity(ball, { x: ball.speed, y: -30 });
}else if(b2.name === 'invertedGravity') {
if (engine.world.gravity.y == -1) {
engine.world.gravity.y = 1;
}else {
engine.world.gravity.y = -1;
}
}else if(b2.name === 'time') {
}else if(b2.name === 'teleport') {
var currentCollided = pair.bodyB.id; // avoid repeated collision
if ( lastCollided != currentCollided) {
if (isBackInTime) {
if (isTeleported) {
Body.setPosition(ball,{x:checkPoint.x, y:checkPoint.y})
isBackInTime = false
isTeleported = false
}else {
checkPoint = {x:ball.position.x, y:ball.position.y}
isBackInTime = true
isTeleported = true
}
lastCollided = currentCollided
}
......
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