Το Παιχνίδι 31 με χρήση
κλάσεων και γραφικά με
την χρήση Canva 2d
κλάσεων και γραφικά με
την χρήση 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>