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