Home > Developer > JavaScript

Hanshunping javascript----js turtle catch chick Game

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

<! 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 ' >
&LT;TR&GT;&LT;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

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
javascript catch syntax error javascript try without catch node js try catch example javascript try catch finally example javascript catch all uncaught exceptions javascript try catch line number chick fil android pay
Related Article
JavaScript solution to the eight Queens Problem method summar...
The difference between single and double quotes in JavaScript...
Http status code: 301, 302 redirection, 302 redirection
The html space symbol nbsp; ensp; emsp; introduces and implem...
Ajax and 302 response code Testing
Ajax and 302 response code test_javascript-js tutorial

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More