function saveSettings(form){
document.cookie = "cWidth=" + form.cWidth.value + ";cHeight=" + form.cHeight.value + ";bSpeed=" + form.bSpeed.value + ";pSpeed=" + form.pSpeed.value + ";pHeight=" + form.pHeight.value + "playTo=" + form.playTo.value + ";" + "movePlayer1Up=" + form.movePlayer1Up.value + ";" + ";movePlayer1Down=" + form.movePlayer1Down.value +";movePlayer2Up=" + form.movePlayer2Up.value + ";movePlayer2Down=" + form.movePlayer2Down.value;
}
function loadSettings(form){
form.cWidth.value = getCookie('cWidth');
form.cHeight.value = getCookie('cHeight');
form.bSpeed.value = getCookie('bSpeed');
form.pSpeed.value = getCookie('pSpeed');
form.pHeight.value = getCookie('pHeight');
form.playTo.value = getCookie('playTo');
form.movePlayer1Up.value = getCookie('movePlayer1Up');
form.movePlayer1Down.value = getCookie('movePlayer1Down');
form.movePlayer2Up.value = getCookie('movePlayer2Up');
form.movePlayer2Down.value = getCookie('movePlayer2Down');
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i = 0; i <ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length,c.length);
}
}
return "";
}<input type = "button" name = "saveSettings1" value = "Save to #1" style = "font-size:20px;border:none;color:black;background-color:lightblue; border-radius: 3px; white-space: normal; width:40px; height: 25px; position: absolute; font-size: 9px;" onClick = "saveSettings(this.form);">
<input type = "button" name = "loadSettings1" value = "Load #1" style = "font-size:20px;border:none;color:black;background-color:lightblue; border-radius: 3px; white-space: normal; width:40px; height: 25px;position: absolute; font-size: 9px;margin-left: 44px;" onClick = "loadSettings(this.form)">I am in the process of making a pong game and after making a complicated settings menu, I have encountered a problem; whenever the page is reloaded, all information is lost and the data is reset to the default. I thought of using a submit or some sort of button in the form to save the data but have no experience with php and thus am stuck. This is my game for context. Currently, I am trying to get the bottom right four
function saveSettings(form){
document.cookie = "cWidth=form.cWidth.value;cHeight=form.cHeight.value;bSpeed=form.bSpeed.value;pSpeed=form.pSpeed.value;pHeight=form.pHeight.value;playTo=form.playTo.value;movePlayer1Up=form.movePlayer1Up.value;movePlayer1Down=form.movePlayer1Down.value;movePlayer2Up=form.movePlayer2Up.value;movePlayer2Down=form.movePlayer2Down.value;";
}
function loadSettings(form){
form.cWidth.value = getCookie('cWidth');
form.cHeight.value = getCookie('cHeight');
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i = 0; i <ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length,c.length);
}
}
return "";
}buttons on the settings screen to actually do something
Thanks
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Pong Game by ME</title>
<style>
canvas {
display: block;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
</head>
<body style = "text-align:center; font-size:25px;">
<script>
function playGame(form){
document.getElementById("Settings").style.display = 'none';
var canvas;
var ctx;
var keystate;
var canvasWidth = parseInt(form.cWidth.value);
var canvasHeight = parseInt(form.cHeight.value);
var ballSpeed = parseInt(form.bSpeed.value);
var playerSpeed = parseInt(form.pSpeed.value);
var playerHeight = parseInt(form.pHeight.value);
var playTo = parseInt(form.playTo.value);
var movePlayer1Up = form.movePlayer1Up.value.charCodeAt(0) - 32;
var movePlayer1Down = form.movePlayer1Down.value.charCodeAt(0) - 32;
if (form.movePlayer2Up.value == "UpArrow"){
var movePlayer2Up = 38;
}
else{
var movePlayer2Up = form.movePlayer2Up.value.charCodeAt(0) - 32;
}
if (form.movePlayer2Down.value == "DownArrow"){
var movePlayer2Down = 40;
}
else{
var movePlayer2Down = form.movePlayer2Down.value.charCodeAt(0) - 32;
}
var player1 = {
x: null,
y: null,
score: null,
width: 20,
height: playerHeight,
update: function() {
if (keystate[movePlayer1Up]) this.y -= playerSpeed;
if (keystate[movePlayer1Down]) this.y -= -playerSpeed;
this.y = Math.max(Math.min(this.y, canvasHeight - this.height), 0);
},
draw: function() {
ctx.fillRect(this.x, this.y, this.width, this.height);
}
};
var player2 = {
x: null,
y: null,
score: null,
width: 20,
height: playerHeight,
update: function() {
if (keystate[movePlayer2Up]) this.y -= playerSpeed;
if (keystate[movePlayer2Down]) this.y += playerSpeed;
this.y = Math.max(Math.min(this.y, canvasHeight - this.height), 0);
},
draw: function() {
ctx.fillRect(this.x, this.y, this.width, this.height);
}
};
var ball = {
x: null,
y: null,
vel: null,
side: 20,
serve: function(side) {
var r = Math.random();
this.x = canvasWidth/2;
this.y = (canvasHeight - this.side) * r ;
var phi = 0.1 * Math.PI * (1 - 2 * r);
this.vel = {
x: side * ballSpeed * Math.cos(phi),
y: ballSpeed * Math.sin(phi)
}
},
update: function() {
this.x += this.vel.x;
this.y += this.vel.y;
if (0 > this.y || this.y + this.side > canvasHeight) {
var offset = this.vel.y < 0 ? 0 - this.y : canvasHeight - (this.y + this.side);
this.y += 2 * offset;
this.vel.y *= -1;
}
var AABBIntersect = function(ax, ay, aw, ah, bx, by, bw, bh) {
return ax < bx + bw && ay < by + bh && bx < ax + aw && by < ay + ah;
};
var pdle = this.vel.x < 0 ? player1 : player2;
if (AABBIntersect(pdle.x, pdle.y, pdle.width, pdle.height,
this.x, this.y, this.side, this.side)
) {
this.x = pdle === player1 ? player1.x + player1.width : player2.x - this.side;
var n = (this.y + this.side - pdle.y)/(pdle.height + this.side);
var phi = 0.25 * Math.PI * (2 * n - 1);
var smash = Math.abs(phi) > 0.2 * Math.PI ? 1.5 : 1;
this.vel.x = smash * (pdle === player1 ? 1 : -1) * ballSpeed * Math.cos(phi);
this.vel.y = smash * ballSpeed * Math.sin(phi);
ballSpeed += 1;
}
if (0 > this.x + this.side || this.x > canvasWidth) {
ballSpeed = parseInt(form.bSpeed.value);
var isplayer1 = pdle === player1;
player1.score += isplayer1 ? 0 : 1;
player2.score += isplayer1 ? 1 : 0;
this.serve(pdle === player1 ? 1 : -1);
}
},
draw: function() {
ctx.fillRect(this.x, this.y, this.side, this.side);
}
};
function mplayer2n() {
canvas = document.createElement("canvas");
canvas.width = canvasWidth;
canvas.height = canvasHeight;
ctx = canvas.getContext("2d");
document.body.appendChild(canvas);
keystate = {};
document.addEventListener("keydown", function(evt) {
keystate[evt.keyCode] = true;
});
document.addEventListener("keyup", function(evt) {
delete keystate[evt.keyCode];
});
init();
var loop = function() {
update();
draw();
window.requestAnimationFrame(loop, canvas);
};
window.requestAnimationFrame(loop, canvas);
}
function init() {
player1.x = player1.width;
player1.y = (canvasHeight - player1.height)/2;
player2.x = canvasWidth - (player1.width + player2.width);
player2.y = (canvasHeight - player2.height)/2;
player1.score = 0;
player2.score = 0;
ball.serve(1);
}
function update() {
if (player1.score < 10 && player2.score < 10){
ball.update();
player1.update();
player2.update();
}
}
function draw() {
ctx.fillRect(0, 0, canvasWidth, canvasHeight);
ctx.save();
ctx.fillStyle = "red";
player1.draw();
ctx.fillStyle = "blue";
player2.draw();
ctx.fillStyle = "white";
ball.draw();
var w = 4;
var x = (canvasWidth - w) * 0.5;
var y = 0;
var step = canvasHeight/20;
while (y < canvasHeight) {
ctx.fillStyle = "white"
ctx.fillRect(x, y + step * 0.25, w, step * 0.5);
y += step;
}
ctx.font="150px Georgia"
var t = player1.score
var v = player2.score
ctx.fillText(t, canvas.width/2 - ctx.measureText(t).width - 20, 100);
ctx.fillText(v, canvas.width/2 + 20, 100)
if (player1.score > playTo - 1){
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
ctx.fillStyle = "Black"
ctx.font= "100px Georgia"
var u = t + " - " + v
var w = "Player 1 wins"
ctx.fillText(w, canvas.width/2 - ctx.measureText(w).width/2, 130);
ctx.font = "150px Georgia"
ctx.fillText(u, canvas.width/2 - ctx.measureText(u).width/2, 300);
}
else if (player2.score > playTo - 1){
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
ctx.fillStyle = "Black"
ctx.font= "100px Georgia"
var u = t + " - " + v
var w = "Player 2 wins"
ctx.fillText(w, canvas.width/2 - ctx.measureText(w).width/2, 130);
ctx.font = "150px Georgia"
ctx.fillText(u, canvas.width/2 - ctx.measureText(u).width/2, 300);
}
ctx.restore();
}
mplayer2n();
}
</script>
<!-- CANCEROUS CSSING BELOW: BE CAREFULL -->
<form action = "" id = "Settings">
<h1 style="text-decoration:underline;margin-top: 2px;margin-bottom: 20px">Settings:</h1>
Field Length:
<input oninput = "cWidthOut.value = cWidth.value" type = "range" name = "cWidth" min = "700" value = "1200" max = "1400" style = "font-size: 20px; margin-left:5px;background-color:lightgrey"><output style = "margin-left: 10px; font-size: 20px;"name = "cWidthOut"></output><p style = "font-size: 10px; margin-top: 5px;">Default: 1200</p>
Field Height:
<input oninput = "cHeightOut.value = cHeight.value" type = "range" name = "cHeight" min = "300" value = "600" max = "700" style = "font-size: 20px; margin-left:5px;background-color:lightgrey"><output style = "margin-left: 10px; font-size: 20px;"name = "cHeightOut"></output><p style = "font-size: 10px; margin-top: 5px;">Default: 600</p>
Ball Speed:
<input oninput = "bSpeedOut.value = bSpeed.value" type = "range" name = "bSpeed" min = "5" value = "10" max = "20" style = "font-size: 20px; margin-left:5px;background-color:lightgrey"><output style = "margin-left: 10px; font-size: 20px;"name = "bSpeedOut"></output><p style = "font-size: 10px; margin-top: 5px;">Default: 10</p>
Paddle Speed:
<input oninput = "pSpeedOut.value = pSpeed.value" type = "range" name = "pSpeed" min = "6" value = "12" max = "14" style = "font-size: 20px; margin-left:5px;background-color:lightgrey"><output style = "margin-left: 10px; font-size: 20px;"name = "pSpeedOut"></output><p style = "font-size: 10px; margin-top: 5px;">Default: 12</p>
Paddle Length:
<input oninput = "pHeightOut.value = pHeight.value" type = "range" name = "pHeight" min = "50" value = "100" max = "200" style = "font-size: 20px; margin-left:5px;background-color:lightgrey"><output style = "margin-left: 10px; font-size: 20px;"name = "pHeightOut"></output><p style = "font-size: 10px; margin-top: 5px;">Default: 100</p>
First to ___ Points:
<input oninput = "playToOut.value = playTo.value" type = "range" name = "playTo" min = "5" value = "10" max = "25" style = "font-size: 20px; margin-left:5px;background-color:lightgrey"><output style = "margin-left: 10px; font-size: 20px;"name = "playToOut"></output><p style = "font-size: 10px; margin-top: 5px;">Default: 10</p>
Left Side Up:
<input type = "text" name = "movePlayer1Up" value = "w" style = "font-size: 20px; margin-left:5px;background-color:lightgrey; width:110px"> <br>
<p style = "font-size:10px"> This must be a normal key or up/down arrow </p>
Left Side Down:
<input type = "text" name = "movePlayer1Down" value = "s" style = "font-size: 20px; margin-left:5px;background-color:lightgrey; width:110px""><br>
<p style = "font-size:10px"> This must be a normal key or up/down arrow </p>
Right Side Up:
<input type = "text" name = "movePlayer2Up" value = "UpArrow" style = "font-size: 20px; margin-left:5px;background-color:lightgrey; width:110px"><br>
<p style = "font-size:10px"> This must be a normal key or up/down arrow </p>
Right Side Down:
<input type = "text" name = "movePlayer2Down" value = "DownArrow" style = "font-size: 20px; margin-left:5px;background-color:lightgrey; width:110px"><br>
<p style = "font-size:10px"> This must be a normal key or up/down arrow </p>
<input type = "button" name = "Start" value = "Start" style = "font-size:40px;border:none;color:black;background-color:lightpink; border-radius: 10px; position: absolute; margin-left: -105px;" onClick = "playGame(this.form)">
<input type = "button" name = "saveSettings1" value = "Save to #1" style = "font-size:20px;border:none;color:black;background-color:lightblue; border-radius: 3px; white-space: normal; width:40px; height: 25px; position: absolute; font-size: 9px;">
<input type = "button" name = "saveSettings2" value = "Save to #2" style = "font-size:20px;border:none;color:black;background-color:lightblue; border-radius: 3px; white-space: normal; width:40px; height: 25px; position: absolute; font-size: 9px;;margin-top: 28px;">
<input type = "button" name = "loadSettings1" value = "Load #1" style = "font-size:20px;border:none;color:black;background-color:lightblue; border-radius: 3px; white-space: normal; width:40px; height: 25px;position: absolute; font-size: 9px;margin-left: 44px;">
<input type = "button" name = "loadSettings2" value = "Load #2" style = "font-size:20px;border:none;color:black;background-color:lightblue; border-radius: 3px; white-space: normal; width:40px; height: 25px; position: absolute; font-size: 9px;margin-left: 44px;margin-top: 28px;">
</form>
</body>
</html>Since there's no sensitive information here, you could store a cookie.
playerHeight = 30;
playerWidth = 10;
document.cookie = "pHeight=" + playerHeight;
document.cookie = "pWidth=" + playerWidth;
To read the cookie http://www.w3schools.com/js/js_cookies.asp:
The cname is for example pHeight or pWidth.
The function below can be used: getCookie("pHeight") = "30"
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i = 0; i <ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length,c.length);
}
}
return "";
}
To create a save button try:
document.getElementById("btnsave").addEventListener("click", saveSettings);