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>
?