Skip to content

Instantly share code, notes, and snippets.

@fgouin2014

fgouin2014/arcademachine2.markdown

Created July 19, 2024 05:18
Show Gist options
  • Save fgouin2014/bbec4212f77249d4e05c9ab778c54c31 to your computer and use it in GitHub Desktop.
Save fgouin2014/bbec4212f77249d4e05c9ab778c54c31 to your computer and use it in GitHub Desktop.
Download ZIP
ArcadeMachine2
Raw
index.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Borne d'Arcade Rétro - Mobile</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #2c3e50;
font-family: Arial, sans-serif;
touch-action: manipulation;
}
.arcade-cabinet {
width: 100vw;
height: 100vh;
background-color: #e74c3c;
display: flex;
flex-direction: column;
}
.cabinet-header {
background-color: #34495e;
padding: 10px;
}
.logo-band {
height: 30px;
background-color: #2c3e50;
margin-bottom: 5px;
display: flex;
justify-content: center;
align-items: center;
color: #ecf0f1;
font-size: 16px;
font-weight: bold;
}
.marquee {
height: 30px;
background-color: #f39c12;
overflow: hidden;
position: relative;
}
.marquee-content {
position: absolute;
width: 100%;
height: 100%;
line-height: 30px;
text-align: center;
color: #2c3e50;
font-size: 16px;
font-weight: bold;
white-space: nowrap;
animation: marquee 10s linear infinite;
}
@keyframes marquee {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
.score-display {
display: flex;
justify-content: space-around;
padding: 5px 0;
background-color: #2c3e50;
}
.score-segment {
font-family: 'Courier New', monospace;
font-size: 14px;
color: #ecf0f1;
}
.screen {
flex-grow: 1;
background-color: #000;
border: 5px solid #333;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
color: #fff;
margin: 10px;
}
.controls {
display: flex;
justify-content: space-around;
padding: 10px;
}
.d-pad {
width: 120px;
height: 120px;
position: relative;
}
.d-pad-button {
position: absolute;
background-color: #7f8c8d;
border: 2px solid #34495e;
width: 40px;
height: 40px;
}
.d-pad-up { top: 0; left: 40px; }
.d-pad-down { bottom: 0; left: 40px; }
.d-pad-left { left: 0; top: 40px; }
.d-pad-right { right: 0; top: 40px; }
.action-buttons {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.action-button {
width: 50px;
height: 50px;
border-radius: 50%;
border: 2px solid #34495e;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
color: #fff;
}
.button-b { background-color: #e74c3c; }
.button-a { background-color: #3498db; }
.button-y { background-color: #2ecc71; }
.button-x { background-color: #f1c40f; }
.menu-buttons {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 10px;
}
.menu-button {
width: 80px;
height: 30px;
background-color: #95a5a6;
border: 2px solid #34495e;
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
color: #2c3e50;
}
</style>
</head>
<body>
<div class="arcade-cabinet">
<div class="cabinet-header">
<div class="logo-band">LOGO DU JEU</div>
<div class="marquee">
<div class="marquee-content">TITRE DU JEU QUI DÉFILE</div>
</div>
<div class="score-display">
<div class="score-segment" id="high-score">00000</div>
<div class="score-segment" id="current-score">00000</div>
<div class="score-segment" id="tries">XXX</div>
<div class="score-segment" id="timer">10.000</div>
</div>
</div>
<div class="screen" id="screen">Touchez un bouton</div>
<div class="controls">
<div class="d-pad">
<div class="d-pad-button d-pad-up" data-direction="Haut"></div>
<div class="d-pad-button d-pad-down" data-direction="Bas"></div>
<div class="d-pad-button d-pad-left" data-direction="Gauche"></div>
<div class="d-pad-button d-pad-right" data-direction="Droite"></div>
</div>
<div class="action-buttons">
<div class="action-button button-b" data-button="B">B</div>
<div class="action-button button-a" data-button="A">A</div>
<div class="action-button button-y" data-button="Y">Y</div>
<div class="action-button button-x" data-button="X">X</div>
</div>
</div>
<div class="menu-buttons">
<div class="menu-button" data-button="START">START</div>
<div class="menu-button" data-button="SELECT">SELECT</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const screen = document.getElementById('screen');
const timerElement = document.getElementById('timer');
let timeLeft = 10000;
function updateTimer() {
if (timeLeft > 0) {
timeLeft -= 10;
const seconds = Math.floor(timeLeft / 1000);
const milliseconds = timeLeft % 1000;
timerElement.textContent = `${seconds.toString().padStart(2, '0')}.${milliseconds.toString().padStart(3, '0')}`;
setTimeout(updateTimer, 10);
}
}
updateTimer();
function handleButtonPress(e) {
e.preventDefault();
const button = e.target.closest('[data-button], [data-direction]');
if (button) {
if (button.dataset.button) {
screen.textContent = `Bouton : ${button.dataset.button}`;
} else if (button.dataset.direction) {
screen.textContent = `Direction : ${button.dataset.direction}`;
}
button.style.opacity = '0.7';
}
}
function handleButtonRelease(e) {
e.preventDefault();
const button = e.target.closest('[data-button], [data-direction]');
if (button) {
button.style.opacity = '1';
}
}
document.querySelectorAll('[data-button], [data-direction]').forEach(button => {
button.addEventListener('touchstart', handleButtonPress);
button.addEventListener('touchend', handleButtonRelease);
button.addEventListener('mousedown', handleButtonPress);
button.addEventListener('mouseup', handleButtonRelease);
});
});
</script>
</body>
</html>
Raw
script.js
// retro-arcade-interface.js
class RetroArcadeMachine {
constructor() {
this.screen = document.getElementById('screen');
this.timerElement = document.getElementById('timer');
this.highScoreElement = document.getElementById('high-score');
this.currentScoreElement = document.getElementById('current-score');
this.triesElement = document.getElementById('tries');
this.timeLeft = 10000;
this.currentScore = 0;
this.highScore = 0;
this.tries = 3;
this.initializeControls();
this.startTimer();
}
initializeControls() {
const buttons = document.querySelectorAll('[data-button], [data-direction]');
buttons.forEach(button => {
button.addEventListener('touchstart', (e) => this.handleButtonPress(e));
button.addEventListener('touchend', (e) => this.handleButtonRelease(e));
button.addEventListener('mousedown', (e) => this.handleButtonPress(e));
button.addEventListener('mouseup', (e) => this.handleButtonRelease(e));
});
}
handleButtonPress(e) {
e.preventDefault();
const button = e.target.closest('[data-button], [data-direction]');
if (button) {
if (button.dataset.button) {
this.updateScreen(`Bouton : ${button.dataset.button}`);
} else if (button.dataset.direction) {
this.updateScreen(`Direction : ${button.dataset.direction}`);
}
button.style.opacity = '0.7';
this.updateScore(10); // Increase score by 10 for each button press
}
}
handleButtonRelease(e) {
e.preventDefault();
const button = e.target.closest('[data-button], [data-direction]');
if (button) {
button.style.opacity = '1';
}
}
updateScreen(message) {
this.screen.textContent = message;
}
updateScore(points) {
this.currentScore += points;
this.currentScoreElement.textContent = this.currentScore.toString().padStart(5, '0');
if (this.currentScore > this.highScore) {
this.highScore = this.currentScore;
this.highScoreElement.textContent = this.highScore.toString().padStart(5, '0');
}
}
startTimer() {
const updateTimer = () => {
if (this.timeLeft > 0) {
this.timeLeft -= 10;
const seconds = Math.floor(this.timeLeft / 1000);
const milliseconds = this.timeLeft % 1000;
this.timerElement.textContent = `${seconds.toString().padStart(2, '0')}.${milliseconds.toString().padStart(3, '0')}`;
setTimeout(updateTimer, 10);
} else {
this.endGame();
}
};
updateTimer();
}
endGame() {
this.updateScreen("Temps écoulé !");
this.tries--;
this.triesElement.textContent = 'X'.repeat(this.tries);
if (this.tries > 0) {
setTimeout(() => this.resetGame(), 2000);
} else {
this.updateScreen("Game Over!");
}
}
resetGame() {
this.timeLeft = 10000;
this.currentScore = 0;
this.currentScoreElement.textContent = '00000';
this.updateScreen("Nouvelle partie !");
this.startTimer();
}
}
// Initialisation de la machine d'arcade
document.addEventListener('DOMContentLoaded', () => {
const arcadeMachine = new RetroArcadeMachine();
});
Raw
style.css
/* retro-arcade-skin.css */
:root {
--cabinet-bg: #4a4a4a;
--header-bg: #2a2a2a;
--logo-bg: #1a1a1a;
--logo-color: #ffd700;
--marquee-bg: #ff4500;
--marquee-color: #ffffff;
--score-bg: #000000;
--score-color: #00ff00;
--screen-bg: #000080;
--screen-border: #c0c0c0;
--screen-text: #ffffff;
--dpad-bg: #808080;
--dpad-border: #404040;
--button-a-bg: #ff0000;
--button-b-bg: #0000ff;
--button-x-bg: #008000;
--button-y-bg: #ffff00;
--menu-button-bg: #c0c0c0;
--menu-button-color: #000000;
}
.arcade-cabinet {
background-color: var(--cabinet-bg);
}
.cabinet-header {
background-color: var(--header-bg);
}
.logo-band {
background-color: var(--logo-bg);
color: var(--logo-color);
}
.marquee {
background-color: var(--marquee-bg);
}
.marquee-content {
color: var(--marquee-color);
}
.score-display {
background-color: var(--score-bg);
}
.score-segment {
color: var(--score-color);
}
.screen {
background-color: var(--screen-bg);
border-color: var(--screen-border);
color: var(--screen-text);
}
.d-pad-button {
background-color: var(--dpad-bg);
border-color: var(--dpad-border);
}
.button-a { background-color: var(--button-a-bg); }
.button-b { background-color: var(--button-b-bg); }
.button-x { background-color: var(--button-x-bg); }
.button-y { background-color: var(--button-y-bg); }
.menu-button {
background-color: var(--menu-button-bg);
color: var(--menu-button-color);
}
/* skin1 ne pas modifier pour l'instant */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment