Date Counter Assistance - Game Development

This site is best viewed in a modern browser with JavaScript enabled.

Date Counter Assistance - Game Development

rbrown

Hi All,

Could anyone please assist me? I am developing a game and i've got a bit stuck.

On the link below, you'll hopefully see a date counter top right hand corner with a continue button just above it which when clicked skips the counter on a few days.

www.jadeboylan.com/game/overview

Thing is the counter skips/animates on a few days fine, but I have a problem that the counter defaults back to the current date when the page is refreshed.

And doesn't keep the current custom date, that you've skipped to. Additionally I am also trying to write/update the date to another PHP file called gamedate.php which I hope to use eventually as a save game feature.

So when you come back and load your game it will load the day you saved last from gamedate.php.

I have attached as to what I believe are probably the necessary files, hopefully one of you wonderful people will reply.

Should you require anything else please just ask. Thanks

[ATTACH]15309[/ATTACH]

The attachments of this post were removed during the platform migration in 2018

simplypixie

Sorry I don't want to download your files, but I would like to see the relevant code for what you are trying to do.

You will need to store the chosen date in a session to ensure it is retained both on page reload and when moving through the site.

As I say, I could be much more help if you could display the code in question on here.

rbrown

hi thanks for your reply, my code is here:

overview.php

<?php 

$newdate = date ("Y,n,j,0,0,0");

require('users/gamedate.php');

$gamedate = $newdate;

$filecontent = '<?php

$gamedate = "'.$newdate.'";

?>';



$my_file = 'users/gamedate.php';
$handle = fopen($my_file, 'w') or die('Cannot open file:  '.$my_file);
$data = $filecontent;
fwrite($handle, $data);
fclose($handle);

$gamedate = $newdate;

require('pageheader.php');

?>

<body>
    <div id="header"> <!-- header start -->
		<div class="continue"><h3><a href="#" onclick="futureDate();">Continue</a></h3></div>
	<div class="topstrip"></div>
	<div class="bottomstrip"></div>
	<div id="datecounter"> <!-- date start -->
		<div class="container">
			<div class="outside">
				<div class="inside">
					<div id="my_counter_1" style=" float: left; display: inline-block; background-color: white;"></div>
					<div id="my_counter_2" style=" float: left; display: inline-block; margin-right: 5px;"></div>
					<div id="my_counter_3" style=" float: left; display: inline-block; margin-right: 5px;"></div>
					<div id="my_counter_4" style=" float: left; display: inline-block;"></div>
				</div>
			</div>
		</div>
	</div> <!-- date end -->
	</div> <!-- header end -->

<div id="tabscontainer"> <!-- tabs start -->
    <ul class="tabs" persist="true">
        <li><a href="#" rel="view1">Overview</a></li>
        <li><a href="#" rel="view2">Profile</a></li>
        <li><a href="#" rel="view3">News</a></li>
        <li><a href="#" rel="view4">Notebook</a></li>
        <li><a href="#" rel="view5">History</a></li>
        <li><a href="#" rel="view6">Stats</a></li>
    </ul>
<div class="tabcontents"> <!-- tabs content start -->
        <div id="view1" class="tabcontent">
            <div id="hm-inbox">
            	<h2 id="dateH2"></h2>
	            <script src="assets/js/hm-inbox.js" type="text/javascript"></script>
            </div>
        </div>
        <div id="view2" class="tabcontent">
            <b>Multiple Tab Contents</b>
            <p>You can have multiple tab contents on the same page, with only one copy of the CSS and JavaScript files.</p>
        </div>
        <div id="view3" class="tabcontent">
            <b>Bookmark Support</b>
            <p>You can also open a tab or a bookmark from a link anywhere on the page.</p>
            <p id="mark4">This is a paragraph with id="mark4".</p>
            <p>By clicking the bookmark link at the bottom of this Tab Content, you will see me with this Tab Content panel being opened at the same time.</p>
        </div>
        <div id="view4" class="tabcontent">
            <b>Opened by a link from another page</b>
            <p>Link from another page can select a tab on the target page when loaded.</p>                
        </div>
    </div> <!-- tabs content end -->
    <br><br>
</div> <!-- tabs end -->


<!-- datecounter js start -->

<script type="text/javascript">

var futureDay = new Date(<?php echo $gamedate; ?>);
var myCounter = null;
var timerId = null;


function loadCounter(){
	myCounter = [
			new Counter("my_counter_1",
	{
				digitsNumber : 1,
				direction : Counter.ScrollDirection.Upwards,

			characterSet : "0123456",
			charsImageUrl : "assets/images/datecounter/weekdays_blackbg.png",
			markerImageUrl : "assets/images/datecounter/marker_small.png",
			extraClassName: {
				left: "my_counter_left",
				right: "my_counter_right",
				inner: "my_counter_inner"
			}
		}),
		new Counter("my_counter_2",
{
			digitsNumber : 2,
			direction : Counter.ScrollDirection.Upwards,

			characterSet : Counter.DefaultCharacterSets.numericUp,
			charsImageUrl : "assets/images/datecounter/numeric_up_blackbg.png",
			markerImageUrl : "assets/images/datecounter/marker_small.png",
			extraClassName: {
				left: "my_counter_left",
				right: "my_counter_right",
				inner: "my_counter_inner"
			}
		}),
		new Counter("my_counter_3",
{
			digitsNumber : 1,
			direction : Counter.ScrollDirection.Upwards,

			characterSet : "ABCDEFGHIJKL",
			charsImageUrl : "assets/images/datecounter/months_blackbg.png",
			markerImageUrl : "assets/images/datecounter/marker_small.png",
			extraClassName: {
				left: "my_counter_left",
				right: "my_counter_right",
				inner: "my_counter_inner"
			}
		}),
		new Counter("my_counter_4",
{
			digitsNumber : 4,
			direction : Counter.ScrollDirection.Upwards,

			characterSet : Counter.DefaultCharacterSets.numericUp,
			charsImageUrl : "assets/images/datecounter/numeric_up_blackbg.png",
			markerImageUrl : "assets/images/datecounter/marker_small.png",
			extraClassName: {
				left: "my_counter_left",
				right: "my_counter_right",
				inner: "my_counter_inner"
			}
		})
	];

myCounter.setDate = function(newDate){
	myCounter[0].setValue(newDate.getDay(),
800);
	myCounter[1].setValue(newDate.getDate(),
800);
	myCounter[2].setValue(String.fromCharCode(newDate.getMonth()+65),
800);
	myCounter[3].setValue(newDate.getFullYear(),
800);
}


myCounter.setDate(new Date());

}

function futureDate(){
	timerId = window.setInterval(function(){
		var destTime = futureDay;
		destTime.setDate(destTime.getDate() + 3);
		futureDay = destTime;
		newDay = myCounter.setDate(destTime);
		if (newDay == destTime){ location.reload(); }
	});
}


loadCounter();
</script>

<!-- datecounter js end -->



</body>
</html>

pageheader.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>My Movie Production Game | Overview</title>

<!-- main css/js -->

<link href="style.css" rel="stylesheet" type="text/css">

<!-- tabs css/js -->

<script src="assets/js/tabcontent.js" type="text/javascript"></script>
<link href="assets/css/tabcontent.css" rel="stylesheet" type="text/css">    

<!-- datecounter css/js -->

<script type="text/javascript" src="assets/js/counter.js"></script>
<link rel="stylesheet" type="text/css" href="assets/css/counterstyle.css">
<link rel="stylesheet" type="text/css" href="assets/css/counter.css">

<style type="text/css">
.my_counter_left {
	margin: 0px;
}
.my_counter_right {
	margin: 0px;
}
.my_counter_inner {
	margin: 0px;
}	
</style>

</head>

gamedate.php

<?php

$gamedate = "";

?>

simplypixie

I would use session, so in your code just put this

<?php  

session_start();
$newdate = date ("Y,n,j,0,0,0"); 

require('users/gamedate.php'); 

$_SESSION['gamedate'] = $newdate;

Then wherever you reference your $gamedate varaible in your current code, check if the session is set for gamedate and if so use the stored session data instead

if (isset($_SESSION['gamedate'])) {
// Do whatever here to use the session data
} else {
// Use original date (i.e. the date before it has been changed by the user)
}