ClubInfoInsaT · EvanRz · Dec 2, 2022
diff --git a/stopspe/CSS/styles.css b/stopspe/CSS/styles.css
@@ -0,0 +1,150 @@
+* {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+}
+
+
+#game-box {
+    margin: auto;
+    margin-top: 100px;
+    display: flex;
+    flex-direction: column;
+    height: 400px;
+    width: 600px;
+    border: solid 2px black;
+    border-radius: 6px;
+}
+
+#hud {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    height: 10%;
+    justify-content:space-between;
+    align-items: center;
+}
+
+#life-bar {
+    height: 40%;
+    width: 50%;
+    border: solid 2px black;
+    border-radius: 12px;
+    margin-left: 10px;
+}
+
+#life {
+    width: 100%;
+    height: 100%;
+    background-color: hsl(120, 76%, 33%);
+    border-radius: 12px;
+}
+
+#select-difficulty {
+    margin-right: 10px;
+}
+
+#game-start {
+    display: flex;
+    flex-direction: column;
+    row-gap: 10px;
+    width: 100%;
+    height: 90%;
+    justify-content: center;
+    align-items: center;
+    background-color: hsla(0, 5%, 22%, 0.1);
+}
+
+#start-button {
+    width: 150px;
+    height: 75px;
+    background-color: hsl(220, 69%, 53%);
+    border: 3px solid #000000;
+    border-radius: 200px;
+    box-shadow: #000000 2px 2px 0 0;
+    color: #000000;
+    cursor: pointer;
+    font-weight: 600;
+    font-size: 20px;
+    padding: 0 18px;
+    line-height: 50px;
+    text-align: center;
+    text-decoration: none;
+    user-select: none;
+    -webkit-user-select: none;
+    touch-action: manipulation;
+}
+
+#start-button:hover {
+    background-color: #fff;
+    }
+
+#start-button:active {
+box-shadow: #422800 2px 2px 0 0;
+transform: translate(2px, 2px);
+}
+
+#sp-icon {
+    width: 150px;
+    height: 130px;
+}
+
+#game-content {
+    display: none;
+    width: 100%;
+    height: 90%;
+    background-color: white;
+}
+
+#dessin {
+    border: solid 1px green;
+    width: 100%;
+    height: 100%;
+}
+
+#game-end {
+    display: none;
+    flex-direction: column;
+    row-gap: 10px;
+    width: 100%;
+    height: 90%;
+    justify-content: center;
+    align-items: center;
+    background-color: hsla(0, 5%, 22%, 0.1);
+}
+
+/* body {
+    background-color: #cccccc;
+    font-family: Arial;
+    color: black;
+    font-size: 12pt;
+}
+
+* {
+    font-family: "Arial", sans-serif;
+    font-size: 12pt;
+    color: #000000;
+}
+
+#titre {
+    font: bold 16pt sans-serif;
+    color: red;
+}
+
+#image {
+    width: 450px;
+    height: 300px;
+}
+
+#animation {
+    background-color: whitesmoke;
+    width: 450px;
+    height: 300px;
+} */
+
+
+
+
diff --git a/stopspe/Images/condom.png b/stopspe/Images/condom.png
diff --git a/stopspe/Images/sp.png b/stopspe/Images/sp.png
diff --git a/stopspe/JS/code.js b/stopspe/JS/code.js
@@ -0,0 +1,162 @@
+window.onload = function(){
+    init1();
+}
+
+function init1(){
+    im = new Image();
+    im.src = "./Images/condom.png"
+
+    listSpe = [];
+    speedCreationSpe = 0;
+    speedSpe = 0;
+    maxSpeKilled = 0;
+    currentSpeKilled = 0;
+
+
+    monCanvas = document.getElementById("dessin");
+    if (monCanvas.getContext){
+        context = monCanvas.getContext('2d');
+    } else {
+        alert('canvas non supporté')
+    }
+    console.log(monCanvas.height, monCanvas.width);
+
+    document.getElementById("start-button").addEventListener('click', startGame, false);
+    monCanvas.addEventListener("click", isSpeClicked, false); 
+}
+
+function startGame(){
+    document.getElementById("game-start").style.display = "none";
+    document.getElementById("game-content").style.display = "inline";
+    createSpe();
+    var val = document.getElementById("select-difficulty").value;
+    if(val=="easy"){
+        speedCreationSpe = 2000;
+        speedSpe = 5;
+        maxSpeKilled = 10;
+    } else if(val=="medium"){
+        speedCreationSpe = 500;
+        speedSpe = 7;
+        maxSpeKilled = 20;
+    }else if(val=="hard"){
+        speedCreationSpe = 300;
+        speedSpe = 7;
+        maxSpeKilled = 30;
+    }
+    interCreation = setInterval(createSpe, speedCreationSpe);
+    interAnimation = setInterval(Anime, 10);
+
+}
+
+function Anime(){
+    var listDeletedSpe = [];
+    context.clearRect(0, 0, monCanvas.width, monCanvas.height);
+    context.drawImage(im, 0, 0, 750, 360);
+    if(listSpe.length != 0){
+        context.clearRect(0, 0, monCanvas.width, monCanvas.height);
+        context.drawImage(im, 0, 0, 750, 360);
+
+        for (var j=0; j<listSpe.length; j++){
+            var spe = listSpe[j];
+            if(spe[0] > 550){
+                //console.log("its good");
+                drawSpe(spe,true);
+                listDeletedSpe.push(j);
+            }else{
+                drawSpe(spe,false);
+            }
+        }
+
+        if(listDeletedSpe.length != 0){
+            //console.log(listDeletedSpe);
+            for(var k=0; k<listDeletedSpe.length; k++){
+                listSpe.splice(listDeletedSpe[k],1);
+            }
+        }
+
+    }
+}
+
+function drawSpe(spe,deleted,index){
+    if(!deleted){
+        spe[0] += speedSpe;
+        context.save();
+        context.translate(spe[0],spe[1])
+        context.fillStyle='blue';
+        context.fillRect(0,0,50,15);  
+        context.restore();
+    } else {
+        updateLife();
+    }
+}
+
+
+function createSpe(){
+    var x = 0;
+    var y = getRandomInt(70,monCanvas.height-80);
+    var newSpe = [x,y]
+    listSpe.push(newSpe); 
+    console.log(listSpe);
+}
+
+
+
+function isSpeClicked(e) {
+    // position de la souris dans le doc
+    var xSourisDocument = e.pageX;
+    var ySourisDocument = e.pageY;
+
+    //position du Canvas dans le doc
+    var xCanvas = monCanvas.offsetLeft;
+    var yCanvas = monCanvas.offsetTop;
+    //poisition du clic par rapport au Canvas
+    xSourisCanvas = xSourisDocument - xCanvas;
+    ySourisCanvas = ySourisDocument - yCanvas;
+
+    if(listSpe.length != 0){
+        for (var j=0; j<listSpe.length; j++){
+            if(listSpe[j][0] <= xSourisCanvas && xSourisCanvas <= listSpe[j][0]+55) {
+                if(listSpe[j][1] <= ySourisCanvas && ySourisCanvas <= listSpe[j][1]+20) {
+                    listSpe.splice(j,1)
+                    currentSpeKilled +=1;
+                    if(currentSpeKilled==maxSpeKilled){
+                        endGame(true);
+                    }
+                }
+            }
+
+        }
+    }
+}
+
+function updateLife(){
+    var val = (document.getElementById("life").offsetWidth / 300)*100;
+    val = val - 20
+    console.log(val);
+    document.getElementById("life").style.width = val+"%"
+    if(val==0){
+        endGame();
+    }
+}
+
+function endGame(goodEnding){
+    clearInterval(interCreation);
+    clearInterval(interAnimation);
+    document.getElementById("game-content").style.display = "none";
+    document.getElementById("game-end").style.display = "flex"
+    if(goodEnding){
+        document.getElementById("game-end").innerHTML = "Bravo vous avez réussi ! Protegez-vous bien !";
+    }else {
+        document.getElementById("game-end").innerHTML = "La capote a craqué ! Comment vous réagiriez dans cette situation ?";
+    }
+
+}
+
+
+//renvoie un nombre aléatoire compris dans un intervalle
+function getRandomInt(min, max) {
+    min = Math.ceil(min);
+    max = Math.floor(max);
+    return Math.floor(Math.random() * (max - min +1)) + min;
+  }
+
diff --git a/stopspe/jeu.html b/stopspe/jeu.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8"/>
+<title>BubbleHunt</title>
+<link rel="stylesheet" media="screen" href="./CSS/styles.css" type="text/css" />
+<script src="./JS/code.js"></script>
+</head>
+<body>
+
+<div id="game-box">
+    <div id="hud">
+        <div id="life-bar">
+            <div id="life"></div>
+        </div>
+
+        <select name="difficulty" id="select-difficulty">
+            <option value="easy">capote de marque</option>
+            <option value="medium">capote réutilisée</option>
+            <option value="hard">sac plastique</option>
+        </select>
+
+    </div>
+
+    <div id="game-start">
+        <button role="button" id="start-button">START</button>
+        <img id="sp-icon" src="./Images/sp.png"/>
+    </div>
+
+    <div id="game-content">
+        <canvas id="dessin" width="600px" height="360px">
+            Texte pour les navigateurs ne supportant pas canvas
+        </canvas>
+    </div>
+
+    <div id="game-end"></div>
+</div>
+
+</body>
+</html>