Skip to content

Update index.html #73

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jef1207 wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Update index.html #73

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
08a0fdc
Update index.html
jef1207 Jun 7, 2025
f2a911a
Update launch.js
jef1207 Jun 7, 2025
2261146
Update index.html
jef1207 Jun 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
178 changes: 107 additions & 71 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,108 +1,121 @@
<!doctype html>
<html lang="en">
<head>
<title>HexGL by BKcore</title>
<title>HexGL Racing</title>
<meta charset="utf-8">
<meta name="description" content="HexGL is a futuristic racing game built by Thibaut Despoulain (BKcore) using HTML5, Javascript and WebGL. Come challenge your friends on this fast-paced 3D game!">
<meta property="og:title" content="HexGL, the HTML5 futuristic racing game." />
<meta property="og:type" content="game" />
<meta property="og:url" content="http://hexgl.bkcore.com/" />
<meta property="og:image" content="http://hexgl.bkcore.com/image.png" />
<meta property="og:site_name" content="HexGL by BKcore" />
<meta property="fb:admins" content="1482017639" />
<link rel="icon" href="http://hexgl.bkcore.com/favicon.png" type="image/png">
<link rel="shortcut icon" href="http://hexgl.bkcore.com/favicon.png" type="image/png">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="css/multi.css" type="text/css" charset="utf-8">
<link rel="stylesheet" href="css/fonts.css" type="text/css" charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<style>
body {
padding:0;
margin:0;
padding: 0;
margin: 0;
overflow: hidden;
background: #000;
font-family: 'Droid Sans', Arial, sans-serif;
}
canvas { pointer-events:none; width: 100%;}
#overlay{
canvas {
width: 100%;
height: 100%;
display: block;
}
#overlay {
position: absolute;
z-index: 9999;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
#progress-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
z-index: 10000;
}
#progressbar {
height: 5px;
width: 80%;
background: #333;
border-radius: 3px;
margin-top: 20px;
}
#progressbar:after {
content: '';
display: block;
height: 100%;
width: 0%;
background: #00b0ff;
border-radius: 3px;
transition: width 0.3s;
}
#loading-text {
color: #fff;
font-size: 18px;
margin-bottom: 10px;
}
#step-5 {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
color: white;
z-index: 20000;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
#restart-btn {
background: #00b0ff;
color: white;
border: none;
padding: 10px 20px;
font-size: 16px;
border-radius: 20px;
margin-top: 20px;
cursor: pointer;
}
</style>
<script type="text/javascript">
//analytics
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-26274524-4']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script src="https://telegram.org/js/telegram-web-app.js"></script>
</head>

<body>
<div id="step-1">
<div id="global"></div>
<div id="title">
</div>
<div id="menucontainer">
<div id="menu">
<div id="start">Start</div>
<div id="s-controlType">Controls: Keyboard</div>
<div id="s-quality">Quality: High</div>
<div id="s-hud">HUD: On</div>
<div id="s-godmode" style="display: none">Godmode: Off</div>
<div id="s-credits">Credits</div>
</div>
</div>
</div>
<div id="step-2" style="display: none">
<div id="ctrl-help">Click/Touch to continue.</div>
</div>
<div id="step-3" style="display: none">
<div id="progress-container">
<div id="loading-text">Loading HexGL...</div>
<div id="progressbar"></div>
</div>
<div id="step-4" style="display: none">

<div id="step-4">
<div id="overlay"></div>
<div id="main"></div>
</div>
<div id="step-5" style="display: none">

<div id="step-5">
<div id="time"></div>
<div id="ctrl-help">Click/Touch to continue.</div>
</div>
<div id="credits" style="display: none">
<h3>Code</h3>
<p><b>Concept and Development</b><br>Thibaut Despoulain (BKcore)</p>
<p><b>Contributors</b><br>townxelliot<br>mahesh.kk</p>
<p><b>Technologies</b><br>WebGL<br>JavaScript<br>CoffeeScript<br>Three.js<br>LeapMotion</p>
<h3>Graphics</h3>
<p><b>HexMKI base model</b><br>Charnel</p>
<p><b>Track texture</b><br>Nobiax</p>
<h4>Click anywhere to continue.</h4>
<div id="gameover-text">Race Completed!</div>
<button id="restart-btn">Play Again</button>
</div>

<div id="leapinfo" style="display: none"></div>

<script src="libs/leap-0.4.1.min.js"></script>
<script src="libs/Three.dev.js"></script>
<script src="libs/Three.js"></script>
<script src="libs/ShaderExtras.js"></script>
<script src="libs/postprocessing/EffectComposer.js"></script>
<script src="libs/postprocessing/RenderPass.js"></script>
<script src="libs/postprocessing/BloomPass.js"></script>
<script src="libs/postprocessing/ShaderPass.js"></script>
<script src="libs/postprocessing/MaskPass.js"></script>
<script src="libs/Detector.js"></script>
<script src="libs/Stats.js"></script>
<script src="libs/DAT.GUI.min.js"></script>

<script src="bkcore.coffee/controllers/TouchController.js"></script>
<script src="bkcore.coffee/controllers/OrientationController.js"></script>
<script src="bkcore.coffee/controllers/GamepadController.js"></script>

<script src="bkcore.coffee/Timer.js"></script>
<script src="bkcore.coffee/ImageData.js"></script>
<script src="bkcore.coffee/Utils.js"></script>

<script src="bkcore/threejs/RenderManager.js"></script>
Expand All @@ -125,5 +138,28 @@ <h4>Click anywhere to continue.</h4>

<script src="launch.js"></script>

<script>
// Адаптация для Telegram WebApp
if (typeof Telegram !== 'undefined') {
Telegram.WebApp.ready();
Telegram.WebApp.expand();
Telegram.WebApp.MainButton.hide();

// Обработка изменения размера экрана
Telegram.WebApp.onEvent('viewportChanged', function() {
if (window.hexGL) {
window.hexGL.resize(
Telegram.WebApp.viewportWidth,
Telegram.WebApp.viewportHeight
);
}
});
}

// Обработчик рестарта
document.getElementById('restart-btn').addEventListener('click', function() {
window.location.reload();
});
</script>
</body>
</html>
134 changes: 47 additions & 87 deletions launch.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,116 +1,76 @@
// Generated by CoffeeScript 1.7.1
(function() {
var $, a, defaultControls, getWebGL, hasWebGL, init, s, u, _fn, _i, _len;
var $ = function(_) { return document.getElementById(_); };
var isTelegram = typeof Telegram !== 'undefined';

$ = function(_) {
return document.getElementById(_);
};

init = function(controlType, quality, hud, godmode) {
var hexGL, progressbar;
hexGL = new bkcore.hexgl.HexGL({
init = function(quality) {
var width = isTelegram ? Telegram.WebApp.viewportWidth : window.innerWidth;
var height = isTelegram ? Telegram.WebApp.viewportHeight : window.innerHeight;

var hexGL = new bkcore.hexgl.HexGL({
document: document,
width: window.innerWidth,
height: window.innerHeight,
width: width,
height: height,
container: $('main'),
overlay: $('overlay'),
gameover: $('step-5'),
quality: quality,
difficulty: 0,
hud: hud === 1,
controlType: controlType,
godmode: godmode,
hud: true,
controlType: 1, // TOUCH
godmode: false,
track: 'Cityscape'
});

window.hexGL = hexGL;
progressbar = $('progressbar');
return hexGL.load({
var progressbar = $('progressbar');

hexGL.load({
onLoad: function() {
console.log('LOADED.');
hexGL.init();
$('step-3').style.display = 'none';
$('step-4').style.display = 'block';
return hexGL.start();
},
onError: function(s) {
return console.error("Error loading " + s + ".");
hexGL.start();
},
onProgress: function(p, t, n) {
console.log("LOADED " + t + " : " + n + " ( " + p.loaded + " / " + p.total + " ).");
return progressbar.style.width = "" + (p.loaded / p.total * 100) + "%";
onProgress: function(p) {
progressbar.style.width = (p.loaded / p.total * 100) + "%";
}
});
};

u = bkcore.Utils.getURLParameter;

defaultControls = bkcore.Utils.isTouchDevice() ? 1 : 0;

s = [['controlType', ['KEYBOARD', 'TOUCH', 'LEAP MOTION CONTROLLER', 'GAMEPAD'], defaultControls, defaultControls, 'Controls: '], ['quality', ['LOW', 'MID', 'HIGH', 'VERY HIGH'], 3, 3, 'Quality: '], ['hud', ['OFF', 'ON'], 1, 1, 'HUD: '], ['godmode', ['OFF', 'ON'], 0, 1, 'Godmode: ']];

_fn = function(a) {
var e, f, _ref;
a[3] = (_ref = u(a[0])) != null ? _ref : a[2];
e = $("s-" + a[0]);
(f = function() {
return e.innerHTML = a[4] + a[1][a[3]];
})();
return e.onclick = function() {
return f(a[3] = (a[3] + 1) % a[1].length);
};
};
for (_i = 0, _len = s.length; _i < _len; _i++) {
a = s[_i];
_fn(a);
if (isTelegram) {
Telegram.WebApp.ready();
Telegram.WebApp.expand();
Telegram.WebApp.MainButton.hide();
}

$('step-2').onclick = function() {
$('step-2').style.display = 'none';
$('step-3').style.display = 'block';
return init(s[0][3], s[1][3], s[2][3], s[3][3]);
};
// Автозапуск с оптимальными настройками
setTimeout(function() {
$('progress-container').style.display = 'block';
init(1); // MEDIUM quality
}, 500);

$('step-5').onclick = function() {
return window.location.reload();
};

$('s-credits').onclick = function() {
$('step-1').style.display = 'none';
return $('credits').style.display = 'block';
};

$('credits').onclick = function() {
$('step-1').style.display = 'block';
return $('credits').style.display = 'none';
if(isTelegram) {
Telegram.WebApp.showPopup({
title: 'Game Over',
message: 'Restart the game?',
buttons: [{ type: 'ok' }, { type: 'cancel' }]
}, function(btnId) {
if(btnId === 'ok') window.location.reload();
});
} else {
window.location.reload();
}
};

hasWebGL = function() {
var canvas, gl;
gl = null;
canvas = document.createElement('canvas');
// Проверка WebGL
var hasWebGL = function() {
try {
gl = canvas.getContext("webgl");
} catch (_error) {}
if (gl == null) {
try {
gl = canvas.getContext("experimental-webgl");
} catch (_error) {}
}
return gl != null;
var canvas = document.createElement('canvas');
return !!window.WebGLRenderingContext &&
(canvas.getContext('webgl') || canvas.getContext('experimental-webgl'));
} catch(e) { return false; }
};

if (!hasWebGL()) {
getWebGL = $('start');
getWebGL.innerHTML = 'WebGL is not supported!';
getWebGL.onclick = function() {
return window.location.href = 'http://get.webgl.org/';
};
} else {
$('start').onclick = function() {
$('step-1').style.display = 'none';
$('step-2').style.display = 'block';
return $('step-2').style.backgroundImage = "url(css/help-" + s[0][3] + ".png)";
};
$('progress-container').innerHTML = '<p>WebGL not supported!</p>';
}

}).call(this);
})();