31
Το Παιχνίδι 31 με χρήση
κλάσεων και γραφικά με
την χρήση Canva 2d
Ο Παίκτης:None
CREDITS:100€
BET:10€
Computer

<code>

// H html με τα στοιχεία ιστοσελίδας
<html>
<head>
    <meta charset=”UTF-8″>
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <title>31</title>
    <style>
// Οι εντολές CSS
#cn{
    border:2px solid orange;
    background-image: url(“images/back.png”);
}
#player{
    position:absolute;
    padding-left:10px;
    left: 500px;
    top:15px;
    width:15em;
    height:4em;
    font:1.2em cursive;
    text-shadow: 4px 3px 4px rgb(9, 5, 12);
    color:rgb(201, 95, 201);
    /*border:2px solid orange;*/
    /* box-shadow: 2px 2px 4px  rgb(187, 138, 234);*/
}
#credits{
    position:absolute;
    top:40px;
    left:500px;
    font:1.2em cursive;
    text-shadow: 4px 3px 4px rgb(9, 5, 12);
    color:rgb(201, 95, 201);
    padding-top: 5px;
    padding-left:10px;
    height: 1.5em;
    width:10em;
    /*border:2px solid orange;*/
}
#bt{
    position: absolute;
    left:300px;
    width:6em;
    padding-top: 5px;
    margin-top: 5px;
    font:1.5em ARIAL;
}
#hit{
    position: absolute;
    left:670px;
    top:13px;
    width: 3.5em;
    padding-top: 5px;
    margin-top: 5px;
    font:1.2em ARIAL;
}
#rise{
    position: absolute;
    left:740px;
    top:20px;
    width: 3.5em;
    padding-top: 5px;
    margin-top: 5px;
    font:1.2em ARIAL;
}
#full{
    position: absolute;
    left:670px;
    top:48px;
    width: 3.5em;
    padding-top: 5px;
    margin-top: 5px;
    font:1.2em ARIAL;
}
#bet{
    position: absolute;
    left:240px;
    top:120px;
    padding-top: 10px;
    font:2em ARIAL;
    color:rgb(255, 255, 205);
    text-shadow: 4px 4px 6px rgba(20, 12, 9, 2);
}
#game{
    position: absolute;
    border-radius: 12px;
    padding: 8px;
    box-shadow: 6px 6px 6px 2px rgba(60, 38, 7, 0.62);
    left:160px;
    top:180px;
    font: 3.5em ARIAL;
    text-shadow: 4px 4px 8px rgba(73, 38, 29, 0.945);
    color:rgba(233, 169, 228, 0.773);
    z-index: 999;
}
#txtDeal{
    position: absolute;
    left:490px;
    top:390px;
    font:2em cursive;
    text-shadow: 4px 3px 4px rgb(9, 5, 12);
    color:rgb(201, 95, 201);
    z-index: 999;
}
#imgDeal{
    position: absolute;
    border-radius: 12px;
    padding: 8px;
    left:420px;
    top:420px;
    font: 1em ARIAL;
    text-shadow: 4px 4px 8px rgba(73, 38, 29, 0.945);
    color:rgba(233, 169, 228, 0.773);
    z-index: 998;
}
    </style>
</head>
<body>
    <div id=”player”>Ο Παίκτης:None</div>
    <div id=”credits”>CREDITS:100€</div>
    <button id=”hit”> Κάρτα</button>
    <button id=”full”>OK</button>
    <button id=”rise”>Bet +5</button>
    <button id=”bt”> NEO ΠΑΙΧΝΙΔΙ</button>
    <div id=”bet”>BET:10€</div>
    <div id=”txtDeal”> Computer</div>
        <imgid=”imgDeal”src=”images/31dealer.png”>
    <div id=”game”></div>
    <canvas id=”cn” width=”800″ height=”600″></canvas>
    <br><div id=”out”></div>
</body>
<script >
class Card {
    constructor(symbol,value,point){
        this.height=224;
        this.width=152;
        this.symbol=symbol;
        this.value=value;
        this.point=point;
        this.posx=0;
        this.posy=0;
        this.backface=false;
    }
     drawImg(ctx,px,py){
        let r=0;
        let place=0;
        if(this.backface==true) r=5;
        else
        {
            if (this.symbol==’H’) r=1;
            else if(this.symbol==’C’) r=2;
            else if(this.symbol==’D’) r=3;
            else r=4;
            if(this.value==’T’) place=10;
            else if(this.value==’J’) place=11;
            else if(this.value==’Q’) place=12;
            else if(this.value==’K’) place=13;
            else place=parseInt(this.value);
            place=place-1;
        }
        const cardsImg=new Image();
        cardsImg.src = ‘images/cards.png’;
        //let cwd=cardsImg.width=1920;
        // let cht=cardsImg.height=1104;
        let stx=place*this.width+10;
        let sty=(r-1)*this.height;
        ctx.drawImage(cardsImg,stx, sty,
                this.width,this.height,px, py, 126, 186);
    }
    moveCard(ctx,tx,ty)
    {
        if(this.posx<tx)
            {this.posx+=20;
            this.posy+=3}
        this.drawImg(ctx,this.posx,this.posy);
    }
}
</script>
<script >
    class Player {
        constructor(name){
            this.name=name;
            this.credits=100;
            this.points=0;
            this.plCards=[];
        }
        setCredits(newCredits){
            this.credits=newCredits
        }
    }
</script>
<script >
class Deck{
    symbols=[‘H’,’C’,’D’,’S’];
    values=[‘1′,’2′,’3′,’4′,’5′,’6′,’7′,’8′,’9′,’T’,’J’,’Q’,’K’];
    cards=[];
    constructor(){
        let p3=0;
        this.symbols.forEach(el1 => {
            this.values.forEach(el2 => {
                if( el2==’J’ || el2==’Q’ || el2==’K’ || el2==’T’)
                    p3=10;
                else
                    p3=parseInt(el2);
                this.cards.push(new Card(el1, el2 ,p3));
                //out.innerHTML+=el1+””+el2+”=”+p3+” “;
            } );
        } );
    }
    // ΑΝΑΚΑΤΕΜΑ ΚΑΡΤΩΝ
    anakatema(){
        let currentIndex = this.cards.length,  randomIndex;
        // While there remain elements to shuffle.
        while (currentIndex != 0) {
            // Pick a remaining element.
          randomIndex = Math.floor(Math.random() * currentIndex);
          currentIndex–;
          // And swap it with the current element.
          [this.cards[currentIndex], this.cards[randomIndex]] =
          [this.cards[randomIndex], this.cards[currentIndex]];
        }
    }
}
</script>
<script>
    const cn=document.querySelector(“#cn”);
    const ctx = cn.getContext(‘2d’);
    const crd=document.querySelector(‘#credits’);
    const pl=document.querySelector(“#player”);
    const res=document.querySelector(“#game”);
    const betPr=document.querySelector(“#bet”);
    const out=document.querySelector(“#out”);
    const bt=document.querySelector(“#bt”);
    const hit=document.querySelector(“#hit”);
    const resbtn=document.querySelector(“#full”);
    const rise=document.querySelector(“#rise”);
    const CANVAS_W=cn.width=800;
    const CN_H=cn.height=600;
    res.style.boxShadow = “none”;
    // Τα αντικειμενα μεσα στο παιχνιδι
    let player= new Player(“Νίκος”);
    let computer= new Player(“Computer”);
    let trapoula=new Deck();
    let desk=[];
    // Αρχικοποιηση  των μεταβλητών
    pl.innerHTML=”Ο παίκτης: “+player.name;
    let bet=10; // Το αχρικο στοιχημα με 10 credits
    let posx=0; // Θέση x των καρτων του παικτη
    let posy=0; // Θέση y των καρτων του παικτη
    let resx=0;
    let gameround=false;// Αν εχει ξεκινησει ενας νεος γυρος
    let anakat=true;   // Αν εχουν ανακατευτει οι καρτες
    let ncard=false;    // Αν ζητηθηκε νεα καρτα
    let cncard=3;       // Μετρητης καρτων του παικτη
    let check=false;
    let show=false;     // Αν ο computer εχει κλειστο χαρτί
    // Ανιχνευτής Γεγονοτος για Νεο Γύρο
    bt.addEventListener(“click”, e=>{
        // Ηχος μοιρασμα καρτων
        var audio = new Audio(‘images/deal.mp3’);
        audio.play();
        newround(); // Κληση για νέο γύρο
    })
    // Ανιχνευτής Γεγονοτος για Νεα Καρτα
    hit.addEventListener(“click”, e=>{
        var audio = new Audio(‘images/card.mp3’);
        audio.play();
        newCard(player,cncard);// κληση για νεα καρτα
    })
    // Ανιχνευτής Γεγονοτος για ελεγχο αποτελεσματος γυρου
    resbtn.addEventListener(“click”, e=>{
        show=true;
        checkCards();
    })
    // Ανιχνευτής Γεγονοτος για ελεγχο αποτελεσματος γυρου
    rise.addEventListener(“click”, e=>{
        if (bet<=15)
        {
            bet+=5;
            rise.disabled=true;
        }
    })
    gameloop();
    function gameloop()
    {
        if (gameround==true)
        {
            if(anakat==false)
            {
                trapoula.anakatema();
                anakat=true;
            }
            if(mirasma==false)
            {
                out.innerHTML=””;
                dealCards();
                mirasma=true;
                if(player.points>=31 || computer.points>31)
                {
                    show=true;
                    checkCards();
                }
            }
        draw();
        }
        requestAnimationFrame(gameloop);
    }
    // Μοίρασμα
    function dealCards(){
        // Μοιρασμα 3 καρτών στο παίκτη
        for(let i=0;i<3;i++)
        {
            player.plCards.push(trapoula.cards.pop());
            player.plCards[i].posx=0;
            player.plCards[i].posy=15;
            desk.push(player.plCards[i]);
            player.points+=player.plCards[i].point;
            }
        // Μοιρασμα καρτων στον computer μεχρι το 26. Δεν τραβα πανω από 26
        i=0
        do
        {
            computer.plCards.push(trapoula.cards.pop());
            computer.points+=computer.plCards[i].point;
            computer.plCards[i].posx=0;
            computer.plCards[i].posy=350;
            desk.push(computer.plCards[i]);
            i++;
            } while(computer.points<26)
        out.innerHTML+=” Player:”+player.points;
    }
    // Eλεγχος καρτων
    function checkCards(){
        res.style.backgroundColor=”rgba(33, 33, 77, 0.8)”;
        res.style.boxShadow=”6px 6px 6px 2px rgba(60, 38, 7, 0.62)”;
        if (computer.points>31)
        {
            var audio = new Audio(‘images/win.mp3’);
            audio.play();
            res.innerHTML=computer.name+”: “+computer.points +” KAHKE!! <br>Ο “
                        +player.name+” Κέρδισε”;
            player.credits+=bet;
        }
        else if (player.points>31)
        {
            var audio = new Audio(‘images/loose.mp3’);
            audio.play();
            res.innerHTML=player.name+”: “+player.points +
                        ” KAHKE!! <br>Ο Computer Κέρδισε”;
            player.credits-=bet;
        }
        else if(player.points>computer.points)
        {
            var audio = new Audio(‘images/win.mp3’);
            audio.play();
            res.innerHTML=player.name+”: “+player.points+”<br> “+
                        computer.name+”: “+computer.points
                        +” <br>Ο “+player.name+” Κέρδισε”;
            player.credits+=bet;
        }
        else if(player.points<computer.points)
        {
            var audio = new Audio(‘images/loose.mp3’);
            audio.play();
            res.innerHTML=player.name+”: “+player.points+”<br> “+
                computer.name+”: “+computer.points
                +”<br> Ο “+computer.name+” Κέρδισε”;
                player.credits-=bet;
        }
        else if(player.points==computer.points)
        {
            var audio = new Audio(‘images/draw.mp3’);
            audio.play();
            res.innerHTML=player.name+”: “+player.points+”<br> “+
                    computer.name+”: “+computer.points +”<br>  Ισοπαλία “;
                player.credits+=bet;
        }
        crd.innerHTML=”CREDITS:”+player.credits;
        bt.disabled=false;
        hit.disabled=true;
        resbtn.disabled=true;
    }
    function draw(){
        ctx.clearRect(0,0,800,600);
        betPr.innerHTML=”BET:”+bet+”€”;
        for(i=0;i<player.plCards.length;i++)
        {
            player.plCards[i].moveCard(ctx,400+i*40,i*10);
        }
        let tolen=computer.plCards.length
        if (computer.points<31 && player.points<31 && show==false)
            computer.plCards[tolen-1].backface=true;
        else
        computer.plCards[tolen-1].backface=false;
        for(i=0;i<tolen;i++)
        {
            computer.plCards[i].moveCard(ctx,80+i*40,300+i*10);
        };
        if(show==true){
            resx+=10;
            if(resx>=200) resx=200
            res.style.left=resx+”px”;
        }
    }
    function newCard(player,i){
        try{
            let nCard=trapoula.cards.pop();
            player.plCards[i]=nCard;
            player.plCards[i].posx=0;
            player.plCards[i].posy=15;
            desk.push(player.plCards[i]);
            player.points+=player.plCards[i].point;
        } catch(er){
            out.innerHTML+=”=>”+player.points+”<br>”+er;
        }
        out.innerHTML+=”=>”+player.points+”<br>”;
        if(player.points>=31 || computer.points>31)
            checkCards();
        ncard=true;
        cncard+=1;
    }
    function newround()
    {
        trapoula=new Deck();
        desk=[];
        player.plCards=[];
        computer.plCards=[];
        computer.points=0;
        player.points=0;
        res.style.backgroundColor = “rgba(33, 33, 77, 0)”;
        res.style.boxShadow = “none”;
        res.innerHTML=””;
        resx=0;
        bet=10;
        betPr.disabled=false;
        rise.disabled=false;
        posx=0; // Θέση x των καρτων του παικτη
        posy=0; // Θέση y των καρτων του παικτη
        ncard=false;    // Αν ζητηθηκε νεα καρτα
        cncard=3;       // Μετρητης καρτων του παικτη
        check=false;
        gameround=true;
        anakat=false;
        mirasma=false;
        show=false;
        bt.disabled=true;
        hit.disabled=false;
        resbtn.disabled=false;
    }
</script>
</html>

</code>