Hanshunping javascript----js turtle catch chick Game

Source: Internet
Author: User

<! 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.style.top= (wugui_top+10) + "px";
else if (obj.value== "Up" | | key==87) {
Wugui.style.top= (wugui_top-10) + "px";
else if (obj.value== "Left" | | KEY==65) {
Wugui.style.left= (wugui_left-10) + "px"
else if (obj.value== "Right" | | key==68) {
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

if (wugui_top<cock_top) {//Judging turtle Rooster who's on top if the turtle is on top
if (y<wugui_height) {
else{//turtles are down here.
if (y<cock_height)

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
if (x<cock_width)//64

if (xx==1&&yy==1)
Alert ("The Turtle is so Fierce");
<table border= ' 1 ' >
&LT;TR&GT;&LT;TD colspan= "3" align= "Center" > Control Area </td></tr>
<input type= "button" value= "Up" onclick= "Move (This)"/>
<input type= "button" value= "left" onclick= "Move (This)"/>
<input type= "button" value= "right" onclick= "Move (This)"/>
<input type= "button" value= "Down" onclick= "Move (This)"/>
<div id= "Wugui" style= "position:absolute;left:100px;top:320px;" >


<div id= style= position:absolute;left:200px;top:300px; >


Hanshunping javascript----js turtle catch chick Game

Related Article

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.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

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