Function 画布动画。独唱乒乓球_Function_Animation_Canvas_Pong

Function 画布动画。独唱乒乓球

function animation canvas

Function 画布动画。独唱乒乓球,function,animation,canvas,pong,Function,Animation,Canvas,Pong,这是我的第一堂Web开发课，我在函数和调用方面遇到了麻烦。我的老师给了我们以下代码： <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <title>Canvas Animation</title>  <link rel="stylesheet

这是我的第一堂Web开发课，我在函数和调用方面遇到了麻烦。我的老师给了我们以下代码：

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Canvas Animation</title>
    <!-- include the jQuery UI stylesheet -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.19                                                                                /themes/base/jquery-ui.css">
<!-- include the jQuery and jQuery UI JavaScript files -->
<script src="jquery.min.js"></script>
<script src="jquery-ui.js"></script>

<style>
canvas {
    border: 1px solid black;
}
</style>


画布动画
帆布{
边框：1px纯黑；
}

独唱乒乓球通过以下方式完成此游戏：

当球击中球拍时，它应该反弹（反弹方向取决于它击中球拍的位置）
当球击中最左边的墙时，球员输了
防止挡板移出屏幕的顶部/底部
额外奖励（2个）：提供“更快”和“更慢”（画布外）按钮，可增加/降低球的速度

<canvas id="mycanvas" width="300" height="300"> d </canvas>

<script>
// global variables

var context;
// width/height of the canvas
var width;
var height;

// position and direction of the ball
var x = 100;
var y = 180;
var dx = 2;
var dy = 2;

// paddle
var paddley; // y location
var paddleh; // height
var paddlew; // width

// keyboard input
var upPressed = false; // is the user pressing up?
var downPressed = false; // is the user pressing down?

// setup canvas and animation timer 
function init() {
    context = $("#mycanvas")[0].getContext("2d");
    width = $("#mycanvas").width();
    height = $("#mycanvas").height();
    return setInterval(draw, 10); // every 10 milliseconds, draw will be called.
}

// called when a key is pressed
function onKeyDown(evt) {
    if (evt.keyCode == 38) upPressed = true; // 38 is code for up button
    else if (evt.keyCode == 40) downPressed = true; // 40 is code for down button
}

//called when a key is released
function onKeyUp(evt) {
if (evt.keyCode == 38) upPressed = false;
else if (evt.keyCode == 40) downPressed = false;
}

// attaches the key methods to the document.
$(document).keydown(onKeyDown);
$(document).keyup(onKeyUp);

// clear the screen to prepare for drawing a new frame
function clear() {
    context.clearRect(0, 0, width, height);
}

// draw a circle at x,y with radius r
function circle(x,y,r) {
  context.beginPath();
  context.arc(x, y, r, 0, Math.PI*2, true);
  context.closePath();
  context.fill();
}

// draw a filled rectangle at x,y with width,height
function rect(x,y,w,h) {
    context.beginPath();
    context.rect(x,y,w,h);
    context.closePath();
    context.fill();
}

// init location and size of paddle 
function init_paddles() {
    paddley = 100;
    paddleh = 75;
    paddlew = 10;
}

// draw a single frame of the game
function draw() {
    clear();
    // draw circle
    circle(x, y, 10);

    // update paddle location
    if (upPressed) paddley -= 5;
    else if (downPressed) paddley += 5;

    // draw paddle
    rect(10, paddley, paddlew, paddleh);

    // ball hit a wall!     
    if (x + dx > width || x + dx < 0)
        dx = -dx; // flip x direction
    if (y + dy > height || y + dy < 0)
        dy = -dy; // flip y direction


    // move ball        
    x += dx;
    y += dy;        
}

init();
init_paddles();
</script>

 </body>

d
//全局变量
var语境；
//画布的宽度/高度
var宽度；
变异高度；
//球的位置和方向
var x=100；
变量y=180；
var-dx=2；
var-dy=2；
//划桨
var-pailey；//y位置
var palleh；//高度
变量w；//宽度
//键盘输入
var upPressed=false；//用户是否正在向上按？
var downPressed=false；//用户按下按钮了吗？
//设置画布和动画计时器
函数init（）{
上下文=$（“#mycanvas”）[0].getContext（“2d”）；
宽度=$（“#我的画布”）.width（）；
高度=$（“#我的画布”）.height（）；
return setInterval（draw，10）；//每10毫秒调用一次draw。
}
//当按键时调用
函数onKeyDown（evt）{
如果（evt.keyCode==38）upPressed=true；//38是向上按钮的代码
如果（evt.keyCode==40）downPressed=true；//40是down按钮的代码
}
//释放密钥时调用
功能onKeyUp（evt）{
如果（evt.keyCode==38）upPressed=false；
如果（evt.keyCode==40）按下=false，则为else；
}
//将关键方法附加到文档。
$（文档）.keydown（onKeyDown）；
$（文件）.keyup（onKeyUp）；
//清除屏幕以准备绘制新框架
函数clear（）{
clearRect（0，0，宽度，高度）；
}
//在x，y处画一个半径为r的圆
函数圆（x，y，r）{
context.beginPath（）；
弧（x，y，r，0，Math.PI*2，true）；
closePath（）；
context.fill（）；
}
//在x，y处绘制一个填充矩形，宽度，高度
函数rect（x，y，w，h）{
context.beginPath（）；
rect（x，y，w，h）；
closePath（）；
context.fill（）；
}
//桨的初始位置和大小
函数init_pailes（）{
白板=100；
h=75；
w=10；
}
//画一个游戏的单帧
函数绘图（）{
清除（）；
//画圈
圆（x，y，10）；
//更新桨位置
如果（支撑）桨叶-=5；
否则，如果（按下）桨叶+=5；
//划桨
矩形（10，桨式，桨式W，桨式H）；
//球撞到墙上了！
如果（x+dx>宽度| | x+dx<0）
dx=-dx；//翻转x方向
如果（y+dy>高度| | y+dy<0）
dy=-dy；//反向y方向
//移动球
x+=dx；
y+=dy；
}
init（）；
初始桨（）；

我只是需要帮助，当球碰到球拍时，它会反方向反弹。那么会不会是这样：如果（x+dx>pailey | | x+dx>paileh）

dx=-dx

考虑到拨杆位于屏幕的右侧，且球的位置是其中心，拨杆的位置是左上角：

// Collision on the y and x axis
var onY = (y + dy < paddley + paddleh) && (y - dy > paddley);
var onX = (x + dx > width - paddlew);

if (onX && onY)
{
    // A factor that depends on the distance from the collision point to
    // the paddle's center.
    var delta = abs(y - (paddley + paddleh/2))/paddleh;

    // We change dx and dy such that the speed (dx² + dy²) stays the same
    dx = -dx*sqrt(1 - delta);
    dy = sqrt(pow(dy, 2) + pow(dx,2)*delta);
}

//y轴和x轴上的碰撞
变量onY=（y+dypalley）；
var onX=（x+dx>宽度-w）；
if（onX&&onY）
{
//取决于从碰撞点到碰撞点的距离的系数
//桨的中心。
var delta=abs（y-（桨式+桨式/2））/桨式；
//我们改变dx和dy，使速度（dx²+dy²）保持不变
dx=-dx*sqrt（1-δ）；
dy=sqrt（功率（dy，2）+功率（dx，2）*增量）；
}

你应该在delta中添加一个因子，然后改变它，直到球按你想要的方式反弹。

我不确定这是否真的很清楚：你希望得到什么样的答案？让球反弹的js代码？