tag:blogger.com,1999:blog-33665418728795969012024-03-28T13:53:26.952-07:00FTMOMFMike Fykehttp://www.blogger.com/profile/10679018080620038963noreply@blogger.comBlogger1125tag:blogger.com,1999:blog-3366541872879596901.post-34898658255417940682024-03-27T10:15:00.000-07:002024-03-27T15:04:51.445-07:00Pong post<p> </p>
<!DOCTYPE html>
<html>
<body>
<div id="pongContainer">
<canvas id="pongCanvas" width="800" height="500"></canvas>
</div>
</body>
<script>
var canvas;
var canvasContext;
var ballX = 50; // X Coordinate
var ballY = 50; // Y Coordinate
var ballSpeedX = 10; // X speed
var ballSpeedY = 4; // Y speed positive numbers go down, negative go up
var player1Score = 0;
var player2Score = 0;
const WINNING_SCORE = 3;
var showStartScreen = true;
var showingWinScreen = false;
var paddle1Y = 250; // variable value can change
var paddle2Y = 250;
const PADDLE_HEIGHT = 100; // constant values never change
const PADDLE_THICKNESS = 10;
function calculateMousePos(evt){ // an event fires when mouse moves
var rect = canvas.getBoundingClientRect();
var root = document.documentElement;
var mouseX = evt.clientX - rect.left - root.scrollLeft;
var mouseY = evt.clientY - rect.top;
return {
x:mouseX, // Object Literal
y:mouseY // Object Literal
};
}
function handleMouseClick(evt){
if (showingWinScreen) {
player1Score = 0;
player2Score = 0;
showingWinScreen = false;
} else if (showStartScreen) {
player1Score = 0;
player2Score = 0;
showStartScreen = false;
}
}
window.onload = function() {
canvas = document.getElementById('pongCanvas');
canvasContext = canvas.getContext('2d');
var framesPerSecond = 30;
setInterval(function() {
moveEverything ();
drawEverything();
},1000/framesPerSecond); // Hundredth of seconds, ballX movement
canvas.addEventListener ('mousedown', handleMouseClick);
canvas.addEventListener ('mousemove', // keypress, mouseclick, mousemove
function(evt) {
var mousePos = calculateMousePos(evt);
paddle1Y = mousePos.y-(PADDLE_HEIGHT/2); // paddle aligns in centre with mouse
});
}
function ballReset () { // Ball reset is missed
if(player1Score >= WINNING_SCORE || // || = or else, && Both
player2Score >= WINNING_SCORE) {
showingWinScreen = true;
}
ballSpeedX = - ballSpeedX;
ballX = canvas.width/2;
ballY = canvas.height/2;
}
function computerMovement() {
var paddle2YCentre = paddle2Y + (PADDLE_HEIGHT/2);
if (paddle2YCentre < ballY - 35) {
paddle2Y += 6; // Same as ... paddle2Y - paddle2Y + 6
} else if (paddle2YCentre > ballY +35) {
paddle2Y -= 6; // Same as ... paddle2Y = paddle2Y - 6
}
}
function moveEverything() {
if (showingWinScreen || showStartScreen) {
return;
}
computerMovement();
ballX += ballSpeedX; // Same as ... ballX = ballX + ballSpeedX
ballY += ballSpeedY; // Same as ... ballY = ballY + ballSpeedY
if(ballX < 0) { // Left Side Bounce
if(ballY > paddle1Y && // If Below Top Of Paddle - Bounce
ballY < paddle1Y+PADDLE_HEIGHT) { // If Above Bottom Of Paddle - Bounce
ballSpeedX = -ballSpeedX;
var deltaY = ballY
-(paddle1Y+PADDLE_HEIGHT/2);
ballSpeedY = deltaY * 0.35;
} else { // If Not ...
player2Score ++; // Same as +1, Must Before Ballreset
ballReset (); // Resets Ball If Missed
}
}
if(ballX > canvas.width) { // Right Side Bounce
if(ballY > paddle2Y && // If Below Top Of Paddle - Bounce
ballY < paddle2Y+PADDLE_HEIGHT) { // If Above Bottom Of Paddle - Bounce
ballSpeedX = -ballSpeedX;
var deltaY = ballY
-(paddle2Y+PADDLE_HEIGHT/2);
ballSpeedY = deltaY * 0.35
} else { // If Not ...
player1Score ++; // Same as +1,Must Before Ballreset
ballReset (); // Resets Ball If Missed
}
}
if(ballY < 0) { // Up Side Bounce
ballSpeedY = - ballSpeedY;
}
if(ballY > canvas.height) { // Down Side Bounce
ballSpeedY = - ballSpeedY;
}
}
function drawNet() {
for (var i=0; i<canvas.height; i+=40){
colorRect (canvas.width/2-1,i,2,20,'white');
}
}
function drawEverything() {
colorRect(0,0,canvas.width,canvas.height, '#80ced6'); // blanks screen black
if (showingWinScreen) {
canvasContext.fillStyle = 'white';
if(player1Score >= WINNING_SCORE) {
canvasContext.fillText("Player One Won",350,200);
} else if(player2Score >= WINNING_SCORE) {
canvasContext.fillText("Jarvis Won",360,200);
}
canvasContext.fillText("Click To Continue",350,300); // text,x,y
return;
} else if (showStartScreen){
canvasContext.fillStyle = 'white';
canvasContext.fillText("Click To Continue",350,300); // text,x,y
return;
}
drawNet(); // draw net
colorRect(0,paddle1Y,PADDLE_THICKNESS,PADDLE_HEIGHT,"white"); // Paddle - Left
colorRect(canvas.width - PADDLE_THICKNESS,paddle2Y,PADDLE_THICKNESS,PADDLE_HEIGHT,"white"); // Paddle - Right
colorCircle (ballX,ballY,10, 'white'); // Ball
canvasContext.fillText("Player One Score",100,90);
canvasContext.fillText(player1Score,140,100); // text,x,y
canvasContext.fillText("Jarvis' Score",canvas.width-120,90);
canvasContext.fillText(player2Score,canvas.width-90,100);
}
function colorCircle (centreX, centreY,radius, drawColor) {
canvasContext.fillStyle = drawColor;
canvasContext.beginPath();
canvasContext.arc(centreX,centreY,radius,0,Math.PI*2,true);
canvasContext.fill();
}
function colorRect(leftX,topY, width,height,drawColor) {
canvasContext.fillStyle = drawColor;
canvasContext.fillRect(leftX,topY,width,height);
}
</script>
<style>
#pongContainer{
text-align:center;
margin: 0px;
background-color: transparent;
width:800px;
height:500px;
}
#pongCanvas{
display:inline-block;
cursor: pointer;
}
</style>
</html>Mike Fykehttp://www.blogger.com/profile/10679018080620038963noreply@blogger.com0