<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Pong Game by Zach</title>
<style>
canvas {
display: block;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
</head>
<body>
<script>
function playGame(form) {
var canvas;
var ctx;
var keystate;
var canvasWidth = form.cWidth.value;
var canvasHeight = form.cHeight.value;
var ballSpeed = form.bSpeed.value;
var playerSpeed = form.pSpeed.value;
var playerWidth = form.pWidth.value;
var playerHeight = form.pHeight.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: playerWidth,
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: playerWidth,
height: playerHeight,
update: function() {
if (keystate[movePlayer2Up]) this.y -= 7;
if (keystate[movePlayer2Down]) this.y += 7;
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);
}
if (0 > this.x + this.side || this.x > canvasWidth) {
ballSpeed = 12;
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 > 9) {
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 > 9) {
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>
<form action="">
Settings:
<br>Canvas Width:
<br>
<input type="text" name="cWidth" value="1200">
<br>Canvas Height:
<br>
<input type="text" name="cHeight" value="600">
<br>Ball Speed:
<br>
<input type="text" name="bSpeed" value="12">
<br>Player Speed:
<br>
<input type="text" name="pSpeed" value="8">
<br>Player Width:
<br>
<input type="text" name="pWidth" value="20">
<br>Player Height:
<br>
<input type="text" name="pHeight" value="100">
<br>Move Player 1 Up:
<br>
<input type="text" name="movePlayer1Up" value="w">
<br>Move Player 1 Down:
<br>
<input type="text" name="movePlayer1Down" value="s">
<br>Move Player 2 Up:
<br>
<input type="text" name="movePlayer2Up" value="UpArrow">
<br>Move Player 2 Down:
<br>
<input type="text" name="movePlayer2Down" value="DownArrow">
<br>Save Settings and start game:
<br>
<input type="button" name="Start" value="Start" onClick="playGame(this.form)">
<br>
</form>
</body>
</html>Above is the code that I have so far.
The part in question is the bottom part with the form and the part near the top where I am defining the variables for the settings.
I was making a pong game and it was working as expected until I tried to add a <form> so the player could customise the settings and controls.
I then set the variables I had used before to the values from this form. The problem was that when I when I added in the "player width" and "player height" variables. The game glitched out. Eg. The ball would bounce early, a paddle was missing etc.
Any ideas why this would occur when the data entered into the form was the same as the constants I had had before which worked perfectly fine.
You are reading the player width and player height in as text. You need to convert to integers. Do the same for player2.
var player1 = {
x: null,
y: null,
score: null,
width: parseInt(playerWidth),
height: parseInt(playerHeight),