Double Down and Reveal Suit powers implemented
This commit is contained in:
parent
85c09d2843
commit
7e78fe5b0d
|
|
@ -3,50 +3,99 @@
|
|||
import HiLo from './lib/HiLo.svelte';
|
||||
|
||||
const windowRatio = 0.9;
|
||||
const width = window.innerWidth * windowRatio * 0.8;
|
||||
const width = window.innerWidth * windowRatio * 0.7;
|
||||
const height = window.innerHeight * windowRatio;
|
||||
const imageRatio = 3 / 2;
|
||||
const cardImageWidth = height * 0.6;
|
||||
const canvasXMargin = height * 0.03;
|
||||
const canvasYMargin = height * 0.07;
|
||||
const canvasYMargin = height * 0.02;
|
||||
const textXMargin = width * 0.01;
|
||||
const textSize = width * 0.03;
|
||||
const textSize = width * 0.025;
|
||||
const blackBackground = [0, 0, 0];
|
||||
const greenBackground = [10, 150, 10];
|
||||
const redBackground = [150, 10, 10];
|
||||
const animationInterval = 300;
|
||||
let outP5;
|
||||
let backImage;
|
||||
|
||||
let gameLogic;
|
||||
let currentCard;
|
||||
let doubleUsed = false;
|
||||
|
||||
const sketch = (p5) => {
|
||||
p5.preload = function() {
|
||||
outP5 = p5;
|
||||
gameLogic.initiateGame(p5);
|
||||
}
|
||||
p5.setup = function(){
|
||||
p5.createCanvas(width, height);
|
||||
p5.background(60);
|
||||
p5.background(blackBackground);
|
||||
backImage = gameLogic.getBackCardImage();
|
||||
};
|
||||
p5.draw = function() {
|
||||
if(gameLogic.getRecentScore() > 0) {
|
||||
p5.background(10, 150, 10);
|
||||
}
|
||||
else if(gameLogic.getRecentScore() < 0){
|
||||
p5.background(150, 10, 10);
|
||||
}
|
||||
p5.image(gameLogic.getCurrentCard().getImage(), canvasXMargin, canvasYMargin, cardImageWidth, cardImageWidth*imageRatio);
|
||||
p5.image(gameLogic.getBackCardImage(), (canvasXMargin * 2) + cardImageWidth, canvasYMargin, cardImageWidth, cardImageWidth*imageRatio);
|
||||
|
||||
p5.fill(255);
|
||||
p5.textSize(textSize)
|
||||
p5.textAlign(p5.TOP, p5.TOP);
|
||||
p5.text("Score: " + gameLogic.getScore(), (canvasXMargin * 2) + (cardImageWidth * 2) + textXMargin, canvasYMargin);
|
||||
|
||||
p5.image(gameLogic.getCurrentCard().getImage(), canvasXMargin, canvasYMargin, cardImageWidth, cardImageWidth*imageRatio);
|
||||
p5.image(backImage, (canvasXMargin * 2) + cardImageWidth, canvasYMargin, cardImageWidth, cardImageWidth*imageRatio);
|
||||
// p5.text("Current:", canvasXMargin, canvasYMargin * 0.5)
|
||||
// p5.text("Deck:", (canvasXMargin * 2) + cardImageWidth, canvasYMargin * 0.5);
|
||||
|
||||
p5.text("Score: " + gameLogic.getScore(), canvasXMargin, (canvasYMargin *2) + cardImageWidth*imageRatio);
|
||||
p5.fill(220);
|
||||
p5.text(gameLogic.getScoreMessage(), (canvasXMargin * 8) + (cardImageWidth * 2) + textXMargin, (canvasYMargin) + textSize)
|
||||
p5.textSize(textSize * 0.9);
|
||||
p5.text(gameLogic.getScoreMessage(), canvasXMargin * 7, (canvasYMargin *2) + cardImageWidth*imageRatio + (textSize * 0.5));
|
||||
|
||||
p5.text("Remaining: " + gameLogic.getRemaining() + "/52", (canvasXMargin * 2) + cardImageWidth, (canvasYMargin *2) + cardImageWidth*imageRatio);
|
||||
}
|
||||
}
|
||||
|
||||
const backgroundAnimation = (event) => {
|
||||
const recentScore = event.detail.recentScore;
|
||||
backImage = gameLogic.getBackCardImage();
|
||||
|
||||
let background;
|
||||
|
||||
if(recentScore > 0) {
|
||||
background = greenBackground;
|
||||
}
|
||||
else if(recentScore < 0){
|
||||
background = redBackground;
|
||||
}
|
||||
else {
|
||||
background = blackBackground;
|
||||
}
|
||||
|
||||
outP5.background(background);
|
||||
|
||||
let animationMultiplier = 2;
|
||||
if(doubleUsed) {
|
||||
animationMultiplier += 2;
|
||||
}
|
||||
|
||||
for(let i = 1; i > 0; i -= 0.1) {
|
||||
setTimeout(function() {
|
||||
outP5.background(background.map((n) => n * i))
|
||||
}, animationInterval * (1 - i) * animationMultiplier)
|
||||
}
|
||||
|
||||
doubleUsed = false;
|
||||
};
|
||||
|
||||
const doubleDownEffect = (event) => {
|
||||
outP5.background(0);
|
||||
doubleUsed = true;
|
||||
};
|
||||
|
||||
const revealSuit = (event) => {
|
||||
backImage = event.detail.backImage
|
||||
}
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<div class="main_screen">
|
||||
<div class="sub_screen">
|
||||
<HiLo bind:this={gameLogic}></HiLo>
|
||||
<HiLo bind:this={gameLogic} on:scoredPoints={backgroundAnimation} on:doublePressed={doubleDownEffect} on:suitPressed={revealSuit}></HiLo>
|
||||
</div>
|
||||
<P5 sketch={sketch}></P5>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -149,6 +149,16 @@
|
|||
{
|
||||
return images["Back"];
|
||||
}
|
||||
|
||||
export function getSpecificImage(imageName)
|
||||
{
|
||||
return images[imageName];
|
||||
}
|
||||
|
||||
export function getTopCardSuit()
|
||||
{
|
||||
return deck[deck.length - 1].getSuit();
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -2,12 +2,24 @@
|
|||
|
||||
<script>
|
||||
import Deck from './Deck.svelte';
|
||||
import { createEventDispatcher } from "svelte";
|
||||
|
||||
let doubleButton;
|
||||
let suitButton;
|
||||
|
||||
// Powers
|
||||
const doubleUsesMax = 3;
|
||||
const suitUsesMax = 10;
|
||||
|
||||
let currentCard;
|
||||
let deck;
|
||||
let score = 0;
|
||||
let multiplier = 1;
|
||||
let doubleUses = doubleUsesMax;
|
||||
let suitUses = suitUsesMax;
|
||||
let recentScore = 0;
|
||||
let gameEnd = false;
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
export function initiateGame(p5)
|
||||
{
|
||||
|
|
@ -16,8 +28,14 @@
|
|||
deck.shuffleDeck();
|
||||
gameEnd = false;
|
||||
currentCard = deck.drawCard();
|
||||
console.log(currentCard);
|
||||
score = currentCard.getValue();
|
||||
multiplier = 1;
|
||||
recentScore = 0;
|
||||
|
||||
doubleUses = doubleUsesMax;
|
||||
suitUses = suitUsesMax;
|
||||
doubleButton.innerHTML = "Double Down x" + doubleUses;
|
||||
suitButton.innerHTML = "Reveal Suit x" + suitUses;
|
||||
}
|
||||
|
||||
export function nextRound(highChosen)
|
||||
|
|
@ -46,12 +64,14 @@
|
|||
{
|
||||
recentScore = -(15 - topValue);
|
||||
}
|
||||
recentScore *= multiplier;
|
||||
|
||||
score += recentScore
|
||||
|
||||
currentCard = topCard;
|
||||
console.log(score);
|
||||
multiplier = 1;
|
||||
|
||||
dispatch("scoredPoints", { recentScore })
|
||||
if(deck.getRemaining() == 0) {
|
||||
gameEnd = true;
|
||||
}
|
||||
|
|
@ -59,6 +79,22 @@
|
|||
}
|
||||
const pickHigh = () => nextRound(true);
|
||||
const pickLow = () => nextRound(false);
|
||||
const doubleDown = () => {
|
||||
if(doubleUses > 0) {
|
||||
doubleUses -= 1;
|
||||
multiplier = 2;
|
||||
doubleButton.innerHTML = "Double Down x" + doubleUses;
|
||||
dispatch("doublePressed");
|
||||
}
|
||||
}
|
||||
const revealSuit = () => {
|
||||
if(suitUses > 0) {
|
||||
suitUses -= 1;
|
||||
const suit = deck.getTopCardSuit();
|
||||
const backImage = deck.getSpecificImage(suit + "Back");
|
||||
dispatch("suitPressed", { backImage });
|
||||
}
|
||||
}
|
||||
|
||||
function evaluateIfCardHigherThanCard(firstCard, secondCard)
|
||||
{
|
||||
|
|
@ -103,15 +139,25 @@
|
|||
{
|
||||
return deck.getBackCardImage();
|
||||
}
|
||||
|
||||
export function getRemaining() {
|
||||
return deck.getRemaining();
|
||||
}
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<button on:click={pickHigh}>High!</button>
|
||||
<button on:click={pickLow}>Low!</button>
|
||||
<button class="Powers" bind:this={doubleButton} on:click={doubleDown}>Double Down x3</button>
|
||||
<button class="Powers" bind:this={suitButton} on:click={revealSuit}>Reveal Suit x10</button>
|
||||
<button class="MainButtons" on:click={pickHigh}>High</button>
|
||||
<button class="MainButtons" on:click={pickLow}>Low</button>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
button {
|
||||
/* Frame 1 */
|
||||
box-sizing: border-box;
|
||||
|
||||
/* Auto layout */
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
|
|
@ -120,9 +166,34 @@
|
|||
gap: 10px;
|
||||
|
||||
position: relative;
|
||||
width: 68px;
|
||||
height: 36px;
|
||||
width: 8em; /*105;*/
|
||||
height: 4em; /*54*/
|
||||
|
||||
background: #55109A;
|
||||
border: 2px solid #000000;
|
||||
|
||||
|
||||
/* button 1 */
|
||||
/* width: 68px;
|
||||
height: 17px; */
|
||||
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 17px;
|
||||
/* identical to box height */
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
|
||||
|
||||
/* Inside auto layout */
|
||||
flex: none;
|
||||
order: 0;
|
||||
flex-grow: 0;
|
||||
margin-bottom: 5px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
|
||||
background: #D9D9D9;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user