creating a blackjack game using javascript, html and css only - javascript

I am coding a mobile app using PhoneGap, and I am only using HTML and JavaScript. so far, i have made all of the betting functions, such as starting an initial bet, buttons to increase or decrease the bet, and the functions that are called when the player wins, loses, or gets blackjack. My problem is with the deck.
It might be helpful to know what I called my functions, I don't know, but here they are anyway:
function win() adds the value in the bet to the total money.
function lose() subtracts the value that was bet from the total money.
function blackjack() adds one and a half times the value bet to the total money, and I used the Math.floor() on that one.
So with that in mind, I have two questions.
I want to have a deck that is just like a physical deck. I might be a little picky, but i want it so that if a card is shown, it will not be called again until all 52 cards are used, or the deck is shuffled. The cards can come out at random, i don't care as long as the cards are not repeated. also, how would you separate the piles that are dealt?
For example, one pile is the user, the other is the dealer. i kinda think this is needed because we will use the card values to add and decide who has won.
This next part is not required, but would be nice.
Would there be a way that I could add an image to the card that is chosen, so that the player can visually see the card that is drawn?
Using JavaScript, html and css __ONLY__, could I save a value to the apps internal memory or something? What I'm trying to achieve is that when, the player closes the app, the amount of money that is their "winnings" will be saved, and shown the next time they open the app.
I also have one more question, but this one is not part of the app.
Do anyone know how old you have to be to sign up for a Google developer account? I want to publish my app when I finish, but I'm only 17 and I don't know if I'm allowed to create a Google developer account to post my app on Google play because of my age.

To store some data in the client side, you can use the localStorage in a web browser, maybe it is not the best method to work in Android, but ut works.
localStorage.setItem("key", "value");
localStorage.getItem("key");
there you can store info

Related

Connecting players' local games together

I'm looking for a special answer that i can't find anywhere and i need your help/ideas:
The situaton:
I'm making a mobile web-game that is played on mobile phones. Every player has its own version and profile with levels etc. It is a roulette game so i want if a player gets a card it gets xp and the other players need to get xp as well. But as of now there is no way of syncing game data from one player to other players.
All roulette cards are stored in one big array and if a card is turned the script chooses a random one from the stack.
I was self thinking of some kind of code that everyone enters at the start of the game, and it contains the numbers of idk 20 cards in the array and so the game of all players will show the same card if they click next. But i dont know how to decode this and it is a bit irritating to enter such big code everytime you want to play.
P.s. i do not want to use a third party library or nodejs or something like that. Just javascript.
The "app/game" is hosted on a website that every player loads on their own phone. And game save data is stored in localstorage.
Can you please help? I dont have code to show. That is not relevant here.
I fixed it.
I used QR Codes instead. One qr code generator for the host and a qr code reader for the other players.
Search google for qr code reader js and you'll find it
thnx!

Creating customisable product block (change appearance on user selections)

I need to create a web app where users can customize on real-time their bags using the available options.
Firstly I thought in having an image per every combination but that's not very intelligent due to the huge amount of possible combinations.
Another idea is to crop every customizable bag section and create a version for every option. This is better but not ideal. The idea is to be able to simply upload new options, without needing to be cropping images every time.
How would you do this guy?
I have some javascript experience but this is the first time when I do something like this.
Many thanks!

What's the best way to implement dynamic text on a static page?

I want my blog to be more interesting by making it different every time a reader reads a post. For example, I want to tell a story using a quote from a famous person, a picture, and a situation from the real life. Say, I have 2 relevant quotes, 3 pictures, and 10 situations to use. I don’t want to use them all together, instead, I want every item to be randomly selected during the page load, this will give me 2×3×10 = 60 different variants of the page. If I had a database-backed site, I would select them parts from a DB, but I like the Middleman much and the page must be static.
What would you recommend?
JQuery might be the lightest weight easy solution here. You could use JavaScript to randomly choose each element and place them on the screen.
If you wanted to make sure the person had a unique message each time, you could record the selected combination in a client side cookie so on subsequent visits, your code checks the cookie to make sure that the combination is different than the previous x number of visits.
Depending on how long those 10 stories are, I would say maybe the quotes and the stories could be downloaded as a compressed JavaScript file that contains the list in a JSON. When you set the img src attribute using JQuery, it should pull the required image down from the server.
It would be a small project for me to show you all the details here but hopefully I've given you enough information to help you get started. You may have to use Google to fill in for examples of random numbers in JavaScript, using cookies with JQuery, replace image using JQuery.

Animations in Meteor

I'm working on a card game project, and one of the issues I'm facing right now is animations. I just can't figure out how to animate the card properly so that both users see it animate at the same time, and for the right position. And by that I mean, when your opponent draws a card, you see an animation of a card from the opponent's deck into his hand while for the opponent, the animation is from his deck into his hand.
I've tried using jQuery animations, and I could only do one part of the animation - couldn't represent the opponent's animations.
I've also tried some of Atmosphere's packages, but they didn't work the way I wanted.
The cards collection from which I'm trying to animate has a place field for the card (hand, deck, drop..etc). And each element in the HTML depends on the place field to get the cards from, so for example:
Template.playerHand.cards = () ->
Cards.find {userId: Meteor.userId(), place: "hand"}
and the HTML is:
<ul class="holder">
{{#each cards}}
<li><img src="{{card.image}}" /></li>
{{/each}}
</ul>
would it be possible to animate the card depending on the previous place?
like if a card was in the deck, then it moved to hand, a specific animation will run. Same for from hand to deck.
Thanks.
It's hard to diagnose this with so little code to go by, but I'd guess that something like this is happening:
Player A draws a card:
Player A sees an animation almost instantly. This is because whatever code is called when a card is drawn (e.g., an update in the Cards collection) is simulated client-side for Player A, which triggers the animation immediately before the server even knows that the card has been drawn.
Player B sees an animation after a few seconds. This is because Player B needs to wait for the card-drawing code (the update in the Cards collection) to sync from Player A's browser to the server, and then back down from the server to Player B's browser.
If this is the reason for the variation in animation times, then the solution is to prevent Player A's browser from simulating the database update that triggers the animation. In other words, the first machine to learn of the card-drawing should be the server, which syncs that news down to both players at roughly the same time. There are two ways to accomplish this:
Use this.isSumulation within the function that updates the database when a card is drawn. Basically, keep the database-updating code within a block like if (!this.isSimulation) so that it executes only on the server.
Have the drawing of the card be achieved via a Meteor method. So Player A would draw a card, which causes Meteor.call("drawCard") which would then cause the drawCard method to execute on the server. (The userId is sent along within this). Define the drawCard method in a file in the /server folder or within a Meteor.isServer block so that the clients can't see its code, which therefore means they can't simulate it.
Either way, the database update happens on the server first, then gets synced down to all clients more or less at the same time, which should trigger the animations at about the same time.
If the reason that the animations are happening at different times is because your clients are at dramatically different speed connections (i.e. one on broadband and one on a cellphone) then a whole other set of compensation techniques are needed . . . but since this was posed as a Meteor question I'm assuming your problem is Meteor-related and not a general networking issue. If I'm wrong feel free to edit your question and I or the community can post some lag-compensation techniques for Meteor.

How would I go about recording changes in a large text field?

Let's say I want a user to write a story in 20 minutes. After the user is done I want to play back the story writing process so I can see how the user went about doing it. How would I do this? I don't want to watch every second of it, obviously, but I'd like to see a snapshot of whenever a "large change" was made. The "large change" should be defined by me. It could be X amount of character additions or subtractions.
I thought of somehow trying to continuously monitor the textbox for changes and then store the text as a string in an array every time there is a "large change". Then to replay this, I will play the string array with a 1 second delay.
Anyone think of a better way to do this or know a library that would help?
Thanks!
Let's take for granted that you have the capacity to persist this state and just look at the challenge of detecting and displaying the diffs. The most challenging aspect of you problem is going to be defining and subsequently detecting what you call a "large change". If we set that aside for a moment I think there are two ways you can go about this:
1) Operational transform - (http://en.wikipedia.org/wiki/Operational_transformation)
This is what Google Docs(etherpad) uses to synchronize real-time collaborative edits across multiple browsers. With OT you can practically recreate a video of the changes made to a document. You can see this in action on thinklinkr.com revision history (full disclosure - I am one of the founders).
2) Diff-match-path - (http://code.google.com/p/google-diff-match-patch/)
This is actually a set of three algorithms that can be used to effeciently create and resolve differences between text documents. I think this might be a better match for you given your requirement about chunking diffs.

Categories

Resources