Student information: Name: John Doe studentID: JD1234 \"Catch the Monkey\": Crea

ID: 3794250 • Letter: S

Question

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.

Explanation / Answer

<!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>
<button id="run">RUNNING</button><br><br>
<button id="rest">REST</button>
</div>
</body>
</html>

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

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

Navigate

Student infor: Joe Smith JS456 PLEASE ONLY USE JQUERY FOR ALL SCRIPTS. \"Snowing

Student life does not generally afford a great deal of free time to pursue your

Student information: Name: John Doe studentID: JD1234 \"Catch the Monkey\": Crea

Question

Explanation / Answer

Related Questions

Navigate