贪吃蛇js

python都学不懂,c++又不会,只能写写js来维持生活了。555555

js:

window.onload = function() {var wrap = document.getElementsByClassName("wrap")[0];var uls = document.getElementsByClassName("sbody")[0];var hand = document.getElementsByClassName("hand")[0];var food = document.getElementsByClassName("food")[0]; //食物var lis = document.getElementsByTagName("li");var fens = document.getElementById("fens");//让头部动起来//判断方向的标志var handT = false; //ture上false下var handL = false; //ture左false右//控制定时器频率的var seep = 200;//键盘方向标志var handCt = false; //t被按f没有var handTop = 180,handLeft = 180; //初始值var stime;//本体和框架的宽高var handW = 30,handH = 30;var wrapW = 900,wrapH = 600;hand.style.top = handTop + "px";hand.style.left = handLeft + "px";//食物闪动setInterval(function() {if(food.style.opacity == "1") {food.style.opacity = "0.3";} else {food.style.opacity = "1";}}, 600)//存储身体各位置数组//存储位置数组var arrL = [];var arrT = [];function handMove() {stime = setInterval(function() {foodPingk();//-----sbody位置刷新函数,要写在hand位置获得之前才行//不然会重叠,因为是每次头部最后再移动位移就会先跑到前面了for(var i = lis.length - 1; i > 0; i--) {lis[i].style.left = lis[i - 1].style.left;lis[i].style.top = lis[i - 1].style.top;}//判断键盘上上下按键if(handCt) {if(handT) {if(handTop <= 0) { //边缘碰撞检测handTop = wrapH - handH;} else {handTop -= 30;}} else {if(handTop >= (wrapH - handH)) {handTop = 0;} else {handTop += 30;}}//				console.log(handTop);hand.style.top = handTop + "px";} else {if(handL) {if(handLeft <= 0) {handLeft = wrapW - handW;} {handLeft -= 30;}} else {if(handLeft >= (wrapW - handW)) {handLeft = 0;} else {handLeft += 30;}}//				console.log(handLeft);hand.style.left = handLeft + "px";}//存储位置数组arrL = [];arrT = [];for(var i = 0; i < lis.length; i++) {arrL.push(lis[i].style.left);arrT.push(lis[i].style.top);}console.log(arrL);console.log(arrT);//是否自杀了zisha();}, seep)}//判断是否撞到自己的函数function zisha() {//如果数组头部第一个和arrT、arrL里其他重复就是是叠加了for(var i = 1; i < arrT.length; i++) {if(arrT[0] == arrT[i] && arrL[0] == arrL[i]) {fens.innerHTML = "游戏结束:" + fen + "分<br/>点击任意键返回";uls.style.zIndex = "0";fen = 0;fens.style.fontSize = "100px";fens.style.lineHeight = "120px";clearInterval(stime);uls.style.opacity = "0.2";document.addEventListener("keydown", function() {//点击任意键返回location.reload();}, false)}}}//------随机产生的食物的位置function getRandom(min, max) {return Math.floor(Math.random() * (max - min) + min);}//宽度30个,高度20个function foods() {//		food.style.backgroundColor = "rgba(" + getRandom(0, 255) + "," + getRandom(0, 255) + "," + getRandom(0, 255) + ",1)";var foodRandomT = getRandom(0, 20);var foodRandomL = getRandom(0, 30);//不把食物在身体上for(var i = 0; i < arrT.length; i++) {while(foodRandomT == arrT[i] && foodRandomL == arrL[i]) {foodRandomT = getRandom(0, 20);foodRandomL = getRandom(0, 30);i = 0;}}food.style.top = foodRandomT * 30 + "px";food.style.left = foodRandomL * 30 + "px";}foods();//-----本体碰撞框内检测function sbodyPingk() {//碰到上下检测if(handTop <= 0) {handTop = wrapH - handH;} else if(handTop >= (wrapH - handH)) {handTop = 0;}//碰到左右检测if(handLeft <= 0) {handLeft = wrapW - handW;} else if(handLeft >= (wrapW - handW)) {handLeft = 0;}}//-----食物碰撞监测var fen = 0;function foodPingk() {var foodW = 30,foodH = 30;var foodLeft = food.offsetLeft;var foodTop = food.offsetTop;var foodRight = foodLeft + foodW;var foodBottom = foodTop + foodH;//碰撞情况,完全重叠if(foodLeft == handLeft && handTop == foodTop) {shuaxin();}}//刷新的函数function shuaxin() {foods();if(fens.style.fontSize == "300px") {fens.style.fontSize = "50px";} else {fens.style.fontSize = "300px";}fen += 1;fens.innerHTML = fen;//增加一个var newLi = document.createElement("li");uls.appendChild(newLi);}//-----同样的键值按两次不触发var TkeyCode = true,TkeyOld = 0;//-----检测键盘document.addEventListener("keydown", function(e) {uls.style.opacity = "1";fens.style.zIndex = "0";fens.innerHTML = fen;fens.style.fontSize = "300px";var e = e || window.event;var keyCode = e.keyCode || e.which;if(TkeyOld == keyCode) {TkeyCode = false;} else {TkeyCode = true;}if(TkeyCode == true) {TkeyOld = keyCode;//每次进入重置定时器clearInterval(stime);//加速if(e.shiftKey) {seep -= 40;if(seep < 40) {seep = 60;}//				alert(seep);}//开始运动handMove();//重新开始,刷新页面if(e.altKey) {location.reload();}//如果正在向左或右运动,左右键无效,反之同样if(handCt == false) {switch(keyCode) {case 40: //下handCt = true;handT = false;break;case 38: //上handCt = true;handT = true;break;}} else {switch(keyCode) {case 37: //左handCt = false;handL = true;break;case 39: //右handCt = false;handL = false;break;}}}}, false)};

html

 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>贪食蛇</title>
</head>
<script type="text/javascript" src="js/index.js"></script>
<style type="text/css">
*{padding: 0;margin: 0;
}
li{list-style: none;
}.wrap{position: relative;width: 900px;height: 600px;margin: 100px auto 0;border: 10px red solid;background-color: rgba(0,0,0,0.7);z-index: 1;
}
.sbody{position: relative;z-index: 3;}
.sbody li{position: absolute;height: 30px;width: 30px;background-color: aqua;border-radius: 45%;}
.sbody li:last-child{background-color: pink;
}
.wrap .sbody .hand{background-color: lawngreen;border-radius: 5px;
}.food{position: absolute;height: 30px;width: 30px;background-color: yellow;border-radius: 50%;transition-duration: .6s;}
.fen{position: absolute;width: 100%;height: 100%;
}
.fen #fens{z-index: 2;position: absolute;top:50%;transform: translateY(-50%);display: block;line-height: 70px;transition-duration: .4s;width: 100%;/*height: 100%;*/font-size: 50px;text-align: center;/*color: lightpink;*/
}
/*#bg{position: absolute;width: 100%;height: 100%;}*/</style>
<body>
<!--游戏区域-->
<div class="wrap"><div class="fen"><span id="fens" style="font-size: 50px;">点击任意键开始游戏<br />按Shift加速<br />方向键控制移动<br />Alt键重新开始</span></div><!--<div id="bg"></div>--><!--食物--><div class="food" style="opacity: 1;"></div><!--本体--><ul class="sbody"><!--头部--><li class="hand"></li></ul>
</div><div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

 

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

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

相关文章

Android studio安装过程中入的坑的记录与记录

Android studio安装过程中入的坑的记录与记录 * 由于最近项目的需求&#xff0c;所以最近一直在配置安卓的开发环境&#xff0c;之前用的是Eclipse ADT的模式开发的&#xff0c;配置环境也花了一些时间&#xff0c;但是由于谷歌大力扶持它的亲儿子Android Studio&#xff0c;…

动态规划基础水题提纲

提纲 汉诺塔 汉诺塔&#xff1a;汉诺塔&#xff08;又称河内塔&#xff09;问题是源于印度一个古老传说的益智玩具。大梵天创造世界的时候做了三根金刚石柱子&#xff0c;在一根柱子上从下往上按照大小顺序摞着64片黄金圆盘。大梵天命令婆罗门把圆盘从下面开始按大小顺序重新…

数据结构课上笔记8

串的概念&#xff1a;串&#xff08;字符串&#xff09;&#xff1a;是由 0 个或多个字符组成的有限序列。 通常记为&#xff1a;s ‘ a1 a2 a3 … ai …an ’ ( n≥0 )。 串的逻辑结构和线性表极为相似。 一些串的类型&#xff1a; 空串&#xff1a;不含任何字符的串&#x…

数据结构课上笔记9

数组&#xff1a;按一定格式排列起来的具有相同类型的数据元素的集合。 二维数组&#xff1a;若一维数组中的数据元素又是一维数组结构&#xff0c;则称为二维数组。 同理&#xff0c;推广到多维数组。若 n -1 维数组中的元素又是一个一维数组结构&#xff0c;则称作 n 维数组…

pySerial -- Python的串口通讯模块

pySerial Overview This module encapsulates the access for the serial port. It provides backends for Python running on Windows, Linux, BSD (possibly any POSIX compliant system), Jython and IronPython (.NET and Mono). The module named “serial” automatica…

串的堆分配实现

今天&#xff0c;线性结构基本就这样了&#xff0c;以后&#xff08;至少是最近&#xff09;就很少写线性基础结构的实现了。 串的类型定义 typedef struct {char *str;int length; }HeapString; 初始化串 InitString(HeapString *S) {S->length0;S->str\0; } 长度 …

Numpy 入门

Numpy 入门 Numpy简介 官网链接&#xff1a;http://www.numpy.org/NumPy是Python语言的一个扩充程序库。支持高级大量的维度数组与矩阵运算&#xff0c;此外也针对数组运算提供大量的数学函数库 Numpy的基本功能 快速高效的多维数组对象ndarray用于对数组执行元素级计算以…

数据结构课上笔记10

树 树的定义&#xff1a;树(Tree)是 n(n≥0)个结点的有限集。若 n0&#xff0c;称为空树&#xff1b;若 n > 0&#xff0c;则它满足如下两个条件&#xff1a; (1) 有且仅有一个特定的称为根 (Root) 的结点&#xff1b; (2) 其余结点可分为 m (m≥0) 个互不相交的有限…

pandasStudyNoteBook

pandas 入门培训 pandas简介 - 官网链接&#xff1a;http://pandas.pydata.org/ - pandas pannel data data analysis - Pandas是python的一个数据分析包 , Pandas最初被作为金融数据分析工具而开发出来&#xff0c;因此&#xff0c;pandas为时间序列分析提供了很好的支持 …

最大搜索子树

给定一个二叉树的头结点&#xff0c;返回最大搜索子树的大小。 我们先定义结点&#xff1a; public static class Node {public int value;public Node left;public Node right;public Node(int data) {this.value data;}} 分析&#xff1a; 直接判断每个节点左边小右边大是…

二叉树最长路径

分析&#xff1a; 暴力求每一段距离也可。 对于以本节点为根的二叉树&#xff0c;最远距离有三种可能&#xff1a; 1&#xff09;最远路径来自左子树 2 &#xff09;最远路径来自右子树&#xff08;图示与左子树同理&#xff09; 3&#xff09;最远路径为左右子树距离根最远…

判断完全二叉树

完全二叉树的定义: 一棵二叉树&#xff0c;除了最后一层之外都是完全填充的&#xff0c;并且最后一层的叶子结点都在左边。 https://baike.baidu.com/item/%E5%AE%8C%E5%85%A8%E4%BA%8C%E5%8F%89%E6%A0%91/7773232?fraladdin 百度定义 思路&#xff1a;层序遍历二叉树 如果…

判断二叉搜索树

二叉查找树&#xff08;Binary Search Tree&#xff09;&#xff0c;&#xff08;又&#xff1a;二叉搜索树&#xff0c;二叉排序树&#xff09;它或者是一棵空树&#xff0c;或者是具有下列性质的二叉树&#xff1a; 若它的左子树不空&#xff0c;则左子树上所有结点的值均小于…

剑指offer_01

文章目录[toc]第一章 面试流程1.1 面试官谈面试1.2 面试3种形式1.3 面试的3个环节第一章 面试流程 1.1 面试官谈面试 初级的程序员谈算法和数据结构&#xff0c;高级的程序员谈项目经验要对公司近况和项目情况了解不要紧张&#xff0c;不要马上上手写代码 1.2 面试3种形式 …

判断平衡二叉树

平衡二叉树&#xff08;Balanced Binary Tree&#xff09;具有以下性质&#xff1a;它是一棵空树或它的左右两个子树的高度差的绝对值不超过1。并且左右两个子树都是一棵平衡二叉树 &#xff08;不是我们平时意义上的必须为搜索树&#xff09; 判断一棵树是否为平衡二叉树&am…

剑指offer_02

文章目录第二章 面试需要的基础知识1.1 面试官谈基础知识1.2 编程语言1.3 数据结构1.4 算法和数据操作第二章 面试需要的基础知识 1.1 面试官谈基础知识 数据结构和算法&#xff0c;编程能力&#xff0c;部分数学能力&#xff0c;问题分析和推理能力编程基础&#xff0c;计算…

求完全二叉树的结点个数

第一次见这个题&#xff0c;看时间小于O(N)。。。。。 只能是二分啊。 但是怎么二分&#xff0c;条件是什么&#xff0c;真的想不到。 后来知道了&#xff0c;我们要找最深一层最右边那个结点。借此确定结点个数。 我们知道&#xff0c;满二叉树的结点个数和深度是有公式的&a…

剑指offer_03

文章目录第三章 高质量代码1.1 面试官谈高质量代码1.2 代码的规范性1.3 代码的完整性1.4 代码的鲁棒性第三章 高质量代码 1.1 面试官谈高质量代码 代码应该考虑异常状况和垃圾回收问题&#xff0c;不能忽视边界情况变量&#xff0c;函数命名应该要统一&#xff0c;备注要恰到…

剑指offer_04

文章目录第四章 解决面试题的思路1.1 面试官谈面试思路1.2 画图让问题抽象化1.3 举例让抽象问题具体化1.4 分解让复杂问题具体化第四章 解决面试题的思路 1.1 面试官谈面试思路 编程前讲自己的思路是一项考核指标&#xff0c;不能一开始就变成&#xff0c;面试的时候应该和面…

先序中序后序两两结合重建二叉树

遍历是对树的一种最基本的运算&#xff0c;所谓遍历二叉树&#xff0c;就是按一定的规则和顺序走遍二叉树的所有结点&#xff0c;使每一个结点都被访问一次&#xff0c;而且只被访问一次。由于二叉树是非线性结构&#xff0c;因此&#xff0c;树的遍历实质上是将二叉树的各个结…