Student information Name John Doe studentID JD1234 Catch the

Student information:
Name: John Doe
studentID: JD1234

\"Catch the Monkey\": Create a simple webpage game through manipulating CSS. Create a webpage that include your student information at the top. Use border to define a Field where the Monkey move. The Monkey have two status. Rest: The Monkey stays in any position inside the Field. When it is clicked, the webpage prompt an alert window to confirm the click. Running: The Monkey will jump to another random position inside the field whenever the mouse is pointed to it. In another work, you will never be able to click the Monkey. Use button(s) to change the Monkey\'s status. Add a visual indicator of the Monkey\'s current status. Use any of inline, internal, and external mode, or a combination of them, to include CSS and Javascript.

<!DOCTYPE html>
<html>
<head>
<title>Catch the Monkey</title>

   </head>
   <body>
Student Name : John Doe . Student ID : JD1234<br>

   <canvas id=\"e\" height=\"500\" width=\"500\"></canvas>

<script>
var canvas = document.getElementById(\"e\");
var context = canvas.getContext(\"2d\");
var monkey= new Image();

//you can give any image of your choice..
monkey.src = \"https://s-media-cache-ak0.pinimg.com/236x/22/14/c4/2214c4383f5452ff68f06a29340dbc5b.jpg\";
monkey.onload = function() {
context.drawImage(monkey, 15, 15,30,30); // initial size of the Image
};

function onRestCondition()
{
alert(\"Do you want to catch the Monkey??\");
};

function onRunningCondition()
{
document.getElementById(\"e\").onmouseover = function() {mouseOver()};
};

function mouseOver() {
//Generate random cordinates for the Image
context.drawImage(monkey, Math.floor(Math.random()*500), Math.floor(Math.random()*500),30,30);
};

canvas.addEventListener(\"click\", onCanvasClick, false);

</script>
<div style=\"text-align:center;width:480px;\">
<button id=\"run\" onClick = \"onRunningCondition()\">RUNNING</button><br><br>
<button id=\"rest\" onClick = \"onRestCondition()\">REST</button>
</div>
</body>
</html>

*********************************************************END**********************************************************************

The Code will create a new Monkey image every time the mouse pointer is hovered on the Canvas.

$Student information: Name: John Doe studentID: JD1234 \$

Student information Name John Doe studentID JD1234 Catch the

Solution

Get Help Now

Submit a Take Down Notice