搜索
查看
编辑修改
首页
UNITY
NODEJS
PYTHON
AI
GIT
PHP
GO
CEF3
JAVA
HTML
CSS
搜索
我家自动化
这个屌丝很懒,什么也没留下!
关注作者
热门标签
jquery
HTML
CSS
PHP
ASP
PYTHON
GO
AI
C
C++
C#
PHOTOSHOP
UNITY
iOS
android
vue
xml
爬虫
SEO
LINUX
WINDOWS
JAVA
MFC
CEF3
CAD
NODEJS
GIT
Pyppeteer
article
热门文章
1
LLM之本地部署GraphRAG(GLM-4+Xinference的embedding模型)(附带ollma部署方式)_xinference部署glm-4v
2
JavaScript 错误 - Throw 和 Try to Catch的使用
3
python中import,模块,包与相对导入(超级详细!)_python import
4
C++性能优化笔记-8-优化存储访问_c++缓存优化
5
【视频讲解】Xgboost、ARIMA 和 Prophet对国际牛肉市场市场份额数据、比特币价格时间序列预测
6
vLLM本地部署GLM-4-9b大模型,ChatTTS+AutoGen实现多AI对话转语音!打造AI小说智能体!AI写高考作文_vllm部署glm4
7
linux 中文出现乱码问题!_linux 判断文件中文乱码
8
Pytorch1: Anaconda下载,安装,配置
9
什么是RLHF(基于人类反馈的强化学习)?
10
HttpPost 传输Json数据并解析
当前位置:
article
> 正文
贪吃蛇(显示食物和蛇身)_贪吃蛇蛇的身体显示功能
作者:我家自动化 | 2024-08-19 14:06:58
赞
踩
贪吃蛇蛇的身体显示功能
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>贪吃蛇</title>
<style type="text/css">
#container{
width:800px;
margin:auto;
margin-top:60px;
}
#map{
width:800px;
height:400px;
background-color:#CCC;
border-color:#00F;
border-style:ridge;
overflow:hidden;
position:absolute;
}
</style>
<script type="text/javascript" language="javascript">
//变量不使用var是因为变量的生存周期,如果出了函数体变量就会失效
var start_id;
function Food(){
this.w = 20;
this.h = 20;
this.color = 'red';
//显示食物
this.display=function(){
//我们要显示一个食物,首先要知道:大小,位置,属性
var new_div = document.createElement("div");
new_div.style.width = this.w+'px';
new_div.style.height = this.h+'px';
//位置我们采用0,1,2……
//求有多少个空格
this.x = Math.round(Math.random()*39);//求x轴有多少空格
this.y = Math.round(Math.random()*19);//求y轴有多少空格
//利用坐标确定位置
new_div.style.left=(this.w*this.x)+'px';//离左端的距离,也是x轴坐标
new_div.style.top=(this.h*this.y)+'px';//离左端的距离,也是y轴坐标
new_div.style.backgroundColor=this.color;
new_div.style.position="absolute";
document.getElementById('map').appendChild(new_div);
this.div=new_div;
}
this.reDisplay=function(){
document.getElementById('map').removeChild(this.div);
this.display();
}
}
//显示蛇
function Snake(){
this.w =20;
this.h = 20;
this.direct = 'right';
//通过数组来保存蛇身,一个元素代表一个蛇节
this.body=[
{ x:5,y:3,color:"blue"},
{ x:4,y:3,color:"red"},
{ x:3,y:3,color:"red"}
]
this.display=function(){
for(var i=0;i<this.body.length;i++){
var snake_div = document.createElement("div");
snake_div.style.width = this.w+'px';
snake_div.style.height = this.h+'px';
snake_div.style.left=(this.w*this.body[i].x)+'px';
snake_div.style.top=(this.h*this.body[i].y)+'px';
snake_div.style.position="absolute";
snake_div.style.backgroundColor=this.body[i].color;
document.getElementById("map").appendChild(snake_div);
//生成食物时就要给这个食物做个标记,方便删除
this.body[i].div = snake_div;
}
}
this.move=function(){
//移动蛇身
for(var i=this.body.length-1;i>0;i--){
this.body[i].x=this.body[i-1].x;
this.body[i].y=this.body[i-1].y;
}
//移动蛇头
switch(this.direct){
case 'up':
this.body[0].y-=1;
break;
case 'down':
this.body[0].y+=1;
break;
case 'left':
this.body[0].x-=1;
break;
case 'right':
this.body[0].x+=1;
// this.body[0].y=this.body[0].y;
//alert(this.body[0].x);
//alert(this.body[0].y);
break;
}
//把旧的蛇节删除
this.removeSnake();
//按照新的位置属性重新显示一下
this.display();
//撞墙死后
if(this.body[0].x<0 ||this.body[0].x>39 || this.body[0].y<0 || this.body[0].y>19){
alert('Game Over');
//清空定时器
clearInterval(snake_id);
}
//判断是否撞到自己,判断头的坐标和身体的某一节重合,但是前四节肯定撞不上
for(var i=this.body.length-1;i>=4;i--){
if(this.body[0].x==this.body[i].x && this.body[0].y==this.body[i].y){
alert('撞自己了!');
//新添 清空定时器
<!--clearInterval(snake_id);-->
}
}
//吃食物后长一节,判断头部坐标和食物坐标重合,并增加一节
if(this.body[0].x==food.x && this.body[0].y==food.y){
//现在吃上食物了,蛇身增加一节
this.body[this.body.length]={x:0,y:0,color:'red',div:null};
//吃一个食物之后,让旧的食物消失,让新的事物显示
food.reDisplay();
}
}
//改变方向
this.setDirect=function(keycode){
switch(keycode){
case 37:
if(this.direct!='right'){
this.direct="left";}
break;
case 38:
if(this.direct!='down'){
this.direct="up";}
break;
case 39:
if(this.direct!='left'){
this.direct="right";}
break;
case 40:
if(this.direct!='up'){
this.direct="down";}
break;
}
}
this.removeSnake=function(){
//先找到他的父元素
var map = document.getElementById('map');
for(var i=0;i<this.body.length;i++){
<!--if(this.body[this.body.length]!==null){-->
if(this.body[i].div!=null){
map.removeChild(this.body[i].div);
}
}
}
}
function init(){
food = new Food();
food.display();
snake = new Snake();
snake.display();
}
function changeDirect(evtkey){
//alert(evtkey.keyCode);
snake.setDirect(evtkey.keyCode);
}
function Startmove(){
document.getElementById("pause").disabled=false;
snake_id = setInterval('snake.move();',500);
document.getElementById("start").disabled=true;
}
function Pause(){
clearInterval(snake_id);
document.getElementById("start").disabled=false;
document.getElementById("pause").disabled=true;
}
</script>
</head>
<body οnlοad="init()" οnkeydοwn="changeDirect(event)">
<div id="container">
<input type="button" value="开始" id="start" οnclick="Startmove()"/>
<input type="button" value="暂停" id="pause" οnclick="Pause()"/>
<div id="map">
</div>
</div>
</body>
</html>
本文内容由网友自发贡献,转载请注明出处:
https://www.wpsshop.cn/w/我家自动化/article/detail/1002613
推荐阅读
article
Python
数据分析
:Pandas
行
列
选择技巧_
pandas
选择前
10
行
的前3
列
...
在
数据分析
中,选取需要的数据进
行
处理和分析是很重要的。在Excel表格中,通过鼠标点选或扩选可以轻松地选取数据,而在 p...
赞
踩
article
git
pull
错误:The
following
untracked
working tree f...
在尝试
git
pull
时遇到错误提示,指出一些未跟踪的工作目录文件将被合并覆盖。解决方案包括使用
git
clean清理工...
赞
踩
article
魔法修习—
stable
diffusion
局部
重绘
详解
_
stable
diffusion
二次创造 ...
AIGC技术的未来发展前景广阔,随着人工智能技术的不断发展,AIGC技术也将不断提高。未来,AIGC技术将在游戏和计算领...
赞
踩
article
注册
域名
用
哪个
后缀
好?...
在互联网的世界中,
域名
是您品牌、业务或个人在线身份的基石。随着新顶级
域名
(New gTLDs)的涌现,
域名
后缀
的选择变得...
赞
踩
article
如何
使用
浏览器
?
从零开始
认识
浏览器
!最最最基础向!_
浏览器
网址
的
学习...
本文详细介绍了
如何
在Edge
浏览器
中进行基础操作,包括设置主页为简洁模式,
使用
地址栏进行搜索和访问链接,管理书签,以及实...
赞
踩
article
深入浅出
剖析
JAVA
多
线程
原理_
java
线程
之间
得
切换
原理、...
●程序由指令和数据组成,但这些指令要运行,数据要读写,就必须将指令加载至 CPU,数据加载至内存。在指令运行过程中还需要...
赞
踩
article
AcWing
901
.
滑雪
--
记忆化搜索...
【代码】
AcWing
901
.
滑雪
--
记忆化搜索。
AcWing
901
.
滑雪
--
记忆化搜索 ...
赞
踩
article
RocketMQ
_
rocketmq
组件...
在某些版本中,
RocketMQ
允许消费者编写自定义的Java类来实现更复杂的过滤逻辑。优点:过滤逻辑的灵活性最大,可以实...
赞
踩
article
Hadoop
基础——
安装
指南
(
以
Linux
为例)_
linux
安装
hadoop
...
Hadoop
是一个由Apache基金会所开发的分布式系统基础架构,主要用于海量数据的存储和海量数据的分析计算。以下是关于...
赞
踩
article
【
神经网络
和
深度
学习
】
吴恩达
(Andrew Ng)- 第一课
第三周
课程编程
作业
_
吴恩达
神经网络
和
深度
...
一、综述 本文根据
吴恩达
老师
第三周
的
深度
学习
课程
的
课后编程
作业
来写
的
,其中涉及到
的
test_cases.py和plan...
赞
踩
article
大厂
开发
必知必会:
Devops
、
CI
/
CD
、
流水线
和Paas的关系解析说明_
devops
cicd
作...
定义:持续集成是一种软件
开发
实践,
开发
人员频繁地(通常每天)将代码集成到主干分支中。每次集成都通过自动化构建和测试来验证...
赞
踩
article
DevOps
发展趋势
分析之:
架构
篇_
devops
不仅仅
是
工具
链...
本文分析了
DevOps
的
发展趋势
,指出混合云基础
架构
将成为短期趋势,互联网+下的高可用性系统
架构
成为标配,微服务解耦型架...
赞
踩
article
ChatGLM
-
6B
_
swissarmytransformer
安装...
ChatGLM
-
6B
是一个开源的、支持中英双语的对话语言模型,基于架构,具有62 亿参数。结合模型量化技术,用户可以在...
赞
踩
article
目标
url
存在
host
头
攻击
漏洞_疑似
host
头
攻击
...
添加一个默认server,当
host
头被修改匹配不到server时会跳到该默认server。该默认 server 直接返...
赞
踩
article
【
Git
学习笔记_06】
第二章
Git
的配置(下)_
git
config
pull
.
rebase
...
本篇为《
Git
Version Control Cookbook》第2版
第二章
后半部分的学习笔记,主要介绍了
Git
变...
赞
踩
article
搞懂
mysql
索引
有
这
一篇就够(呕心狂写一万
字
,
保姆级
mysql
索引
技巧)_
mysql
索引
...
例如
,
这
里由sid、sname和age 3个
字
段构成的
索引
,
索引
行中就按sid/sname/age的顺序存放
,
索引
可以索...
赞
踩
article
Authentication
failed
;
nested
exception
is javax.m...
在Springboot项目中,遇到邮件发送时的
Authentication
FailedException,问题根源是使用...
赞
踩
article
力扣
mysql
刷题
记录
...
这篇博客
记录
了作者在LeetCode上刷题的经历,主要涉及MySQL数据库相关题目,包括通话次数统计、平均售价计算、库存...
赞
踩
article
Java
名字
的由来...
Java
作为当今最炙手可热的编程语言之一,它是从哪来的呢,为啥取
名字
叫
Java
,下面我们来和小伙伴们聊一聊吧大家都知道,...
赞
踩
article
华为
云
智能
开发助手
CodeArt
Snap
帮写
代码
,灵感弹指间
实现
...
提升模型
代码
生成能力最有潜力的方向之一是强化学习,针对现有基于强化学习的方法(如CodeRL,PPOCoder,RLTF...
赞
踩
相关标签
数据分析
git pull 错误
stable diffusion
AI作画
人工智能
美女
AIGC
注册域名
域名注册
edge浏览器
java
linux
spring boot
kafka
sql
算法
rocketmq
hadoop
大数据
python
神经网络
深度学习
devops
ci/cd
paas