貪吃蛇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.pswp.cn/news/445509.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/445509.shtml
英文地址,請注明出處:http://en.pswp.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;樹的遍歷實質上是將二叉樹的各個結…