JAVA PLEASE
- Please Help Java Please Game Css Box Width 50px Height 50px Background Color Blue Opacity 1 (47.55 KiB) Viewed 101 times
#box
{
width: 50px;
height: 50px;
background-color: blue;
opacity: 0.80;
}
#container
{
width: 400px;
height: 400px;
background-color: lightblue;
position: absolute;
}
#button-panel
{
padding: 10px;
}
game.html:
<!DOCTYPE html>
<html>
<head>
<title>jQuery
Animation</title>
<link rel="stylesheet"
type="text/css" href="game.css" />
<script
src="https://ajax.googleapis.com/ajax/libs/j ... "></script>
<script type="text/javascript"
src="game.js"></script>
</head>
<body>
<div id="button-panel">
<button
id="up">Up</button>
<button
id="down">Down</button>
<button
id="left">Left</button>
<button
id="right">Right</button>
<button
id="fadeout">FadeOut</button>
<button
id="fadein">FadeIn</button>
<button
id="blink">Blink</button>
<button
id="reset">Reset</button>
</div>
<div id="container">
<div
id="box"></div>
</div>
</body>
</html>
game.js:
$(function(){
//jQuery code goes here
});
To do: 1. In the javascript file, 2. Attach click event to each button using jquery 3. Remember that you have to make the position as absolute in order to add animation on top (for #box inside css). 4. At any point the "box" should not go outside the "container" 5. When any button is clicked, the previous animation on "box" should stop. 6. On clicking the "Up" button, the box should move up. 7. On clicking the "Down" button, the box should move down. 8. On clicking the "Left" button, the box should move left. 9. On clicking the "Right" button, the box should move right. 10. On clicking the "Fade Out" button, the box should fade and disappear. 11. On clicking the "Fadeln" button, the box should reappear. 12. On clicking the "Reset" button, the box should a. Be visible b. At the top left of the "container" 13. Do not hardcode the dimensions of the box or container inside javascript. Use css jquery methods to get the width and height (see last link in Materials in Bb)