Files
tigrou/html/pokemon.html
2025-12-05 03:47:50 +01:00

414 lines
24 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jeu Pokémon</title>
<link rel="stylesheet" href="../style.css">
</head>
<body>
<header>
<img src="../pinguin(1).gif" alt="Mascotte animée" class="header-gif" />
<h1>Jeu Pokémon</h1>
<nav>
<ul class="menu">
<li><a href="./index.html">Accueil </a></li>
<li><a href="./pokemon.html">Jeu Pokémon</a></li>
<li><a href="./PAI.html">PAI </a></li>
<li><a href="./qcm.html">QCM</a></li>
<li><a href="./outils.html">Outils et OS</a></li>
</ul>
</nav>
</header>
<div class="battle">
<h2>Combat Pokémon-like (simple)</h2>
<div class="row">
<div id = "scoreDiv">Score: 0</div>
<div class="monster" id="enemy">
<div class="enemy-img-container">
<img id="enemyImg" src="ennemi.png" alt="Ennemi">
</div>
<span id="ennemyName">Ennemi</span><br>
<span id="enemyHp">HP: 30</span>
<span id="enemyInfo" class="tooltip" data-tooltip="">?</span>
</div>
<div class="monster" id="player">Joueur<br><span id="playerHp">HP: 30</span></div>
</div>
<div id="attacksDiv"></div>
<button id="runBtn">Fuir</button>
<div id="log">Un ennemi sauvage apparaît !</div>
</div>
<script>
const outils_list = [
{
open_source_name: "VSCodium",
open_source_website: "https://vscodium.com",
icon_op_link: "https://raw.githubusercontent.com/linuxserver/docker-templates/master/linuxserver.io/img/vscodium-icon.png",
description_op: "VSCodium est une version open source de Visual Studio Code, sans télémétrie. Il offre les mêmes fonctionnalités puissantes — extensions, IntelliSense, débogage — sans les composants propriétaires de Microsoft.",
against_name: "Visual Studio Code",
icon_against_link: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Visual_Studio_Code_1.35_icon.svg/2048px-Visual_Studio_Code_1.35_icon.svg.png",
description_against: "Visual Studio Code est léditeur de code populaire de Microsoft, offrant de nombreuses extensions, le débogage, et une intégration cloud. Il inclut des composants propriétaires et de la télémétrie par défaut."
},
{
open_source_name: "Gogs",
open_source_website: "https://gogs.io",
icon_op_link: "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/png/gogs.png",
description_op: "Gogs est un service Git auto-hébergé léger, écrit en Go. Il est extrêmement rapide et facile à déployer (un seul binaire) et propose une interface semblable à GitHub, avec gestion des utilisateurs, suivi des issues, wiki, webhooks et support SSH.",
against_name: "GitHub",
icon_against_link: "https://github.githubassets.com/assets/GitHub-Mark-ea2971cee799.png",
description_against: "GitHub est une plateforme propriétaire hébergée dans le cloud pour les dépôts Git, offrant des outils de collaboration, de CI/CD et de gestion de projets."
},
{
open_source_name: "Ollama",
open_source_website: "https://ollama.com",
icon_op_link: "https://ollama.com/public/ollama.png",
description_op: "Ollama permet dexécuter et de gérer des modèles de langage localement via de simples commandes. Il supporte des modèles comme LLaMA 3, Mistral, Gemma, et plus encore, avec des API pour lintégration et la personnalisation.",
against_name: "ChatGPT",
icon_against_link: "https://cdn-icons-png.flaticon.com/512/11865/11865338.png",
description_against: "ChatGPT est la plateforme dIA conversationnelle hébergée par OpenAI, offrant des capacités avancées de raisonnement, génération de texte et danalyse multimodale."
},
{
open_source_name: "OpenCut",
open_source_website: "https://github.com/OpenCut-app/OpenCut",
icon_op_link: "https://github.com/OpenCut-app/OpenCut/blob/main/apps/web/public/logo.png?raw=true",
description_op: "OpenCut est une alternative open source prometteuse à CapCut. Elle vise à offrir des outils dédition vidéo avancés sans nécessité denvoyer les fichiers dans le cloud.",
against_name: "CapCut",
icon_against_link: "https://static.vecteezy.com/system/resources/previews/055/030/388/non_2x/capcut-circle-icon-logo-symbol-free-png.png",
description_against: "CapCut est un éditeur vidéo propriétaire développé par ByteDance, offrant modèles, effets et synchronisation cloud pour mobile et ordinateur."
},
{
open_source_name: "LibreOffice",
open_source_website: "https://www.libreoffice.org",
icon_op_link: "https://upload.wikimedia.org/wikipedia/commons/a/a9/LibreOffice_7.5_Main_Icon.png",
description_op: "LibreOffice est une suite bureautique open source complète comprenant Writer, Calc, Impress, Draw et plus encore. Elle supporte les standards ouverts et fonctionne entièrement hors ligne.",
against_name: "Microsoft Office",
icon_against_link: "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/Microsoft_Office_logo_%282013%E2%80%932019%29.svg/1012px-Microsoft_Office_logo_%282013%E2%80%932019%29.svg.png",
description_against: "Microsoft Office est une suite bureautique propriétaire qui propose Word, Excel, PowerPoint et Outlook, très utilisée dans le monde professionnel et éducatif."
},
{
open_source_name: "GIMP",
open_source_website: "https://www.gimp.org",
icon_op_link: "https://upload.wikimedia.org/wikipedia/commons/thumb/6/67/The_GIMP_icon_-_v3.0.svg/langfr-250px-The_GIMP_icon_-_v3.0.svg.png",
description_op: "GIMP est un logiciel open source dédition dimages avancé, proposant calques, masques, filtres et outils de retouche adaptés à la photographie et au graphisme.",
against_name: "Adobe Photoshop",
icon_against_link: "https://upload.wikimedia.org/wikipedia/commons/a/af/Adobe_Photoshop_CC_icon.svg",
description_against: "Photoshop est léditeur dimages professionnel dAdobe, utilisé dans la photographie, le design et la création numérique."
},
{
open_source_name: "Kdenlive",
open_source_website: "https://kdenlive.org",
icon_op_link: "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c6/Kdenlive-logo.svg/2560px-Kdenlive-logo.svg.png",
description_op: "Kdenlive est un éditeur vidéo open source complet, offrant montage multi-pistes, effets, transitions, gestion des proxys et outils professionnels de post-production.",
against_name: "Adobe Premiere Pro",
icon_against_link: "https://upload.wikimedia.org/wikipedia/commons/4/40/Adobe_Premiere_Pro_CC_icon.svg",
description_against: "Premiere Pro est le logiciel de montage vidéo professionnel dAdobe, largement utilisé dans le cinéma, YouTube et la télévision."
},
{
open_source_name: "Thunderbird",
open_source_website: "https://www.thunderbird.net",
icon_op_link: "https://upload.wikimedia.org/wikipedia/commons/5/53/Thunderbird_2023_icon.png",
description_op: "Thunderbird est un client e-mail open source sécurisé, avec support des extensions, du chiffrement, du calendrier intégré, et de la gestion multi- comptes.",
against_name: "Microsoft Outlook",
icon_against_link: "https://upload.wikimedia.org/wikipedia/commons/thumb/c/cc/Microsoft_Outlook_Icon_%282025%E2%80%93present%29.svg/langfr-250px-Microsoft_Outlook_Icon_%282025%E2%80%93present%29.svg.png",
description_against: "Outlook est le client propriétaire de Microsoft pour la gestion de-mails, de calendriers et de contacts, intégré à Exchange et Microsoft 365."
},
{
open_source_name: "Nextcloud",
open_source_website: "https://nextcloud.com",
icon_op_link: "https://upload.wikimedia.org/wikipedia/commons/6/60/Nextcloud_Logo.svg",
description_op: "Nextcloud est une plateforme cloud auto-hébergée permettant de synchroniser et partager des fichiers, déditer des documents en collaboration, de gérer calendriers, discussions et bien plus, tout en conservant la maîtrise totale de ses données.",
against_name: "Google Drive",
icon_against_link: "https://upload.wikimedia.org/wikipedia/commons/d/da/Google_Drive_logo.png",
description_against: "Google Drive est un service de stockage cloud et de collaboration intégré aux applications Google Workspace."
},
{
open_source_name: "FreeCAD",
open_source_website: "https://www.freecad.org",
icon_op_link: "https://www.freecad.org/svg/logo-freecad.svg",
description_op: "FreeCAD est une suite open source professionnelle de modélisation et danimation 3D utilisé dans lindustrie technique",
against_name: "SolidWorks",
icon_against_link: "https://yt3.googleusercontent.com/ytc/AIdro_lVpceaFjQyCslqet2YAzG9jt14n103-KVOjc4D0Y1A8g=s900-c-k-c0x00ffffff-no-rj",
description_against: "SolidWorks est un logiciel propriétaire de modélisation et danimation 3D utilisé dans lindustrie technique"
},
{
open_source_name: "Mozilla Firefox",
open_source_website: "https://www.mozilla.org/firefox",
icon_op_link: "https://upload.wikimedia.org/wikipedia/commons/a/a0/Firefox_logo%2C_2019.svg",
description_op: "Firefox est un navigateur web open source axé sur la confidentialité, la vitesse et la liberté de personnalisation via des extensions. Il ne collecte que le strict minimum de données.",
against_name: "Google Chrome",
icon_against_link: "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Google_Chrome_icon_%28February_2022%29.svg/960px-Google_Chrome_icon_%28February_2022%29.svg.png",
description_against: "Google Chrome est un navigateur rapide et largement utilisé, mais basé sur des technologies propriétaires avec une forte intégration à l'écosystème Google."
},
{
open_source_name: "KeePassXC",
open_source_website: "https://keepassxc.org",
icon_op_link: "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/KeePassXC.svg/1200px-KeePassXC.svg.png",
description_op: "KeePassXC est un gestionnaire de mots de passe open source fonctionnant hors ligne. Il permet de stocker localement et de manière chiffrée toutes vos informations sensibles.",
against_name: "LastPass",
icon_against_link: "https://www.svgrepo.com/show/331461/lastpass.svg",
description_against: "LastPass est un gestionnaire de mots de passe propriétaire basé sur le cloud, connu pour sa facilité d'utilisation mais dépendant d'un service externe."
},
{
open_source_name: "Signal",
open_source_website: "https://signal.org",
icon_op_link: "https://upload.wikimedia.org/wikipedia/commons/8/8d/Signal-Logo.svg",
description_op: "Signal est une application de messagerie open source hautement sécurisée, utilisant un chiffrement de bout en bout innovant et respectueux de la vie privée.",
against_name: "WhatsApp",
icon_against_link: "https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg",
description_against: "WhatsApp est une application de messagerie populaire appartenant à Meta, utilisant un chiffrement propriétaire et nécessitant un numéro de téléphone."
},
{
open_source_name: "Joplin",
open_source_website: "https://joplinapp.org",
icon_op_link: "https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Joplin-icon.svg/2048px-Joplin-icon.svg.png",
description_op: "Joplin est une application open source de prise de notes, compatible Markdown, avec synchronisation chiffrée et plugins pour enrichir l'expérience.",
against_name: "Evernote",
icon_against_link: "https://store-images.s-microsoft.com/image/apps.62449.9007199266246247.d208f74f-88b2-4ca7-b524-48d06b9566b1.2f46dd6e-1c39-47e2-b771-5735ccfb3d28?h=210",
description_against: "Evernote est un service propriétaire de notes avec synchronisation cloud, intégrations avancées et stockage centralisé."
},
{
open_source_name: "Inkscape",
open_source_website: "https://inkscape.org",
icon_op_link: "https://upload.wikimedia.org/wikipedia/commons/0/0d/Inkscape_Logo.svg",
description_op: "Inkscape est un éditeur de graphismes vectoriels open source, idéal pour la création de logos, illustrations et interfaces en SVG.",
against_name: "Adobe Illustrator",
icon_against_link: "https://upload.wikimedia.org/wikipedia/commons/f/fb/Adobe_Illustrator_CC_icon.svg",
description_against: "Illustrator est le logiciel propriétaire d'Adobe pour les illustrations vectorielles, utilisé par les graphistes professionnels."
},
{
open_source_name: "Audacity",
open_source_website: "https://www.audacityteam.org",
icon_op_link: "https://www.audacityteam.org/_astro/Audacity_Logo.DK8H7nvr.svg",
description_op: "Audacity est un éditeur audio open source simple, idéal pour lenregistrement, le montage ou la restauration de sons.",
against_name: "Adobe Audition",
icon_against_link: "https://www.adobe.com/cc-shared/assets/img/product-icons/svg/audition-64.svg",
description_against: "Audition est léditeur audio professionnel dAdobe, utilisé pour le traitement avancé et le mixage audio."
},
{
open_source_name: "VLC Media Player",
open_source_website: "https://www.videolan.org/vlc",
icon_op_link: "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/VLC_Icon.svg/1809px-VLC_Icon.svg.png",
description_op: "VLC est un lecteur multimédia open source capable de lire presque tous les formats audio et vidéo sans codecs supplémentaires.",
against_name: "Windows media player",
icon_against_link: "https://img.icons8.com/fluent/1200/windows-media-player.jpg",
description_against: "Windows media player est le lecteur multimédia propriétaire de Microsoft, sur lécosystème Windows."
},
{
open_source_name: "Stalwart Mail",
open_source_website: "https://stalw.art/",
icon_op_link: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS4wbcGzFHbo7Gc3UIJpMEIqz_92tG2O1NizA&s",
description_op: "Stalwart Mail est un serveur mail open source (compliquer à setup il faut trouver un pote motivé)",
against_name: "Gmail",
icon_against_link: "https://upload.wikimedia.org/wikipedia/commons/4/4e/Gmail_Icon.png",
description_against: "Gmail est le service de messagerie propriétaire de Google, riche en fonctionnalités mais basé sur lanalyse de données cloud."
},
{
open_source_name: "Etherpad",
open_source_website: "https://etherpad.org",
icon_op_link: "https://pbs.twimg.com/profile_images/1336377123964145665/2gTadaDt_400x400.jpg",
description_op: "Etherpad est un éditeur de texte collaboratif open source permettant lécriture en temps réel, idéal pour les équipes et lenseignement.",
against_name: "Google Docs",
icon_against_link: "https://cdn-icons-png.flaticon.com/512/5968/5968517.png",
description_against: "Google Docs est un éditeur de documents collaboratif propriétaire basé sur le cloud Google Workspace."
},
{
open_source_name: "Linux",
open_source_website: "https://archlinux.org",
icon_op_link: "https://cdn.iconscout.com/icon/free/png-512/free-linux-logo-icon-svg-download-png-2944967.png?f=webp&w=256",
description_op: "Linux est un système dexploitation libre et open source, offrant un contrôle complet à lutilisateur. Il se décline en centaines de distributions adaptées à tous les usages : serveurs, desktop, sécurité, éducation ou machines légères. Linux est réputé pour sa stabilité, sa sécurité, ses performances et son haut niveau de personnalisation. Il respecte la vie privée, ne contient pas de télémétrie imposée et peut être modifié, redistribué ou étendu librement grâce à sa communauté active.",
against_name: "Windows",
icon_against_link: "https://www.citypng.com/public/uploads/preview/hd-windows-11-logo-icon-transparent-background-701751694967888zqtluh5aaw.png?v=2025082902",
description_against: "Windows 11 est un système dexploitation propriétaire conçu pour la simplicité dutilisation, mais avec moins de contrôle et de personnalisation que les distributions Linux."
}
];
function getAgainstNames(itemName) {
const item = outils_list.find(i => i.open_source_name === itemName);
return item ? item.against_name : null;
}
console.log(outils_list);
let playerHp = 30;
let enemyHp = 30;
let score = 0;
const max = outils_list.length;
const log = document.getElementById("log");
const ennemyName = document.getElementById("ennemyName");
const playerHpBox = document.getElementById("playerHp");
const enemyHpBox = document.getElementById("enemyHp");
playerInv = [];
addRandomItemToInventory();
addRandomItemToInventory();
function addRandomItemToInventory() { // Add a NEW random item to player's inventory.
let nbItems = playerInv.length;
if(nbItems < max)
{
let newItem;
let found = false;
while(!found){
let randIndex = Math.floor(Math.random()*max);
newItem = outils_list[randIndex];
found = true;
for(let i=0; i<nbItems; i++){
if(playerInv[i].name == newItem.open_source_name){
found = false; // already have this item
break;
}
}
}
playerInv.push({name: newItem.open_source_name});
addLog(`Vous avez obtenu un nouvel outil open source : **${newItem.open_source_name}** !`);
}
}
function updateUI() {
playerHpBox.textContent = "HP: " + Math.max(0, playerHp);
enemyHpBox.textContent = "HP: " + Math.max(0, enemyHp);
document.getElementById("scoreDiv").textContent = "Score: " + score;
}
function addLog(text) {
log.textContent = log.textContent + '\n' + text;
}
const attacksDiv = document.getElementById("attacksDiv");
function setCombat(){
playerHp = 30;
enemyHp = 30;
updateUI();
ennemyNumber = Math.floor(Math.random()*max);
//il faut que l'ennemi soit dans le against d'un des items du joueur
let found = false;
while(!found){
ennemyNumber = Math.floor(Math.random()*max);
for(let i=0; i<playerInv.length; i++){
if(getAgainstNames(playerInv[i].name) == outils_list[ennemyNumber].against_name){
found = true;
break;
}
}
}
ennemyName.textContent = outils_list[ennemyNumber].against_name;
document.getElementById("enemyInfo").setAttribute("data-tooltip", outils_list[ennemyNumber].description_against);
document.getElementById("enemyImg").src = outils_list[ennemyNumber].icon_against_link;
createAttackButtons();
}
function playerAttack(index) {
const atk = playerInv[index];
if(getAgainstNames(atk.name) == ennemyName.textContent){
var dmg = enemyHp; // instant win
addLog(`Vous utilisez **${atk.name}** et infligez ${dmg} dégâts !\nC'est super efficace !`);
} else {
var dmg = Math.floor(Math.random() * 5) + 2; // 2-6
addLog(`Vous utilisez **${atk.name}** et infligez ${dmg} dégâts !\nMais ce n'est pas très efficace...`);
playerHp -= 5; // dommage punitif
addLog(`Le fait d'avoir utilisé ${atk.name} contre ${ennemyName.textContent} vous blesse de 5 dégâts en retour !`);
}
enemyHp -= dmg;
updateUI();
if (enemyHp <= 0) {
addLog(`${ennemyName.textContent} est vaincu !`);
addRandomItemToInventory();
score += 1;
setCombat();
addLog("Un nouvel ennemi sauvage apparaît !\n");
return;
}
// Riposte
setTimeout(() => {
const edmg = Math.floor(Math.random() * 6) + 3;
playerHp -= edmg;
addLog(
`Vous utilisez ${atk.name} et infligez ${dmg} dégâts !\n` +
`${ennemyName.textContent} riposte et inflige ${edmg} dégâts !`
);
updateUI();
if (playerHp <= 0) {
addLog("Vous êtes K.O.");
addLog(`Score final : ${score} ennemis vaincus.`);
attacksDiv.innerHTML = ""; // Remove attack buttons
}
}, 500);
}
function createAttackButtons() {
attacksDiv.innerHTML = "";
playerInv.forEach((atk, index) => {
const btn = document.createElement("button");
btn.onclick = () => playerAttack(index);
const data = outils_list.find(x => x.open_source_name === atk.name);
// Conteneur icône
const iconContainer = document.createElement("div");
iconContainer.className = "attack-icon-container";
const iconImg = document.createElement("img");
iconImg.src = data.icon_op_link;
iconImg.alt = data.open_source_name;
iconContainer.appendChild(iconImg);
btn.appendChild(iconContainer); // mettre l'icône avant le texte
// Texte du bouton
const textNode = document.createTextNode(atk.name + " "); // espace avant le "?"
btn.appendChild(textNode);
// Tooltip
const info = document.createElement("span");
info.className = "tooltip";
info.setAttribute("data-tooltip", data ? data.description_op : "Aucune description");
info.textContent = "?";
btn.appendChild(info);
attacksDiv.appendChild(btn);
});
}
document.getElementById("runBtn").onclick = () => {
if (Math.random() < 0.5) {
addLog("Vous prenez la fuite avec succès !");
} else {
addLog("La fuite échoue ! L'ennemi attaque !");
const dmg = Math.floor(Math.random() * 6) + 2; // 2-7
playerHp -= dmg;
updateUI();
addLog(`La fuite échoue ! L'ennemi inflige ${dmg} dégâts !`);
}
};
setCombat();
</script>
</body>
</html>