我是一名大学生，必须在html中制作一种突破性克隆。我必须让球从我绘制的矩形和桨上反弹。问题是我仍然是新的HTML，似乎无法找到一个解决方案，与我必须解决的代码一起工作。 感谢您花时间阅读。
var canvas = document.getElementById("pong");
var ctx = canvas.getContext("2d");
var ball = {
x: canvas.width / 2, //pixels
y: canvas.height / 2, //pixels
xSpeed: 50, //pixels per second (you can cahnge this)
ySpeed: 40, //pixels per second (you can change this)
radius: 10 //pixels
}
var paddle = {
x: 100, //pixels
y: canvas.height / 2, //pixels
xSpeed: 10, //pixels per second (you can increase this)
ySpeed: 10, //pixels per second (you can increase this)
halfWidth: 10, //pixels
halfHeight: 40 //pixels
}
// TODO: Add data for top, bottom, left and right rectangles
var topWall = {
x:0,
y:0,
width:800,
height:10,
area:8000
}
var bottomWall = {
x:0,
y:400,
width:800,
height:10,
area:8000
}
var rightWall = {
x:800,
y:0,
width:10,
height:400,
area:4000
}
var leftWall = {
x:0,
y:0,
width:10,
height:400,
area:4000
}
// Function which draw everything
function render() {
//clear the canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// draw the ball
ctx.fillStyle = "white";
ctx.beginPath();
ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
ctx.fill();
// draw the paddle
ctx.beginPath();
ctx.moveTo(paddle.x - paddle.halfWidth, paddle.y - paddle.halfHeight);
ctx.lineTo(paddle.x - paddle.halfWidth, paddle.y + paddle.halfHeight);
ctx.lineTo(paddle.x + paddle.halfWidth, paddle.y + paddle.halfHeight);
ctx.lineTo(paddle.x + paddle.halfWidth, paddle.y - paddle.halfHeight);
ctx.fill();
// TODO: Draw top, bottom, left and right rectangles
// drawing for right wall
ctx.strokeStyle = "white";
ctx.fillStyle = "white";
ctx.beginPath();
ctx.moveTo(rightWall.x, rightWall.y);
ctx.lineTo(rightWall.x - rightWall.width, rightWall.y);
ctx.lineTo(rightWall.x - rightWall.width, rightWall.y + rightWall.height);
ctx.lineTo(rightWall.x, rightWall.y + rightWall.height);
ctx.closePath();
ctx.stroke();
ctx.fill();
//top wall
ctx.strokeStyle = "white";
ctx.fillStyle = "white";
ctx.beginPath();
ctx.moveTo(topWall.x, topWall.y);
ctx.lineTo(topWall.x + topWall.width, topWall.y);
ctx.lineTo(topWall.x + topWall.width, topWall.y + topWall.height);
ctx.lineTo(topWall.x, topWall.y + topWall.height);
ctx.closePath();
ctx.stroke();
ctx.fill();
//bottom wall
ctx.strokeStyle = "white";
ctx.fillStyle = "white";
ctx.beginPath();
ctx.moveTo(bottomWall.x, bottomWall.y);
ctx.lineTo(bottomWall.x + bottomWall.width, bottomWall.y);
ctx.lineTo(bottomWall.x + bottomWall.width, bottomWall.y - bottomWall.height);
ctx.lineTo(bottomWall.x, bottomWall.y - bottomWall.height);
ctx.closePath();
ctx.stroke();
ctx.fill();
//left wall
ctx.strokeStyle = "white";
ctx.fillStyle = "white";
ctx.beginPath();
ctx.moveTo(leftWall.x, leftWall.y);
ctx.lineTo(leftWall.x + leftWall.width, leftWall.y);
ctx.lineTo(leftWall.x + leftWall.width, leftWall.y + leftWall.height);
ctx.lineTo(leftWall.x, leftWall.y + leftWall.height);
ctx.closePath();
ctx.stroke();
ctx.fill();
}
// Function which updates the game physics
function update(elapsed) {
//update the ball position according to the elapsed time
ball.y += ball.ySpeed * elapsed;
ball.x += ball.xSpeed * elapsed;
// TODO: Bounce the ball of top, bottom and right rectangles
// TODO: End game (stop the ball moving) if ball hits left rectangle
// TODO: Bounce the ball off the paddle
}
// Handle keyboard input
function keydown_handler(e) {
// TODO: Modify code so the paddle goes up and down but not outside the area of play.
switch (event.keyCode){
case 38: //up key (move paddle up)
if (paddle.y - 30 > 49) {
paddle.y -= 30;
}
break;
case 40: // down key (move paddle down)
if (paddle.y + 30 < 360) {
paddle.y += 30;
}
break;
}
}
window.addEventListener("keydown", keydown_handler);
var previous;
function run(timestamp) {
if (!previous) previous = timestamp; //start with no elapsed time
var elapsed = (timestamp - previous) / 1000; //work out the elapsed time
update(elapsed); //update the game with the elapsed time
render(); //render the scene
previous = timestamp; //set the (globally defined) previous timestamp ready for next time
window.requestAnimationFrame(run); //ask browser to call this function again, when it's ready
}
//trigger the game loop
window.requestAnimationFrame(run);body {
font-family: "Century Gothic";
}
main, header {
max-width: 60%;
margin: 0 auto;
}
header h1 {
font-size: 6em;
margin: 0;
}
canvas#pong {
background: #45484d; /* Old browsers */
background: radial-gradient(ellipse at center, #45484d 0%,#000000 100%); /* W3C */
border-radius: 10px;
border: 4px solid #d5282d;
width: 100%;
}<!doctype html>
<html>
<head>
<title>Pong - Resit CW</title>
<link rel="stylesheet" href="pong.css" media="screen" title="no title" charset="utf-8">
</head>
<body style="overflow:hidden;">
<header>
<h1>Pong</h1>
</header>
<main>
<canvas id="pong" width="800" height="400"></canvas>
<p>
You task is complete the following:
<ul>
<li>Add data for four rectangles around the edge of the play area.</li>
<li>Draw these four rectangles.</li>
<li>Alter the game physics so that the ball bounces off these rectangles and the paddle.</li>
<li>Add keyboard controls so that the paddle moves up and down when the up and down arrow keys are pressed.</li>
<li>End the game (stop the ball moving) when the ball hits the left rectangle.</li>
</ul>
</p>
<p>
All of these alterations need to be made in the pong.js file.
The code is marked with //TODO: to give you hints as to where functionality needs to be added.
</p>
</main>
<script charset="utf-8" src="pong.js"></script>
</body>
</html>