搜索
查看
编辑修改
首页
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
实现精细化工产业链创新,S2B2C模式助力数字化转型
2
Docker 离线下载镜像(本地)
3
SpringMVC快速入门
4
安全大讲堂 | 2022产业趋势洞察:网络安全的下一个十年
5
【数据结构(邓俊辉)学习笔记】栈与队列01——栈应用(栈混洗、前缀后缀表达式、括号匹配)
6
飞桨新一代框架3.0:“动静统一自动并行、大模型训推一体”等新特性构筑大模型时代核心生产力_百度飞桨3.0
7
<MySQL> 表的增删改查 - 基本查询_mysql数据库中,如何添加、查询、修改和删除数据表中的数据?
8
10 大 LLM 安全风险避雷!码住深度防御安全架构的构建方法论!
9
34k*16 薪,3年自动化测试历经3轮面试成功拿下华为Offer...._华为自动化测试技术面试
10
MySQL+Navicat安装教程_mysql与navicat安装
当前位置:
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>
声明:
本文内容由网友自发贡献,转载请注明出处:
【wpsshop】
推荐阅读
article
Python
与
PySpark
数据
分析
实战指南:解锁
数据
洞见_
data
analysis with...
【代码】
Python
与
PySpark
数据
分析
实战指南:解锁
数据
洞见_
data
analysis with pytho...
赞
踩
article
基于
ChatYuan
-
large
-
v2
语言
模型
Fine
-
tuning
微调训练 广告生成 任务...
本文基于
ChatYuan
-
large
-
v2
语言
模型
Fine
-
tuning
微调训练 广告生成 任务_
large
-
v2
...
赞
踩
article
build
.
gradle
常见
配置
方式_
build
gradle
配置
项...
本文详细介绍了使用Gradle编译Android App时的常见
配置
,包括如何在根目录的
build
.
gradle
中统一配...
赞
踩
article
【
TypeScript
】第五部分 小
项目
练习(
贪吃蛇
)_
typescript
实现
一个小
项目
...
【
TypeScript
】第五部分 小
项目
练习(
贪吃蛇
)文章目录【
TypeScript
】第五部分 小
项目
练习(
贪吃蛇
)5....
赞
踩
article
一文讲透
大
模型
RAG
_
rag
大
模型
...
大
型语言
模型
(LLMs)已经成为我们生活和工作的一部分,它们以惊人的多功能性和智能化改变了我们与信息的互动方式。然而,尽...
赞
踩
article
Chatglm2
-6B的
部署
_
chatglm2
-
6b
如何
运行
...
chatglm2
的
部署
_
chatglm2
-
6b
如何
运行
chatglm2
-
6b
如何
运行
...
赞
踩
article
华为
2025
届校
招
投递过程_
华为
校
招
流程...
简历一定要认真对待奥,每一项信息都填写准确~ 将自己的一些荣誉和竞赛也都填写下,因为后续筛选简历阶段是完全依赖于这份简历...
赞
踩
article
Python
大
数据处理
库
PySpark
实战
总结二_大
数据处理
库
pyspark
实战
pdf
下载...
Python
大
数据处理
库
PySpark
实战
二Pyspark建立Spark RDD
pyspark
shellVScode...
赞
踩
article
Pandas
库:从入门到应用(二)
--
行
列
数据
读写_
pandas
读取
列
...
本文深入探讨了
Pandas
库中如何选取和操作行
列
数据
,包括通过索引和条件获取单
列
、多
列
、单行、多行
数据
,以及利用loc、...
赞
踩
article
180
张超漂亮QQ
头像
打包
下载
...
网上搜集的非常漂亮的QQ
头像
,一共
180
多张,
打包
下载
,下面贴出部分截图:
打包
下载
http://www.brsbox...
赞
踩
article
Linux
服务器
升级
openssh
9.8
最新
版
全过程,及遇到问题处理_
openssh
最新
版
本...
由于2024年7月1日,
openssh
发布了
最新
版
9.8,所以
服务器
需要升级一下,特此做个详细记录:由于下载
最新
版
ope...
赞
踩
article
【
OD
统一
考试
(C卷)考生
抽中题
】分披萨(200 分)
,
用
C++
编码
,
速通_
od
统一
考试
(
c
卷)...
本文介绍了华为
OD
机试中的一道编程题——分披萨
,
要求根据规则找出使"吃货"获得最大披萨总和的策略。题目描述了输入输出格式...
赞
踩
article
教你如何用
Python
轻轻松松操作
Excel
、
Word
、
CSV
,一文就够了,赶紧码住!!!_pyth...
xlrd:用于读取
Excel
文件;xlwt:用于写入
Excel
文件;xlutils:用于操作
Excel
文件的...
赞
踩
article
Pandas
查找特定行
_
pandas
查找
固定值
行号...
import numpy as npimport
pandas
as pdimport randomrnd
_
1 = [r...
赞
踩
article
TOMCAT
异常
退出
分析和解决方法
_
tomcat
报错然后
关闭
...
最近遇到一个很诡异的问题,远程登录服务器,本来是想查看一下Tomcat的运行情况,结果用鼠标把窗体一拖,Tomcat居然...
赞
踩
article
host
头
攻击...
原因一般而言,几个网站以共享的方式宿驻在同一台web服务器之上,或者几个web应用程序共享同一个IP地址,这都是业界一些...
赞
踩
article
Python
爬虫
下载
收费
音乐
_
爬虫
音乐
下载
代码...
#!/usr/bin/env python3# -*- coding: utf-8 -*-# @Time : 2020/...
赞
踩
article
RocketMQ
消费者
是如何
获取
消息
的?实战案例_
rocketmqtemplate
消费者
获取
消息
k...
本文介绍了容器化技术的发展,从物理机、虚拟机到容器化时代的演进,重点讲解了Docker的出现及其重要性。内容包括Dock...
赞
踩
article
matlab
多元
多项式
线性
回归
,MATLAB用
regress
作
多元
非
线性
回归
| 学步园...
本文介绍了如何使用MATLAB的
regress
函数进行
多元
非
线性
回归
分析,通过实例展示了如何对一个
多项式
进行拟合,并得到...
赞
踩
article
Android
开发常用
缩写
_
android
缩写
...
celisca Center for Life Science AutomationIDE Integrated Dev...
赞
踩
相关标签
python
数据分析
开发语言
语言模型
人工智能
自然语言处理
javascript
typescript
前端
chatgpt
学习
agi
知识图谱
华为
求职招聘
数据库
spark
pyspark
算子
pandas
qq
c