Здравейте!
Бихте ли могли да ми помогнете със следния код:
Имам Javascript pong игра, но в момента трябва да създам scoring system, което мисля, че успях да направя до някъде, понеже се логва в конзолата, но проблема е, че след като топката се удари в стената не се ресетва
някой може ли да помогне?
Код:
[js]
<!DOCTYPE html>
<html>
<head>
<title>Pong lab task</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<canvas id="sCanvas" width="600" height="400" style="border: solid;"></canvas>
<script type="text/javascript">
"use strict";
//******************
// Variables
//******************
var c = document.getElementById("sCanvas");
var ctx = sCanvas.getContext("2d");
var cHeight = sCanvas.height;
var cWidth = sCanvas.width;
// var img = new Image();
// img.src= 'your picture here';
// var beep = new Audio('your sound file here');
// var changedirection = false; //
var score1 = 0; // for score board
var score2 = 0; // for score board
//******************
//Objects
//******************
//create paddle object
class Paddle{
constructor(x,y){
this.colour = "blue";
this.xPos = x;
this.yPos = y;
this.width = 15;
this.height = 115;
this.speed = 4;
}
drawMe(){
ctx.fillStyle = this.colour;
ctx.fillRect(this.xPos,this.yPos,this.width,this.height);
}
}
// end paddle object
//create the sphere object
class Sphere {
constructor() {
this.radius = (10);
this.colour = "red";
this.xPos = Math.random() * cWidth;
this.yPos = Math.random() * cHeight;
this.speedY = 8 * Math.random();
this.speedX = 8 * Math.random();
}
drawMe() {
//method to draw itself
ctx.beginPath();
ctx.arc(this.xPos, this.yPos, this.radius, 0, Math.PI * 2, true);
ctx.fillStyle = this.colour;
ctx.fill();
}
//method to move itself
moveMe(){
this.yPos += this.speedY;
this.xPos += this.speedX;
//bounce off the bottom wall
if (this.yPos >cHeight-this.radius){
this.speedY = - this.speedY;
}
//bounce off the top wall
else if(this.yPos<0+this.radius){
this.speedY= -this.speedY;
}
//stop ball if hit right side
if (this.xPos >cWidth){
ballReset();
score1++;
console.log(score1);
}
//bounce off player 2 paddle
else if (this.xPos >player2.xPos && (this.yPos > player2.yPos && this.yPos< (player2.yPos+player2.height) ) ){
this.speedX = - this.speedX;
}
//stop ball if hit left side
if (this.xPos <0){
this.speedX =0;
this.speedY =0;
score2++;
}
else if (this.xPos < player1.xPos + (this.radius * 2) && (this.yPos > player1.yPos && this.yPos < (player1.yPos+player1.height))) {
this.speedX = -this.speedX;
}
} //end moveMe function
} // end Sphere object
}
//******************
// create game objects
//******************
var ball = new Sphere();
var player1 = new Paddle(10, 150);
var player2 = new Paddle(580, 150);
//*********************
// Deal with key presses
// **********************
var keysDown = []; //empty array to store which keys are being held down
window.addEventListener("keydown", function (event) {
keysDown[event.keyCode] = true; //store the code for the key being pressed
});
window.addEventListener("keyup", function (event) {
delete keysDown[event.keyCode] ;
});
function checkKeys() {
if (keysDown[90]) {
if(player1.yPos > 0){
player1.yPos -= player1.speed; //z
}
}
if (keysDown[88]) {
if(player1.yPos < (cHeight-player1.height)){
player1.yPos += player1.speed; //x
}
}
// your 2 new sets of code here for 2 more keys for player 2
if (keysDown[190]) {
if (player2.yPos > 0){
player2.yPos -= player2.speed;
}
} // .
if (keysDown[188]) {
if (player2.yPos < (cHeight-player2.height)){
player2.yPos += player2.speed; // ,
}
}
}
//*********************
// Make the score board
// **********************
//*********************
// launch the ball from the centre, left and right, on space bar
// **********************
function render() {
requestAnimationFrame(render);
ctx.clearRect(0, 0, cWidth, cHeight);
ball.drawMe();
ball.moveMe();
player1.drawMe();
player2.drawMe();
checkKeys();
// scoreBoard();
}
render(); //set the animation and drawing on canvas going
</script>
</body>
</html>[/js]
Бихте ли могли да ми помогнете със следния код:
Имам Javascript pong игра, но в момента трябва да създам scoring system, което мисля, че успях да направя до някъде, понеже се логва в конзолата, но проблема е, че след като топката се удари в стената не се ресетва
някой може ли да помогне?
Код:
[js]
<!DOCTYPE html>
<html>
<head>
<title>Pong lab task</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<canvas id="sCanvas" width="600" height="400" style="border: solid;"></canvas>
<script type="text/javascript">
"use strict";
//******************
// Variables
//******************
var c = document.getElementById("sCanvas");
var ctx = sCanvas.getContext("2d");
var cHeight = sCanvas.height;
var cWidth = sCanvas.width;
// var img = new Image();
// img.src= 'your picture here';
// var beep = new Audio('your sound file here');
// var changedirection = false; //
var score1 = 0; // for score board
var score2 = 0; // for score board
//******************
//Objects
//******************
//create paddle object
class Paddle{
constructor(x,y){
this.colour = "blue";
this.xPos = x;
this.yPos = y;
this.width = 15;
this.height = 115;
this.speed = 4;
}
drawMe(){
ctx.fillStyle = this.colour;
ctx.fillRect(this.xPos,this.yPos,this.width,this.height);
}
}
// end paddle object
//create the sphere object
class Sphere {
constructor() {
this.radius = (10);
this.colour = "red";
this.xPos = Math.random() * cWidth;
this.yPos = Math.random() * cHeight;
this.speedY = 8 * Math.random();
this.speedX = 8 * Math.random();
}
drawMe() {
//method to draw itself
ctx.beginPath();
ctx.arc(this.xPos, this.yPos, this.radius, 0, Math.PI * 2, true);
ctx.fillStyle = this.colour;
ctx.fill();
}
//method to move itself
moveMe(){
this.yPos += this.speedY;
this.xPos += this.speedX;
//bounce off the bottom wall
if (this.yPos >cHeight-this.radius){
this.speedY = - this.speedY;
}
//bounce off the top wall
else if(this.yPos<0+this.radius){
this.speedY= -this.speedY;
}
//stop ball if hit right side
if (this.xPos >cWidth){
ballReset();
score1++;
console.log(score1);
}
//bounce off player 2 paddle
else if (this.xPos >player2.xPos && (this.yPos > player2.yPos && this.yPos< (player2.yPos+player2.height) ) ){
this.speedX = - this.speedX;
}
//stop ball if hit left side
if (this.xPos <0){
this.speedX =0;
this.speedY =0;
score2++;
}
else if (this.xPos < player1.xPos + (this.radius * 2) && (this.yPos > player1.yPos && this.yPos < (player1.yPos+player1.height))) {
this.speedX = -this.speedX;
}
} //end moveMe function
} // end Sphere object
}
//******************
// create game objects
//******************
var ball = new Sphere();
var player1 = new Paddle(10, 150);
var player2 = new Paddle(580, 150);
//*********************
// Deal with key presses
// **********************
var keysDown = []; //empty array to store which keys are being held down
window.addEventListener("keydown", function (event) {
keysDown[event.keyCode] = true; //store the code for the key being pressed
});
window.addEventListener("keyup", function (event) {
delete keysDown[event.keyCode] ;
});
function checkKeys() {
if (keysDown[90]) {
if(player1.yPos > 0){
player1.yPos -= player1.speed; //z
}
}
if (keysDown[88]) {
if(player1.yPos < (cHeight-player1.height)){
player1.yPos += player1.speed; //x
}
}
// your 2 new sets of code here for 2 more keys for player 2
if (keysDown[190]) {
if (player2.yPos > 0){
player2.yPos -= player2.speed;
}
} // .
if (keysDown[188]) {
if (player2.yPos < (cHeight-player2.height)){
player2.yPos += player2.speed; // ,
}
}
}
//*********************
// Make the score board
// **********************
//*********************
// launch the ball from the centre, left and right, on space bar
// **********************
function render() {
requestAnimationFrame(render);
ctx.clearRect(0, 0, cWidth, cHeight);
ball.drawMe();
ball.moveMe();
player1.drawMe();
player2.drawMe();
checkKeys();
// scoreBoard();
}
render(); //set the animation and drawing on canvas going
</script>
</body>
</html>[/js]
