English 中文(简体)
玩弄ong的游戏,在受到一定程度的打击后 gl,我做些什么?
原标题：Im making a ping pong game and it s glitching out after a certain amount of hits, what do i do?

玩弄ong的游戏,在受到一定程度的打击后 gl,我做些什么? 因此,在整整整整25次足球赛中,球像正常一样横跨另一侧,但后一球横跨中间线,一帆风顺,我就这样说。 如何确定这一点?

我有一份html文档和一份javascript文档,这里有两种文字:

www.un.org/spanish/ecosoc Html file:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Pong Game JavaScript</title>

    <style>

        body{

            background-color: dimgray;

        }

        #pong{

            border: 2px solid #FFF;

            position: absolute;

            margin :auto;

            top:0;

            right:0;

            left:0;

            bottom:0;

        }

    </style>

</head>

<body>
        <audio id="background-music-for-video-short-blog-era-of-cyborgs-54-second-199951.mp3" loop>
 
  <source src="background-music-for-video-short-blog-era-of-cyborgs-54-second-199951.mp3" type="audio/mp3">
  Your browser does not support the audio element.
</audio>

<p>Click the buttons to play or pause the audio.</p>

<button onclick="playAudio()" type="button">Play Audio</button>
<button onclick="pauseAudio()" type="button">Pause Audio</button> 

<script>
var x = document.getElementById("background-music-for-video-short-blog-era-of-cyborgs-54-second-199951.mp3"); 

function playAudio() { 
  x.play(); 
} 

function pauseAudio() { 
  x.pause(); 
} 
</script>

   <canvas id="pong" width="600" height="400"></canvas>

   <script src="pong.js"></script>
        
</body>

</html>

<>strong>javascript file:

// select canvas element

const canvas = document.getElementById("pong");

// getContext of canvas = methods and properties to draw and do a lot of thing to the canvas

const ctx = canvas.getContext( 2d );

// load sounds

let hit = new Audio();

let wall = new Audio();

let userScore = new Audio();

let comScore = new Audio();

hit.src = "sounds/hit.mp3";

wall.src = "sounds/wall.mp3";

comScore.src = "sounds/comScore.mp3";

userScore.src = "sounds/userScore.mp3";

// Ball object

const ball = {

    x : canvas.width/2,

    y : canvas.height/2,

    radius : 10,

    velocityX : 5,

    velocityY : 5,

    speed : 7,

    color : "WHITE"

}

// User Paddle

const user = {

    x : 0, // left side of canvas

    y : (canvas.height - 100)/2, // -100 the height of paddle

    width : 10,

    height : 100,

    score : 0,

    color : "WHITE"

}

// COM Paddle

const com = {

    x : canvas.width - 10, // - width of paddle

    y : (canvas.height - 100)/2, // -100 the height of paddle

    width : 10,

    height : 100,

    score : 0,

    color : "WHITE"

}

// NET

const net = {

    x : (canvas.width - 2)/2,

    y : 0,

    height : 10,

    width : 2,

    color : "WHITE"

}

// draw a rectangle, will be used to draw paddles

function drawRect(x, y, w, h, color){

    ctx.fillStyle = color;

    ctx.fillRect(x, y, w, h);

}

// draw circle, will be used to draw the ball

function drawArc(x, y, r, color){

    ctx.fillStyle = color;

    ctx.beginPath();

    ctx.arc(x,y,r,0,Math.PI*2,true);

    ctx.closePath();

    ctx.fill();

}

// listening to the mouse

canvas.addEventListener("mousemove", getMousePos);

function getMousePos(evt){

    let rect = canvas.getBoundingClientRect();

  

    user.y = evt.clientY - rect.top - user.height/2;

}

// when COM or USER scores, we reset the ball

function resetBall(){

    ball.x = canvas.width/2;

    ball.y = canvas.height/2;

    ball.velocityX = -ball.velocityX;

    ball.speed = 7;

}

// draw the net

function drawNet(){

    for(let i = 0; i <= canvas.height; i+=15){

        drawRect(net.x, net.y + i, net.width, net.height, net.color);

    }

}

// draw text

function drawText(text,x,y){

    ctx.fillStyle = "#FFF";

    ctx.font = "75px fantasy";

    ctx.fillText(text, x, y);

}

// collision detection

function collision(b,p){

    p.top = p.y;

    p.bottom = p.y + p.height;

    p.left = p.x;

    p.right = p.x + p.width;

  

    b.top = b.y - b.radius;

    b.bottom = b.y + b.radius;

    b.left = b.x - b.radius;

    b.right = b.x + b.radius;

  

    return p.left < b.right && p.top < b.bottom && p.right > b.left && p.bottom > b.top;

}

// update function, the function that does all calculations

function update(){

  

    // change the score of players, if the ball goes to the left "ball.x<0" computer win, else if "ball.x > canvas.width" the user win

    if( ball.x - ball.radius < 0 ){

        com.score++;

        comScore.play();

        resetBall();

    }else if( ball.x + ball.radius > canvas.width){

        user.score++;

        userScore.play();

        resetBall();

    }

  

    // the ball has a velocity

    ball.x += ball.velocityX;

    ball.y += ball.velocityY;

  

    // computer plays for itself, and we must be able to beat it

    // simple AI
    let computerLevel = 1;
    com.y += (ball.y - (com.y + com.height/2)) * computerLevel;

  

    // when the ball collides with bottom and top walls we inverse the y velocity.

    if(ball.y - ball.radius < 0 || ball.y + ball.radius > canvas.height){

        ball.velocityY = -ball.velocityY;

        wall.play();

    }

  

    // we check if the paddle hit the user or the com paddle

    let player = (ball.x + ball.radius < canvas.width/2) ? user : com;

  

    // if the ball hits a paddle

    if(collision(ball,player)){

        // play sound

        hit.play();

        // we check where the ball hits the paddle

        let collidePoint = (ball.y - (player.y + player.height/2));

        // normalize the value of collidePoint, we need to get numbers between -1 and 1.

        // -player.height/2 < collide Point < player.height/2

        collidePoint = collidePoint / (player.height/2);

      

        // when the ball hits the top of a paddle we want the ball, to take a -45degees angle

        // when the ball hits the center of the paddle we want the ball to take a 0degrees angle

        // when the ball hits the bottom of the paddle we want the ball to take a 45degrees

        // Math.PI/4 = 45degrees

        let angleRad = (Math.PI/4) * collidePoint;

      

        // change the X and Y velocity direction

        let direction = (ball.x + ball.radius < canvas.width/2) ? 1 : -1;

        ball.velocityX = direction * ball.speed * Math.cos(angleRad);

        ball.velocityY = ball.speed * Math.sin(angleRad);

      

        // speed up the ball everytime a paddle hits it.

        ball.speed += 0.1;

    }

}

// render function, the function that does al the drawing

function render(){

  

    // clear the canvas

    drawRect(0, 0, canvas.width, canvas.height, "#000");

  

    // draw the user score to the left

    drawText(user.score,canvas.width/4,canvas.height/5);

  

    // draw the COM score to the right

    drawText(com.score,3*canvas.width/4,canvas.height/5);

  

    // draw the net

    drawNet();

  

    // draw the user s paddle

    drawRect(user.x, user.y, user.width, user.height, user.color);

  

    // draw the COM s paddle

    drawRect(com.x, com.y, com.width, com.height, com.color);

  

    // draw the ball

    drawArc(ball.x, ball.y, ball.radius, ball.color);

}

function game(){

    update();

    render();

}

// number of frames per second

let framePerSecond = 50;

//call the game function 50 times every 1 Sec

let loop = setInterval(game,1000/framePerSecond);
问题回答

您应限制球速,具体做法是:ball.speed +=0.1; to ball.speed = Math.min(ball.speed +0.1, 10);,然后在撞击后调整气球位置,因为每次撞击之后,气球会增加太多,使其跨越网,消失:

if(ball.velocityX > 0) {
  ball.x = player.x + player.width + ball.radius; // Adjust for right paddle
} else {
  ball.x = player.x - ball.radius; // Adjust for left paddle
}


var x = document.getElementById("background-music-for-video-short-blog-era-of-cyborgs-54-second-199951.mp3"); 

function playAudio() { 
x.play(); 
} 

function pauseAudio() { 
x.pause(); 
} 

// select canvas element
const canvas = document.getElementById("pong");

// getContext of canvas = methods and properties to draw and do a lot of thing to the canvas
const ctx = canvas.getContext( 2d );

// load sounds
let hit = new Audio();
let wall = new Audio();
let userScore = new Audio();
let comScore = new Audio();

hit.src = "sounds/hit.mp3";
wall.src = "sounds/wall.mp3";
comScore.src = "sounds/comScore.mp3";
userScore.src = "sounds/userScore.mp3";

// Ball object
const ball = {
    x : canvas.width/2,
    y : canvas.height/2,
    radius : 10,
    velocityX : 5,
    velocityY : 5,
    speed : 7,
    color : "WHITE"
}

// User Paddle
const user = {

    x : 0, // left side of canvas
    y : (canvas.height - 100)/2, // -100 the height of paddle
    width : 10,
    height : 100,
    score : 0,
    color : "WHITE"
}

// COM Paddle
const com = {
    x : canvas.width - 10, // - width of paddle
    y : (canvas.height - 100)/2, // -100 the height of paddle
    width : 10,
    height : 100,
    score : 0,
    color : "WHITE"
}

// NET
const net = {
    x : (canvas.width - 2)/2,
    y : 0,
    height : 10,
    width : 2,
    color : "WHITE"
}

// draw a rectangle, will be used to draw paddles
function drawRect(x, y, w, h, color){
    ctx.fillStyle = color;
    ctx.fillRect(x, y, w, h);
}

// draw circle, will be used to draw the ball
function drawArc(x, y, r, color){
    ctx.fillStyle = color;
    ctx.beginPath();
    ctx.arc(x,y,r,0,Math.PI*2,true);
    ctx.closePath();
    ctx.fill();
}

// listening to the mouse
canvas.addEventListener("mousemove", getMousePos);
function getMousePos(evt){
    let rect = canvas.getBoundingClientRect();
    user.y = evt.clientY - rect.top - user.height/2;
}

// when COM or USER scores, we reset the ball
function resetBall(){
    ball.x = canvas.width/2;
    ball.y = canvas.height/2;
    ball.velocityX = -ball.velocityX;
    ball.speed = 7;
}

// draw the net
function drawNet(){
    for(let i = 0; i <= canvas.height; i+=15){
        drawRect(net.x, net.y + i, net.width, net.height, net.color);
    }
}

// draw text
function drawText(text,x,y){
    ctx.fillStyle = "#FFF";
    ctx.font = "75px fantasy";
    ctx.fillText(text, x, y);
}

// collision detection
function collision(b,p){
    p.top = p.y;
    p.bottom = p.y + p.height;
    p.left = p.x;
    p.right = p.x + p.width;
    b.top = b.y - b.radius;
    b.bottom = b.y + b.radius;
    b.left = b.x - b.radius;
    b.right = b.x + b.radius;
    return p.left < b.right && p.top < b.bottom && p.right > b.left && p.bottom > b.top;
}

// update function, the function that does all calculations
function update(){
    // change the score of players, if the ball goes to the left "ball.x<0" computer win, else if "ball.x > canvas.width" the user win
    if( ball.x - ball.radius < 0 ){
        com.score++;
        comScore.play();
        resetBall();
    }else if( ball.x + ball.radius > canvas.width){
        user.score++;
        userScore.play();
        resetBall();
    }

    // the ball has a velocity
    ball.x += ball.velocityX;
    ball.y += ball.velocityY;

    // computer plays for itself, and we must be able to beat it
    // simple AI
    let computerLevel = 1;
    com.y += (ball.y - (com.y + com.height/2)) * computerLevel;

    // when the ball collides with bottom and top walls we inverse the y velocity.
    if(ball.y - ball.radius < 0 || ball.y + ball.radius > canvas.height){
        ball.velocityY = -ball.velocityY;
        wall.play();
    }

    // we check if the paddle hit the user or the com paddle
    let player = (ball.x + ball.radius < canvas.width/2) ? user : com;

    // if the ball hits a paddle

    if(collision(ball,player)){

        // play sound
        hit.play();

        // we check where the ball hits the paddle
        let collidePoint = (ball.y - (player.y + player.height/2));

        // normalize the value of collidePoint, we need to get numbers between -1 and 1.
        // -player.height/2 < collide Point < player.height/2
        collidePoint = collidePoint / (player.height/2);

        // when the ball hits the top of a paddle we want the ball, to take a -45degees angle
        // when the ball hits the center of the paddle we want the ball to take a 0degrees angle
        // when the ball hits the bottom of the paddle we want the ball to take a 45degrees
        // Math.PI/4 = 45degrees
        let angleRad = (Math.PI/4) * collidePoint;

        // change the X and Y velocity direction
        let direction = (ball.x + ball.radius < canvas.width/2) ? 1 : -1;
        ball.velocityX = direction * ball.speed * Math.cos(angleRad);
        ball.velocityY = ball.speed * Math.sin(angleRad);

        if(ball.velocityX > 0) {
            ball.x = player.x + player.width + ball.radius; // Adjust for right paddle
        } else {
            ball.x = player.x - ball.radius; // Adjust for left paddle
        }
        
        // speed up the ball everytime a paddle hits it.
        // ball.speed += 0.1;
        ball.speed = Math.min(ball.speed + 0.1, 10);
    }

}

// render function, the function that does al the drawing
function render(){
    // clear the canvas
    drawRect(0, 0, canvas.width, canvas.height, "#000");

    // draw the user score to the left
    drawText(user.score,canvas.width/4,canvas.height/5);

    // draw the COM score to the right
    drawText(com.score,3*canvas.width/4,canvas.height/5);

    // draw the net
    drawNet();

    // draw the user s paddle
    drawRect(user.x, user.y, user.width, user.height, user.color);

    // draw the COM s paddle
    drawRect(com.x, com.y, com.width, com.height, com.color);

    // draw the ball
    drawArc(ball.x, ball.y, ball.radius, ball.color);
}

function game(){
    update();
    render();
}

// number of frames per second
let framePerSecond = 50;

//call the game function 50 times every 1 Sec
let loop = setInterval(game,1000/framePerSecond); 
body{
    background-color: dimgray;
}
#pong{
    border: 2px solid #FFF;
    position: absolute;
    margin :auto;
    top:0;
    right:0;
    left:0;
    bottom:0;
}
<audio id="background-music-for-video-short-blog-era-of-cyborgs-54-second-199951.mp3" loop>
    <source src="background-music-for-video-short-blog-era-of-cyborgs-54-second-199951.mp3" type="audio/mp3">
    Your browser does not support the audio element.
</audio>
<p>Click the buttons to play or pause the audio.</p>
<button onclick="playAudio()" type="button">Play Audio</button>
<button onclick="pauseAudio()" type="button">Pause Audio</button> 
<canvas id="pong" width="600" height="400"></canvas>
时间：2024-04-06 02:45:31


上一篇：
下一篇：


相关问题
CSS working only in Firefox

I am trying to create a search text-field like on the Apple website. The HTML looks like this: <div class="frm-search"> <div> <input class="btn" type="image" src="http://www....

时间：2009-11-13 05:37:01 回答：1 展示：1
image changed but appears the same in browser

I m writing a php script to crop an image. The script overwrites the old image with the new one, but when I reload the page (which is supposed to pickup the new image) I still see the old one. ...

时间：2009-11-09 15:38:06 回答：5 展示：1
Firefox background image horizontal centering oddity

I am building some basic HTML code for a CMS. One of the page-related options in the CMS is "background image" and "stretch page width / height to background image width / height." so that with large ...

时间：2009-11-09 14:33:21 回答：3 展示：1
Separator line in ASP.NET

I d like to add a simple separator line in an aspx web form. Does anyone know how? It sounds easy enough, but still I can t manage to find how to do it.. 10x!

时间：2009-11-05 09:27:29 回答：3 展示：1
热门标签

友情链接

Allggapp Alljchome-教程家园 mvfinale.com-影视剧情大结局大全