<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Turtle catching chick </title>
<body onkeydown= "return Move (event)" >
<script language= "JavaScript" >
The corresponding user clicks the button or presses the keyboard
function Move (obj) {
The height and width of the turtle
var wugui_height=45;
var wugui_width=75;
The height and width of the rooster
var cock_height=53;
var cock_width=64;
Get the turtle's Div object DOM programming
var Wugui=document.getelementbyid ("Wugui");
if (window.event) {//window.event can tell whether the user is controlling the turtle by pressing the keyboard or by clicking
key=obj.keycode;//get the user to press the key code
}
var wugui_top=wugui.style.top;
var wugui_left=wugui.style.left;
Turn the acquired 100px into 100;
Wugui_top=parseint (Wugui_top.substring (0,wugui_top.indexof ("P"));
Wugui_left=parseint (Wugui_left.substring (0,wugui_left.indexof ("P"));
Determine which key the user presses
if (obj.value== "Down" | | key==83) {
wugui_top=wugui_top+10;
Wugui.style.top= (wugui_top+10) + "px";
}
else if (obj.value== "Up" | | key==87) {
wugui_top=wugui_top-10;
Wugui.style.top= (wugui_top-10) + "px";
}
else if (obj.value== "Left" | | KEY==65) {
wugui_left=wugui_left-10;
Wugui.style.left= (wugui_left-10) + "px"
}
else if (obj.value== "Right" | | key==68) {
wugui_left=wugui_left+10;
Wugui.style.left= (wugui_left+10) + "px";
}
Get the left and top of the rooster
var Cock=document.getelementbyid ("cock");
Get the cocks current top and left
var cock_top=cock.style.top;
var cock_left=cock.style.left;
Handling px Suffixes
Cock_top=parseint (Cock_top.substring (0,cock_top.indexof ("P"));
Cock_left=parseint (Cock_left.substring (0,cock_left.indexof ("P"));
Judging if you touch a rooster
Y=math.abs (cock_top-wugui_top);//The absolute value of the ordinate between two points of the Rooster Turtle
X=math.abs (cock_left-wugui_left);//The absolute value of the horizontal axis between two points of the Rooster Turtle
Method One
xx=0;
yy=0;
if (wugui_top<cock_top) {//Judging turtle Rooster who's on top if the turtle is on top
if (y<wugui_height) {
Yy=1;
}
}
else{//turtles are down here.
if (y<cock_height)
{
Yy=1;
}
}
if (wugui_left<cock_left) {//Judging turtle cocks who are on the left
if (x<wugui_width)//75 If the tortoise is on the left
{
Xx=1;
}
}
else{
if (x<cock_width)//64
{
Xx=1;
}
}
if (xx==1&&yy==1)
{
Alert ("The Turtle is so Fierce");
}
}
</script>
<table border= ' 1 ' >
<TR><TD colspan= "3" align= "Center" > Control Area </td></tr>
<tr><td></td><td>
<input type= "button" value= "Up" onclick= "Move (This)"/>
</td><td></td></tr>
<tr><td>
<input type= "button" value= "left" onclick= "Move (This)"/>
</td><td></td><td>
<input type= "button" value= "right" onclick= "Move (This)"/>
</td></tr>
<tr><td></td><td>
<input type= "button" value= "Down" onclick= "Move (This)"/>
</td><td></td></tr>
</table>
<!--Turtle--->
<div id= "Wugui" style= "position:absolute;left:100px;top:320px;" >
</div>
<div id= style= position:absolute;left:200px;top:300px; >
</div>
</body>
Hanshunping javascript----js turtle catch chick Game