Pong: score |
|
|---|---|
|
Als we de botsing met muren en bats, en de bats bewegend hebben gekregen dan is het spel in principe speelbaar. Wat er nu nog aan moet gebeuren is om het spel een doel te geven: de score! In het spel pong wordt er door een speler gescoord als de tegenstander de bal achter zijn bat laat komen (dus hij gaat rechts of links uit het scherm). Eigenlijk is dit stukje code hetzelfde als bij de botsingscode met het enige verschil dat je de richting niet veranderd en nergens tegen aan botst. Er wordt nu gekeken of de bal uit het scherm is, zo ja dan tel je bij de score een op. In code:
// De volgende code is nodig om in het htmldocument alleen het canvas op
// de toetsen "Space","ArrowUp","ArrowDown","ArrowLeft","ArrowRight" te laten
// reageren
window.addEventListener("keydown", function(e) {
if(["Space","ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].indexOf(e.code) > -1) {
e.preventDefault();
}
}, false);
//globale variabele
var ball_radius = 30; //radius of the ball
var ballX = 0; //x-coordinate of the ball
var ballY = 0; //y-coordinate of the ball
var ballSpeed = 10; //speed of the ball
var directionX = 0; //x direction of the ball
var directionY = 0; //y direction of the ball
var beta = 0; //the angle of the triangle made from the directionX and directionY variable
var deltaX = 0; //the amount of pixels in x direction moved per step
var deltaY = 0; //the amount of pixels in y direction moved per step
var bat1X = 20; //x-coordinate of left bat
var bat1Y = 280; //y-coordinate of left bat
var bat2X = 760; //x-coordinate of right bat
var bat2Y = 280; //y-coordinate of right bat
var bat_width = 20; //width of a bat
var bat_height = 40; //height of a bat
var bat1Speed = 10; //speed of the right bat
var keyW = false; //w key is not pressed
var points2 = 0; //the number of points for player 2
// setup() function, everything to setup the game
function setup() {
// maak een tekenblad (canvas)
var myCanvas = createCanvas(800, 600); // maak deze 800 (breedte) bij 600 (hoogte)
myCanvas.parent("pongcontainer"); // plaats deze in de div
ballX = 400; //set the x-coordinate for the start position of the ball
ballY = 300; //set the y-coordinate for the start position of the ball
//Math.random() gets number between 0 and 1,
//by multiplying with 2 and subtracting 1 it becomes a number between -1 and 1
directionX = Math.random()*2-1;
directionY = Math.random()*2-1;
}
// draw() function (repeatedly called), where to draw what
function draw() {
background(0, 0, 0); //make background black
fill(255,255,255); //from this line onward draw everything in white
rect(bat1X, bat1Y, bat_width, bat_height); //draw left bat
rect(bat2X, bat2Y, bat_width, bat_height); //draw right bat
ellipse(ballX, ballY, ball_radius, ball_radius); //draw ball
//move the bats
if(keyW && bat1Y > 0) //if key w is pressed and the bat is inside the screen move it up
{
bat1Y -= bat1Speed;
}
beta = Math.atan(directionY/directionX); //calculate direction
deltaY = ballSpeed*Math.sin(beta); //change in y-coordinate according to direction
deltaX = ballSpeed*Math.cos(beta); //change in x-coordinate according to direction
if(directionX < 0) //if direction is negative (ball moves down left)
{
ballX -= deltaX; //x-coordinate has to decrease
}
else //direction is positive (ball moves right)
{
ballX += deltaX; //x-coordinate has t increase
}
//increase the y-coordinate (deltaY can be negative so ball goes both up and down)
ballY += deltaY;
//collision detection
//ball collides with top and bottom of screen
if(ballY - (0.5 * ball_radius) < 0) //top: center of ball minus half radius < 0
directionY *= -1;
if(ballY + (0.5 * ball_radius) > 600) //bottom: center of ball plus half radius > 600
directionY *= -1;
//score
if(ballX < 0) //when ball is fully behind the bat
{
points2 += 1; //add point to opponent
ballX = 400; //reset ball at center of screen
ballY = 300;
directionX = Math.random()*2-1; //randomise direction of ball again
directionY = Math.random()*2-1;
}
textSize(30); //choose the size of the text
text("Points: 0", 100 ,30); //draw the score for the left player
//draw the score for the right player (600 = 800 – 200 not the 600 from the size of the window)
text("Points: " + points2, 600, 30);
}
//called when a key on the keyboard is pressed
function keyPressed()
{
if(key == 'w') //if w is pressed move left bat up
{
keyW = true;
}
}
//called when a key on the keyboard is released
function keyReleased()
{
if(key == 'w')
{
keyW = false;
}
}
De code waar het hier om gaat staat op regels 19, 67-79. Eerst wordt er op regel 19 een variabele gedeclareerd die de score voor de rechter speler gaat bijhouden. Op regel 64-72 wordt gekeken of de bal het ‘veld’ verlaat aan de linkerkant (x-coördinaat is kleiner dan 0). Als dat zo is moeten er een aantal dingen gebeuren: de score moet opgehoogd worden en de bal moet opnieuw in het midden geplaatst worden en in een richting bewogen laten worden! Vooral dat laatste is iets dat je in eerste instantie kan vergeten (maar na een keer getest te hebben zie je dat meteen). Opdrachten:
|