How to save game information PHP/HTML/CSS/JS [closed]
Tags: javascript,php,html,css,ajax
Problem :
I am building a web browser text base RPG game with PHP/Javascript/HTML and CSS.
Each user has some information like his Name, Level, Experience, Gold and more. All the data is saved in the database.
When moving from pages in the game what will be the right method to store the data to be use in all the pages?
I thought about the following options:
- PHP SESSION
- Cookie
- Using GET with the info in the link.
What do you think is the right way to do it? In aspect of data security, hacking, easy etc.
Currently I am thinking about using PHP SESSION.
Solution :
Assuming that most of your game logic is executed on the server side, keep the game state in the PHP session. Other than cookies and GET parameters, the session information is stored on server side and for this reason out of reach for manipulations by the user.
In addition to that, save consistent states to the database often to make the game information persistent.
CSS Howto..
table { box-shadow: 1px 1px 1px #999; } More box-shadow examples here: http://www.css3.info/preview/box-shadow/...
change windowpos >= pos.top to windowpos >= (s.height()/2) + pos.top EDIT http://jsfiddle.net/BVK2q/...
PURE CSS APPROACH: To achieve your first requirement, you need to use the css selector :nth-child(). How to use it: element:nth-child(n) where n represents the index of the child element...
To accomplish this you set float:right to the element which you always want to be visible and you set display:block to the other element with the ellipsis. FIDDLE Markup <div...
The reason .gallery__card is wider than gallery__card__imgis because of the text you have in .gallery__card. If you remove the text, it will stay as wide as .gallery__card__img. See here. You...
This is possible using just CSS with the :hover pseudo-selector for the parent div, and also adding a class when you click on it (for tablets). For a quick example,...
@ben; just wirte overflow:hidden in your p tag check this http://jsfiddle.net/sandeep/Tu5Y5/7/...
maybe: width:20px; height 10px; border: 1px solid #fff; color: white; padding-left: 10px; padding-top: 4px; font-size: 16px; line-height: 0px; work?...
The animation is in :hover, it's called the flip card effect. You can alter the effect by playing around with the transform & transition values. Cubic bezier if you're wondering...
Go to http://getbootstrap.com/customize/ and toggle just what you want from the BS3 framework and then click "Compile and Download" and you'll get the CSS and JS that you chose. Open...
Here's a real simple "slider" with some "animation" you can play with FIDDLE. JS var i = 1; $( ".sliderholder img:nth-child(" + i + ")" ).show(1000); $('#forward').on('click', function(){ $( ".sliderholder...
UPDATED: (based on the further request of the OP in the comment section) try this: $(document).on('scroll',function(){ if($(document).scrollTop()>=$('#about').offset().top && $(document).scrollTop()<$('#work').offset().top){ //assuming the about section has an id called about (#about)...
Sure, just add position:relative to the div and position:absolute to the button: div { border: 1px solid red; position: relative; } input { font-size: 10vw; width: 50%; } button {...
how about this? var servoPosition = 1; $('#servo').click(function(){ $('#servo').removeClass('position' + servoPosition); if(servoPosition == 4){ servoPosition = 1; } else { servoPosition++; } $('#servo').addClass('position' + servoPosition); }) .back{ position: relative; top:...
Can't understand what you problem is from the way you posted the question but here is a quick menu I put together that only uses CSS that functions like the...
Try this similar one with css and jQuery $(document).ready(function() { setInterval(function() { $("circle").attr("stroke", "white"); setTimeout(function() { $("circle").attr("stroke", "black"); }, 500); }, 1000); }); ...
It should be pretty easy in jQuery. if(n == 1){ $('your_image_element').css('background-image','url(your_first_img_path)') ; }else if(n ==2){ // second image... } ...
Use :first-child pseudoclass .outercontainer .modal-input-row { padding-bottom: 1rem; padding-top: 1rem; overflow: hidden; display: block; &:first-child { padding-top: 0; } ... } ...
The docs you linked actually mention it... You just need to check this.customStyle['--my-property-name'] and it will have the value of the property...
#twitterbootstrap { position:relative; z-index:1000000; } try this... it will work... you need to provide z-index so that overlap will not occure....
here is a fiddle you can start with http://jsfiddle.net/UUHyj/ all it uses is css but for ie6 down you will need javascript to do the rollovers etc
Use the text-align property: #nav li { list-style: none; float: left; text-align:center; } But note that you are using float:left, so unless you set a width, you won't actually see...
If you want to set the background-position on both #body and .flash-bg, this will work: $('#body, .flash-bg').css("background-position",current+"px 0"); Also, in your setInterval, you can pass a reference to the function...
After days trying to find the answer, I finally found display: table; There was surprisingly very little information available online about how to actually getting it to work, even here,...
Problem Remember that a radio input element gets "unchecked" only when one of its counterparts is clicked. Unlike a checkbox input element, clicking a second time on a radio input...
I was able to roll out a solution based on a few answers on this site and the hint provided by @WesleyMurch. Essentially, I had to calculate the height and...
Try <div class="container"> <div class="Xbutton"> </div> </div> /*THE CSS*/ .Xbutton { display:none; } .container:hover .Xbutton { display:inline-block; } This solution will not work in IE6, and might be buggy in...
Instead of using absolute positioning on the div, you can add a margin-left value of 10%, which will position the div in the same place and allow the other content...
If order doesn't matter, then put them in a ul of fixed width, and then create the unordered list with the list items at 1/3 of the ul's width and...
.button a is all you need I always set a default style on a, and target pseudo classes only when I need to have a different effect. Edit to include...