Repo for non destructive e-scooter intervention materials
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

359 lines
7.4 KiB

<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<meta name="viewport" content="user-scalable=no" />
<link rel='icon' type='image/svg' href='data:null'>
<style>
* {
user-select: none;
}
body, html {
background-color: #000;
color: #fff;
font-family: monospace;
font-size: 200%;
padding: 0;
margin: 0;
overflow: hidden;
width: 100vw;
height: 100vh;
}
img, div, canvas {
display: block;
margin: 0;
padding: 0;
width: 100vw;
}
div {
display: block;
}
img, canvas {
height: 100vw;
width: 100vw;
/* border: solid 2px red; */
}
img {
display: none;
}
div#head, div#game {
text-align: center;
padding: 0.5em 0 0 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
h1 {
font-size: 150%;
}
h1.title {
font-family: Arial;
line-height: 0.9em;
text-transform: uppercase;
font-size: 350%;
font-style: italic;
font-weight: bold;
margin: 0;
padding-top 0.8em;
background: -webkit-linear-gradient(#0f0, #f0f);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
h2 {
font-size: 110%;
margin: 1em;
line-height: 1em;
}
div.screen {
position: relative;
height: 100vh;
width: 100vw;
}
div.screen#intro, div.screen#level1 {
background-image: url('scooter-tenor3.gif');
background-color: darkorange;
background-blend-mode: difference;
background-size: cover;
transition: all 0.5s cubic-bezier(1,0,1,.50);
z-index: 1000;
}
div.screen#level1 {
background-image: url('scooter-fail2.gif');
background-color: blue;
background-blend-mode: difference;
}
.screen.hide {
transform: translate(0,-100vh);
position: absolute;
background-blend-mode: color-burn !important;
}
div.screen#level1 {
z-index:900;
}
button.level {
background-color: #f00;
border: none;
color: #fff;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: block;
font-size: 1.2em;
margin: 0.5em 0;
width: 100vw;
}
button.off {
background-color: #777;
color: #aaa;
}
button.level i {
position: absolute;
font-size: 70%;
padding-left: 0.4em;
}
button.message {
background-color: #fff;
border: none;
color: #000;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: block;
font-size: 1.2em;
margin: 0.5em 0;
width: 50vw;
margin: auto;
}
canvas#canvas {
background-image: url('jump1-640-bg.png');
background-size: contain;
}
div#header1 {
font-family: Arial;
font-size: 200%;
font-style: italic;
font-weight: bold;
margin: 0;
margin-bottom: 0.3em;
padding-top 0.8em;
text-transform: uppercase;
background: -webkit-linear-gradient(#0f0, #f0f);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
div.stats {
margin: 0.3em;
color: #000;
}
div.message#nosensors {
position: absolute;
background-color: black;
padding: 0.6em;
top: 49%;
transform: translateY(-50%);
z-index: 2000;
display: none;
}
div.message#nosensors.show {
display: block;
}
</style>
</head>
<body>
<div id='nosensors' class='message'>
<p>Your browser could not connect to phone's sensors.</p>
<p>Please use Android + Firefox browser! Or try rubbing with two fingers!</p>
<div><button id='nosensors' class='message'>OKAY</button></div>
</div>
<div id='intro' class='screen'>
<div id='head' name='head'>
<h1 class='title'>NEED 4 SPEED!</h1>
<h2>ride or run as fast as possible!</h2>
<h2>make sharp turns to bump-up your score!</h2>
<h2>receive Uber-l00t for each level you complete!</h2>
<button id='easy' class='level'>EASY</button>
<button id='medium' class='level off'>UNEASY <i>Premium</i></button>
<button id='hard' class='level off'>HARDCORE <i>Premium</i></button>
</div>
</div>
<div id='level1' class='screen'>
<div id='game' name='game'>
<img id='jump1' name='jump1' src='jump1-640.jpg'>
<div id='header1' name='header1'>get moving!</div>
<canvas id='canvas' name='canvas' width='640' height='640'>
<span>canvas is not working here</span>
</canvas>
<div class='stats'>stamina: <span id='a' name='a'>0</span></div>
<div class='stats'>score: <span id='w' name='w'>0</span></div>
<button id='quit' class='level quit'>QUIT GAME</button>
</div>
</div>
</body>
<script>
var intro_screen = document.querySelectorAll('div.screen#intro')[0];
var btn_easy = document.querySelectorAll('button#easy')[0];
var header1 = document.querySelectorAll('div#header1')[0];
var msg_nosensors = document.querySelectorAll('div#nosensors')[0];
var btn_nosensors = document.querySelectorAll('button#nosensors')[0];
btn_easy.addEventListener('touchstart', function() {
intro_screen.classList.add('hide');
});
btn_nosensors.addEventListener('touchstart', function() {
msg_nosensors.remove();
});
function addLines(y) {
//console.log('run');
ctx.drawImage(image, 0, 0, 640, y, 0, 0, 640, y);
}
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const image = document.getElementById('jump1');
//image.addEventListener('load', e => {
//
//});
const w_el = document.getElementById('w');
const a_el = document.getElementById('a');
//const y_el = document.getElementById('y');
var w = 0;
var _y = 0;
var _a = 0;
function gameWon() {
header1.innerText = 'YOU WON SOME L00T!';
setTimeout(function () {
window.open('./jump1-p-95.jpg');
}, 5000);
}
var do_handles = function(event) {
a = Math.round(event.alpha);
a_el.innerText = a;
if (a > _a + 10 || a < _a - 1) {
w += 1;
w_el.innerText = w;
progress = Math.round(w/640*100);
if (progress > 0) {
header1.innerText = progress + '%';
}
addLines(w);
if (progress >= 100) {
window.removeEventListener('deviceorientation', do_handles);
gameWon();
}
_a = a;
}
};
var th_handles = function(e) {
e.preventDefault();
y = e.touches[0].clientY;
//y_el.innerText = y;
if (y > _y + 10 || y < _y - 10) {
w += 5;
w_el.innerText = w;
progress = Math.round(w/640*100);
if (progress > 0) {
header1.innerText = progress + '%';
}
addLines(w);
if (progress >= 100) {
document.removeEventListener('touchmove', th_handles);
gameWon();
}
_y = y;
}
};
if(window.DeviceOrientationEvent && iOS()==false) {
window.addEventListener('deviceorientation', do_handles);
} else {
msg_nosensors.classList.add('show');
header1.innerText='Rub the screen!';
//console.log('no sensors :(');
document.addEventListener('touchmove', th_handles);
}
//detect ios
function iOS() {
return [
'iPad Simulator',
'iPhone Simulator',
'iPod Simulator',
'iPad',
'iPhone',
'iPod'
].includes(navigator.platform)
// iPad on iOS 13 detection
|| (navigator.userAgent.includes("Mac") && "ontouchend" in document)
}
</script>
</html>