JS乌龟吃鸡游戏

img
代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>乌龟游戏</title><script type="text/javascript">function move(obj){//乌龟图片高度var wuGui_height = 67;//乌龟图片宽度var wuGui_width  = 94;//公鸡图片高度var cock_height  = 73;//公鸡图片宽度var cock_width   = 76;var wuGui = document.getElementById("wugui");var wuGui_left = parseInt(wuGui.style.left.substring(0,wuGui.style.left.indexOf("p")));var wuGui_top = parseInt(wuGui.style.top.substring(0,wuGui.style.top.indexOf("p")));var input = document.getElementsByTagName("input");var cock = document.getElementById("cock");var cock_left = parseInt(cock.style.left.substring(0,cock.style.left.indexOf("p")));var cock_top = parseInt(cock.style.top.substring(0,cock.style.top.indexOf("p")));//乌龟和公鸡左上角的距离(纵向距离)var y = Math.abs(wuGui_top - cock_top);//乌龟和公鸡左上角的距离(横向距离)var x = Math.abs(wuGui_left - cock_left);//默认不重叠yy = 0;xx = 0;if(obj.value == "向上走"){wuGui_top -= 10;wuGui.style.top = wuGui_top + "px";}if(obj.value == "向左走"){wuGui_left -= 10;wuGui.style.left = wuGui_left + "px";}if(obj.value == "向右走"){wuGui_left += 10;wuGui.style.left = wuGui_left + "px";}if(obj.value == "向下走"){wuGui_top += 10;wuGui.style.top = wuGui_top + "px";}//碰撞if(wuGui_top < cock_top){if( y < wuGui_height){yy = 1;}}else {if (y < cock_height){yy = 1;}}if(wuGui_left < cock_left){if( x < wuGui_width){xx = 1;}}else {if (x < cock_width){xx = 1;}}if(xx && yy){alert("乌龟吃了鸡!");wuGui.style.top = "100px";wuGui.style.top = "120px";}}window.onload = function () {}</script>
</head>
<body>
<table border="1"><tr><td></td><td><input type="button" value="向上走" onclick="move(this)"/></td><td></td></tr><tr><td><input type="button" value="向左走" onclick="move(this)"/></td><td></td><td><input type="button" value="向右走" onclick="move(this)"/></td></tr><tr><td></td><td><input type="button" value="向下走" onclick="move(this)"/></td><td></td></tr>
</table>
<!--把乌龟放在一个div-->
<div id="wugui" style="position: absolute ;left:100px;top:120px;"><img src="1.bmp" border="1" alt=""/>
</div>
<!--公鸡图片div-->
<div id="cock" style="position:absolute;left:200px;top:200px;"><img src="2.bmp" border="1" alt=""/>
</div>
</body>
</html>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/36916.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Conda跨平台环境迁移

问题描述&#xff1a; 在一台Ubuntu电脑上完全复刻在Windows中通过conda创建的环境。 导出环境 在Windows机器上&#xff0c;需要导出当前conda环境的配置。这将生成一个environment.yml文件&#xff0c;其中包含所有已安装的包和版本信息。 打开Anaconda Prompt&#xff08;…

第一天:SLAM整体算法框架简介

从零开始搭建一套SLAM系统 第一天:整体算法框架简介以及学习建议 SLAM是什么 SLAM 和 SFM 是什么关系 不同点: SFM (Structure From Motion),称之为传统三维重建,这是一门计算机视觉学科的分支,特点是把图片数据集集回来,离线慢慢精细化处理。常见应用就是重建某建筑物…

Django 模版继承

1&#xff0c;设计母版页 Test/templates/6/base.html <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><!-- 修正了模板标签的全角字符问题 -->{% block title %}<title>这个是母版页</title>{…

算法:链表

目录 链表的技巧和操作总结 常用技巧&#xff1a; 链表中的常用操作 题目一&#xff1a;反转一个单链表 题目二&#xff1a;链表的中间结点 题目三&#xff1a;返回倒数第k个结点 题目四&#xff1a;合并两个有序链表 题目五&#xff1a;移除链表元素 题目六&#xff…

Linux下命令行重定向运算符的使用办法

在Linux下&#xff0c;> 和 >> 是两种常用的输出重定向运算符&#xff0c;它们分别代表了覆盖写入和追加写入的文件操作。这些运算符在命令行交互、脚本编程以及日常的系统管理中极为重要&#xff0c;能够有效地控制程序或命令的输出流向&#xff0c;提高工作效率。 …

平衡二叉搜索树/AVL树

VAL树的特性 左右子树高度差的绝对值不超过1。&#xff08;即左右子树高度差取值为-1&#xff0c;0&#xff0c;1&#xff09;且左右子树均为VAL树右子树的值大于左子树的值 在搜索二叉树中我们提及了搜索二叉树的退化问题。 当有序&#xff08;升序或降序&#xff09;地插入…

摸鱼大数据——Spark基础——Spark环境安装——Spark Local[*]搭建

一、虚拟机配置 查看每一台的虚拟机的IP地址和网关地址 查看路径: cat /etc/sysconfig/network-scripts/ifcfg-ens33 2.修改 VMware的网络地址: 使用VMnet8 3.修改windows的对应VMware的网卡地址 4.通过finalshell 或者其他的shell连接工具即可连接使用即可, 连接后, 测试一…

如何在Java中实现事件驱动编程?

如何在Java中实现事件驱动编程&#xff1f; 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天我们将探讨如何在Java中实现事件驱动编程&#xff0c;这是一种强…

AD PCB板子裁剪与泪滴设置

在剪裁板子时。首先&#xff0c;选择选择板子的机械层&#xff0c;之后选择画线。在原来的板子上画上自己想要裁剪的图形。如下下图 之后&#xff0c;选择按照所画的线裁剪板子即可&#xff0c;如下 在焊接PCB时&#xff0c;为了防止多次焊接导至焊盘脱落可以加大焊点的接触面积…

ESP32-C3模组上跑通MQTT(6)—— tcp例程(1)

接前一篇文章:ESP32-C3模组上跑通MQTT(5) 《ESP32-C3 物联网工程开发实战》 一分钟了解MQTT协议 ESP32 MQTT API指南-CSDN博客 ESP-IDF MQTT 示例入门_mqtt outbox-CSDN博客 ESP32用自签CA进行MQTT的TLS双向认证通信_esp32 mqtt ssl-CSDN博客 特此致谢! 本回开始正式讲…

mac docker 运行mysql5.7 镜像失败解决

12312 qemu: uncaught target signal 11 (Segmentation fault) InnoDB: Linux Native AIO interface is not supported on this platform. Please check your OS documentation and install appropriate binary of InnoDB. 问题如上 一般来说&#xff0c;拉取mysql8是没问题…

浅谈css的cusor属性

在网页设计中&#xff0c;细节决定成败。CSS的cursor属性是这些细节中的关键一环&#xff0c;它不仅影响着网页的美观&#xff0c;更关乎用户体验。今天&#xff0c;我们就来深入了解一下cursor属性&#xff0c;看看如何通过它来增强网页的交互性。 cursor属性概览 cursor属性…

华润万家超市卡怎么用?

华润的礼品卡不仅能线下门店使用&#xff0c;还能直接叫送货上门 我最近用积分兑了几张华润卡&#xff0c;但是又没有购物需求&#xff0c;送朋友吧面值又不大&#xff0c;朋友也说用不上 最后朋友建议我在收卡云上把卡出掉&#xff0c;我试了下92折出掉了&#xff0c;价格还…

代码随想录算法训练营第四十七天| 188.买卖股票的最佳时机IV ,309.最佳买卖股票时机含冷冻期 ,714.买卖股票的最佳时机含手续费

188. 买卖股票的最佳时机 IV - 力扣&#xff08;LeetCode&#xff09; class Solution {public int maxProfit(int k, int[] prices) {int[][] dp new int[prices.length][2*k];for(int i0;i<2*k;i){if(i%2 0){dp[0][i] -prices[0];}else{dp[0][i] 0;} }for(int i1;i…

综合项目实战--jenkins节点模式

一、DevOps流程 DevOps是一种方法论,是一系列可以帮助开发者和运维人员在实现各自目标的前提下,向自己的客户或用户交付最大化价值及最高质量成果的基本原则和实践,能让开发、测试、运维效率协同工作的方法。 DevOps流程(自动化测试部分) DevOps完整流程 二、gitee+j…

内网和外网的区别及应用

内网和外网的区别及应用 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天我们来探讨一下计算机网络中的内网和外网&#xff0c;它们的区别以及在实际应用中的…

go sync包(四) 读写锁(二)

读写锁 RWMutex 写锁 加锁 RWMetex 的写锁复用了 Mutex&#xff1a; // Lock locks rw for writing. // If the lock is already locked for reading or writing, // Lock blocks until the lock is available. func (rw *RWMutex) Lock() {if race.Enabled {_ rw.w.state…

安全与发展并重:实施等保,促进企业可持续增长的逻辑

在数字经济时代&#xff0c;信息安全不仅是企业稳健运营的基石&#xff0c;也是推动可持续发展的重要保障。网络安全等级保护&#xff08;简称“等保”&#xff09;体系&#xff0c;作为国家层面设立的信息安全保障框架&#xff0c;其核心在于平衡安全与发展的关系&#xff0c;…

Java中如何进行分布式系统设计?

Java中如何进行分布式系统设计&#xff1f; 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天&#xff0c;我们来讨论如何在Java中进行分布式系统设计。分布式…

什么是 Python 包管理器?怎么安装?

Python 包管理器是一个用于安装、升级、卸载和管理 Python 包的工具。Python 的包&#xff08;也称为模块或库&#xff09;是预编写的 Python 代码&#xff0c;用于执行各种任务&#xff0c;如数据处理、网页开发、科学计算等。Python 包管理器使得这些包的管理变得简单和高效。…