-1

这是我的第一个 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>

单人乒乓

通过以下方式完成此游戏：
  • 当球击中桨时，它应该弹回（方向取决于它击中的桨上的位置）。
  • 当球击中最左边的墙壁时，球员输了。
  • 防止桨移出屏幕的顶部/底部。
  • 奖励（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>

当球击中桨时，我只需要帮助，它会向相反的方向反弹。那么它会不会是这样的： if(x + dx > paddley || x + dx >paddleh) dx = -dx;

4

1 回答 1

1

考虑到球拍在屏幕的右边，球的位置是它的中心，球拍的位置是左上角：

// 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);
}

您应该添加一个因素delta并对其进行更改，直到球按照您的意愿反弹。

于 2013-04-11T22:09:51.120 回答