Knowledge points involved in this game include:
1. Draw the ball, image, and Gradient
2. Scheduled event and Collision Detection
[Html]
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> first version </title>
<Style>
Form {
Width: 330px;
Margin: 20px;
Background-color: brown;
Padding: 20px;
}
</Style>
<Script type = "text/javascript">
// The upper left corner of the box
Var boxX = 20;
Var boxY = 30;
// Box size
Var boxWidth = 350;
Var box height = 250;
// Ball Size
Var ballRadius = 10;
// Collision detection location
Var boxBoundLeft = boxX + ballRadius; // left border
Var boxBoundRight = boxX + boxWidth-ballRadius; // right border
Var boxBoundTop = boxY + ballRadius; // upper boundtop
Var boxBoundBottom = boxY + boxHeight-ballRadius; // Bottom Border
// Ball Position
Var ballX = 50;
Var ballY = 50;
// Ball displacement
Var ballDx = 4;
Var ballDy = 8;
Var ctx;
// The image for filling the ball
Var img = new Image ();
Img. src = "pearl.jpg ";
// Used to draw the gradient of the wall
Var grad;
// Fill color for Gradient
Var hue = [
[255, 0, 0],
[255,255, 0],
[0,255, 0],
[0,255,255],
[0,0, 255],
[255,0, 255]
];
Function init ()
{
Ctx = document. getElementById ("canvas"). getContext ("2d ");
Ctx. lineWidth = ballRadius;
Grad = ctx. createLinearGradient (boxX, boxY, boxX + boxWidth, boxY + boxHeight );
// Retrieve the RGB values of no color through Traversal
For (var h = 0; h {
Var color = "rgb (" + hue [h] [0] + "," + hue [h] [1] + ", "+ hue [h] [2] + ")";
Grad. addColorStop (h/6, color );
}
Ctx. fillStyle = grad;
Moveball ();
SetInterval (moveball, 30 );
}
Function moveball ()
{
// Clear the canvas
Ctx. clearRect (boxX, boxY, boxWidth, boxHeight );
// Draw the wall
// Draw the left wall
Ctx. fillRect (boxX, boxY, ballRadius, boxHeight );
// Draw the right wall
Ctx. fillRect (boxBoundRight, boxY, ballRadius, boxHeight );
// Draw the upper wall
Ctx. fillRect (boxX, boxY, boxWidth, ballRadius );
// Draw the bottom wall
Ctx. fillRect (boxX, boxBoundBottom, boxWidth, ballRadius );
// Ctx. strokeRect (boxX, boxY, boxWidth, boxHeight );
// Collision Detection
BoundCheck ();
Ctx. beginPath ();
// Draw the ball
// Ctx. arc (ballX, ballY, ballRadius, 0, 2 * Math. PI, true );
Ctx. drawImage (img, ballX-ballRadius, ballY-ballRadius, 2 * ballRadius, 2 * ballRadius );
Ctx. fill ();
Ctx. closePath ();
}
Function boundCheck ()
{
// Calculate the new position of the ball
Var tmpBallX = ballX + ballDx;
Var tmpBallY = ballY + ballDy;
// Reach the left boundary
If (tmpBallX <boxBoundLeft)
{
BallDx =-ballDx; // changes the position of horizontal movement.
TmpBallX = boxBoundLeft; // the horizontal position of the ball is the left boundleft position.
}
// Reach the right boundary
If (tmpBallX> boxBoundRight)
{
BallDx =-ballDx; // changes the position of horizontal movement.
TmpBallX = boxBoundRight; // the horizontal position of the ball is the left boundary position.
}
// Reach the upper boundary
If (tmpBallY <boxBoundTop)
{
BallDy =-ballDy; // change the vertical movement position
TmpBallY = boxBoundTop; // the vertical position of the ball is the upper boundtop.
}
// Reach the bottom boundary
If (tmpBallY> boxBoundBottom)
{
BallDy =-ballDy; // change the vertical movement position
TmpBallY = boxBoundButtom; // the vertical position of the ball is the lower boundary.
}
BallX = tmpBallX;
BallY = tmpBallY;
}
Function change ()
{
BallDx = Number (document. getElementById ("hv"). value );
BallDy = Number (document. getElementById ("vv"). value );
Return false;
}
</Script>
</Head>
<Body onLoad = "init ();">
<Canvas id = "canvas" width = "400" height = "300">
Your browser doesn' t support the HTML5 element canvas.
</Canvas>
<Br/>
<Form name = "f" id = "f" onSubmit = "return change ();">
Horizontal velocity <input name = "hv" id = "hv" value = "4" type = "number" min = "-10" max = "10"/>
<Br>
Vertical velocity <input name = "vv" id = "vv" value = "8" type = "number" min = "-10" max = "10"/>
<Input type = "submit" value = "CHANGE"/>
</Form>
</Body>
</Html>
The running result is as follows:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
