<title>js turtle catch chick game </title>
<meta http-equiv= "Content-type" content= "Text/html;charset=utf-8"/>
<script type= "Text/javascript" >
Respond to User's Click button or keyboard button
function Move (obj) {
alert (Obj.keycode);
Get the height and width of the turtle picture
var wu_width = 100;
var wu_height = 75;
Get the height and width of chick pictures
var cock_width = 100;
var cock_height = 75;
var Wugui = document.getElementById (' Wugui '); Get the div where the turtle is
The user can be interpreted by clicking the mouse or by pressing the keyboard
if (window.event) {
var key = Obj.keycode;//keycode Keyboard value
}
Get the top value of the turtle left value
var wu_top = wugui.style.top;
var wu_left = Wugui.style.left;
Remove the top value left of the turtle and convert it to a number
Wu_top = parseint (Wu_top.substr (0,wu_top.indexof ("P"));
Wu_left = parseint (Wu_left.substr (0,wu_left.indexof ("P"));
Determine which button is clicked or pressed by the user
if ((Obj.value = = ' Go down ') | | (key = = 40)) {
Wugui.style.top = (wu_top+10) + ' px ';
Wu_top + = 10;
}else if ((Obj.value = = ' go right ') | | (key = = 39)) {
Wugui.style.left = (wu_left+10) + ' px ';
Wu_left + = 10;
}else if (Obj.value = = ' Go Left ') | | (key = = 37)) {
Wugui.style.left = (wu_left-10) + ' px ';
Wu_left-= 10;
}else if ((Obj.value = = ' go up ') | | (key = = 38)) {
Wugui.style.top = (wu_top-10) + ' px ';
Wu_top-= 10;
}
Get the chick's current top and left
var cock = document.getElementById (' cock ');
var cock_top = cock.style.top;
var cock_left = Cock.style.left;
Cock_top = parseint (Cock_top.substr (0,cock_top.indexof (' P ')));
Cock_left = parseint (Cock_left.substr (0,cock_left.indexof (' P ')));
var y = math.abs (cock_top-wu_top); Absolute value of ordinate between two points
var x = Math.Abs (cock_left-wu_top);//The absolute value of the horizontal axis between two points
/*
: Window.event represents the state of the event object. Takes effect only when an event occurs. This object exists when an event such as a mouse or keyboard is triggered.
Window.event This is the case only under IE. He is not a standard. This means that other browsers do not support it.
The event pair is the first parameter that raises the number of events in a browser supported by the Internet Explorer.
The parameter name is arbitrary, in the following example, the parameter name of my event object is evt, or it can be defined as a different name. In order to be compatible with IE browser can write this
*/
See if the turtle catches the chick
var xx = 0;
var yy = 0;
Judging portrait
if (Wu_top < cock_top) {
if (y<wu_height) {
yy = 1;
}
}else{
if (y<cock_height) {
yy = 1;
}
}
Judging landscape
if (wu_width<cock_width) {
if (x<wu_width) {
xx = 1;
}
}else{
if (x<cock_width) {
xx = 1;
}
}
if ((xx==1) && (yy==1)) {
Window.alert (' Turtle pretty fast! Like ');
Wugui.style.top = 120+ ' px ';
Wugui.style.left = 100+ ' px ';
}
}
Move the chick's position freely
function Frandomby (under, over) {
Switch (arguments.length) {
Case 1:return parseint (Math.random () *under+1);
Case 2:return parseint (Math.random () * (over-under+1) + under);
Default:return 0;
}
}
function Movecock () {
var random = Frandomby ( -20,20);
var ji = document.getElementById (' cock ');
var ji_top = ji.style.top;
var ji_left = Ji.style.left;
Ji_top = parseint (Ji_top.substr (0,ji_top.indexof (' P ')));
Ji_left = parseint (Ji_left.substr (0,ji_left.indexof (' P ')));
/*alert (Document.body.scrollHeight);
var body_width = parseint (Document.body.scrollHeight.substr (0,document.body.scrollheight.indexof (' P '));
var body_hieght= parseint (Document.body.scrollWidth.substr ("0,document.body.scrollwidth.indexof (' P ')");
if (Ji_left >=body_width | | ji_top >= body_height) {
Ji_top-= random;
Ji_left-= random;
}
*/
Ji_top + = random;
Ji_left + = random;
Ji.style.top = ji_top + ' px ';
Ji.style.left = ji_left + ' px ';
Alert (ji_top + ' ==> ' +ji_left);
};
var mytimer=setinterval (' Movecock () ', 500);
/*function Rerun () {
Mytimer=setinterval (' Movecock () ', 500);
}*/
</script>
<body onkeydown= "return Move (event)" >
<table border= "1" >
<tr>
<td> </td>
<td><input type= "button" value= "Go Up" onclick= "Move (This)"/></td>
<td> </td>
</tr>
<tr>
<td><input type= "button" value= "Go Left" onclick= "Move (This)"/></td>
<td><input type= "button" value= "Go Down" onclick= "Move (This)"/></td>
<td><input type= "button" value= "Go Right" onclick= "Move (This)"/></td>
</tr>
</table>
<!--put the turtle in a div--
<div id= "Wugui" style= "position:absolute;left:100px;top:120px" >
</div>
<!--put the chick in a div--
<div id= style= position:absolute;left:200px;top:200px >
</div>
</body>
Illustration of the turtle's algorithm for catching chickens
Jsdom Programming-turtle catching chick game