当前位置： 首页 > news >正文

JS乌龟吃鸡游戏

news 2025/11/3 0:58:34

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>

在这里插入图片描述

相关文章：

JS乌龟吃鸡游戏

代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>乌龟游戏</title><script type"text/javascript">function move(obj){//乌龟图片高度var wuGui_height 67;…...

编程日记 2024/6/30 10:43:08

第十节：学习ConfigurationProperties类来配置pojo实体类参数（自学Spring boot 3.x的第二天）

大家好&#xff0c;我是网创有方 。这节记录下如何使用ConfigurationProperties来实现自动注入配置值。。实现将配置文件里的application.properties的参数赋值给实体类并且打印出来。 第一步&#xff1a;新建一个实体类WechatConfig package cn.wcyf.wcai.config;import org…...

编程日记 2024/6/30 10:41:05

如何学习Node.js

Node.js是一个开源、跨平台的JavaScript运行环境&#xff0c;它允许你在服务器端使用JavaScript。以下是一些步骤和资源&#xff0c;可以帮助你开始学习Node.js&#xff1a; ### 1. 基础知识 首先&#xff0c;确保你熟悉JavaScript语言的基础。Node.js是基于JavaScript的&…...

编程日记 2024/6/30 10:40:04

云计算基础知识

前言&#xff1a; 随着ICT技术的高速发展&#xff0c;企业架构对计算、存储、网络资源的需求更高&#xff0c;急需一种新的架构来承载业务&#xff0c;以获得持续&#xff0c;高速&#xff0c;高效的发展&#xff0c;云计算应运而生。 云计算背景 信息大爆炸时代&#xff1a…...

编程日记 2024/6/30 10:31:55

基于单片机光纤测距系统的设计与实现

摘要 &#xff1a; 光纤由于其频带宽 、 损耗低及抗干扰能力强等优点已被广泛地应用在通信 、 电子及电力方面 &#xff0c; 是我们生产生活中必不可少的媒介。 在实际的光纤实验 、 安装 、 运营和维护工作中 &#xff0c; 一种精准 、 轻便和易操作的光纤测距系统显得尤为重…...

编程日记 2024/6/30 10:30:54

python项目实战——人生重开模拟器

文章目录 1.菜单栏的编写2.玩家确定颜值、体质、智力、家境3.生成性别4.设定角色出生点5.各个年龄段的变化5.1 幼年阶段5.2 青年阶段5.3中年阶段5.4 晚年阶段 6.整体代码 人生重开模拟器是一款文字类小游戏. 玩家可根据提示输入角色的初始属性之后, 就可以开启不同的人生经历. …...

编程日记 2024/6/30 10:29:52

小时候的子弹击中了现在的我-hive进阶：案例解析（第18天）

系列文章目录 一、Hive表操作 二、数据导入和导出 三、分区表 四、官方文档&#xff08;了解&#xff09; 五、分桶表&#xff08;熟悉&#xff09; 六、复杂类型&#xff08;熟悉&#xff09; 七、Hive乱码解决&#xff08;操作。可以不做&#xff0c;不影响&#xff09; 八、…...

编程日记 2024/6/30 10:27:50

电影票房预测管理系统设计

电影票房预测管理系统的开发涉及多个层面的设计&#xff0c;包括但不限于数据收集、数据分析、预测模型构建、用户界面设计和系统集成。以下是一个基本的系统设计框架&#xff1a; 1. 数据收集模块&#xff1a;这是整个系统的基础。需要收集的数据可能包括历史票房数据、上映电…...

编程日记 2024/6/30 10:26:47

正则表达式与Pyhton

一、正则表达式的规则 1、支持普通字符匹配 2、元字符&#xff0c;一个符号匹配一堆字符 \d 匹配数字 \w 匹配数字、字母、下划线 \D \d的取反&#xff0c;除了数字全部匹配 \W \w的取反 [abc] 匹配字母a、b、c [^abc] [abc]的取反&#xf…...

编程日记 2024/6/30 10:25:46

Transformer常见面试题

目录 1.Transformer为何使用多头注意力机制&#xff1f;&#xff08;为什么不使用一个头&#xff09; 2.Transformer为什么Q和K使用不同的权重矩阵生成&#xff0c;为何不能使用同一个值进行自身的点乘&#xff1f; &#xff08;注意和第一个问题的区别&#xff09; 3.Transf…...

编程日记 2024/6/30 10:20:42

Linux——vim的配置文件+异常处理

vim的配置文件&#xff1a; [rootserver ~]# vim /etc/vimrc # 输入以下内容 set nu # 永久设置行号 shell [rootserver ~]# vim /etc/vimrc 或者 vim ~/.vimrc set hlsearch "高亮度反白 set backspace2 "可随时用退格键删除 set autoindent…...

编程日记 2024/6/30 10:19:41

node mySql 实现数据的导入导出，以及导入批量插入的sql语句

node 实现导出, 在导出excel中包含图片&#xff08;附件&#xff09; node 实现导出, 在导出excel中包含图片&#xff08;附件&#xff09;-CSDN博客https://blog.csdn.net/snows_l/article/details/139999392?spm1001.2014.3001.5502 一、效果 如图&#xff1a; 二、导入 …...

编程日记 2024/6/30 10:16:38

Webpack: 底层配置逻辑

概述 Webpack 5 提供了非常强大、灵活的模块打包功能&#xff0c;配合其成熟生态下数量庞大的插件、Loader 资源&#xff0c;已经能够满足大多数前端项目的工程化需求&#xff0c;但代价则是日益复杂、晦涩的使用方法&#xff0c;开发者通常需要根据项目环境、资源类型、编译目…...

编程日记 2024/6/30 10:14:36

数字图像处理期末复习题1

个人名片&#xff1a; &#x1f393;作者简介&#xff1a;嵌入式领域优质创作者&#x1f310;个人主页&#xff1a;妄北y &#x1f4de;个人QQ&#xff1a;2061314755 &#x1f48c;个人邮箱&#xff1a;[mailto:2061314755qq.com] &#x1f4f1;个人微信&#xff1a;Vir2025WB…...

编程日记 2024/6/30 10:11:33

poi-tl 生成 word 文件（插入文字、图片、表格、图表）

文章说明 本篇文章主要通过代码案例的方式&#xff0c;展示 poi-tl 生成 docx 文件的一些常用操作&#xff0c;主要涵盖以下内容 &#xff1a; 插入文本字符&#xff08;含样式、超链接&#xff09;插入图片插入表格引入标签&#xff08;通过可选文字的方式&#xff0c;这种方…...

编程日记 2024/6/30 10:09:31

centos上部署Ollama平台，实现语言大模型本地部署

网上有很多大模型&#xff0c;很多都是远程在线调用ChatGPT的api来实现的&#xff0c;自己本地是没有大模型的&#xff0c;这里和大家分享一个大模型平台&#xff0c;可以实现本地快速部署大模型。 Ollama是一个开源项目&#xff0c;它提供了一个平台和工具集&#xff0c;用于部…...

编程日记 2024/6/30 10:08:29

Java学习 - Redis Redigo简单介绍

Redigo 驱动下载 go get github.com/garyburd/redigo/redis获取redis服务器连接 c, err : redis.Dial("tcp", "127.0.0.1:6379")if err ! nil {panic(err) }defer c.Close()命令使用 v, err : c.Do("SET","hello","world&quo…...

编程日记 2024/6/30 10:07:28

【鸿蒙学习笔记】ArkTS组件 Blank

官方文档&#xff1a;Blank 目录标题...

编程日记 2024/6/30 10:06:27

如何使用Spring Boot进行单元测试

如何使用Spring Boot进行单元测试 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天我们将探讨如何在Spring Boot项目中进行单元测试&#xff0c;确保代码质量…...

编程日记 2024/6/30 10:05:26

2024steam夏促商店打不开、steam活动加载不了解决方法一览

今年的夏促终于开始了!目前可以看到很多精品小游戏在促销列表内&#xff0c;活动正式开启后还不知道又会是怎样的一幅场景。因为每年夏促都会有不少刚高考完的新手加入&#xff0c;遇到常见的steam商店打不开、活动页面不加载等问题不知道怎么解决。所以这里给大家准备了几种常…...

编程日记 2024/6/30 10:04:25

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表&#xff1f;1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

编程新知 2025/8/28 9:42:18

Java 8 Stream API 入门到实践详解

一、告别 for 循环&#xff01; 传统痛点&#xff1a; Java 8 之前&#xff0c;集合操作离不开冗长的 for 循环和匿名类。例如&#xff0c;过滤列表中的偶数&#xff1a; List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...

编程新知 2025/10/27 2:28:51

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

编程新知 2025/11/1 10:07:23

线程同步：确保多线程程序的安全与高效！

全文目录&#xff1a; 开篇语前序前言第一部分&#xff1a;线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分&#xff1a;synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分&#xff…...

编程新知 2025/9/24 16:02:40

HTML前端开发：JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

编程新知 2025/10/26 2:03:27

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

编程新知 2025/10/30 3:39:11

【Oracle】分区表

个人主页&#xff1a;Guiat 归属专栏&#xff1a;Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...

编程新知 2025/11/2 5:39:39

Python Einops库：深度学习中的张量操作革命

Einops&#xff08;爱因斯坦操作库&#xff09;就像给张量操作戴上了一副"语义眼镜"——让你用人类能理解的方式告诉计算机如何操作多维数组。这个基于爱因斯坦求和约定的库&#xff0c;用类似自然语言的表达式替代了晦涩的API调用&#xff0c;彻底改变了深度学习工程…...

编程新知 2025/10/16 12:04:52

适应性Java用于现代 API：REST、GraphQL 和事件驱动

在快速发展的软件开发领域&#xff0c;REST、GraphQL 和事件驱动架构等新的 API 标准对于构建可扩展、高效的系统至关重要。Java 在现代 API 方面以其在企业应用中的稳定性而闻名&#xff0c;不断适应这些现代范式的需求。随着不断发展的生态系统&#xff0c;Java 在现代 API 方…...

编程新知 2025/10/31 0:35:18

WPF八大法则：告别模态窗口卡顿

⚙️ 核心问题&#xff1a;阻塞式模态窗口的缺陷 原始代码中ShowDialog()会阻塞UI线程&#xff0c;导致后续逻辑无法执行&#xff1a; var result modalWindow.ShowDialog(); // 线程阻塞 ProcessResult(result); // 必须等待窗口关闭根本问题&#xff1a…...

编程新知 2025/10/18 2:38:40