商洛网站制作,wordpress英文主题破解版,四网一体网站建设方案,织梦的手机端网站模板下载功能描述#xff1a;每走10步随机改变一个方方向#xff0c;当键盘按下方向键 w,s,a,d时#xff0c;使用键盘方向控制蛇的移动#xff0c;蛇头每撞到一次自身时改变屏幕颜色#xff0c;蛇头碰到边界时从另一边回来。
实现思路#xff1a;用个30大小的数组存放每个结点每走10步随机改变一个方方向当键盘按下方向键 w,s,a,d时使用键盘方向控制蛇的移动蛇头每撞到一次自身时改变屏幕颜色蛇头碰到边界时从另一边回来。
实现思路用个30大小的数组存放每个结点蛇头结点根据当前方向移动数组中其他结点的值依次换成上一个结点的值。
效果展示
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
bodyscriptconst NORTH 0;const SOUTH 1;const WEST 2;const EAST 3;const NODE_LENGTH 50;const MAX_LENGTH 30;const CURRENT_LENGTH 30;const SPEED 50;const SCREEN_WIDTH window.innerWidth;const SCREEN_HEIGHT window.innerHeight;var x0;var y0;var head 0;var tail MAX_LENGTH - 1;var body [];var direction 1;var count 0;var touchSelfCnt 0;var colorArray [red,orange,yellow,green,#025CBD,#05BC67,#6C6783,#766783,#836783,#836776,white];var KEY_CONTROL_FLAG 0;for (var i 0; i MAX_LENGTH ; i) {console.log();var element document.createElement(span);element.id i;element.style.position absolute;element.style.left i*NODE_LENGTHpx;element.style.top 0;element.style.background black;element.style.border2px solid red;element.style.widthNODE_LENGTHpx;element.style.heightNODE_LENGTHpx;var docBody document.body;docBody.appendChild(element);body[i] {x:i*NODE_LENGTH,y:0,element:element};console.log(element);}console.log(SCREEN_WIDTH,SCREEN_HEIGHT);document.addEventListener(keydown,function (event) {KEY_CONTROL_FLAG 1;switch (event.keyCode) {case 87:direction NORTH;break;case 83:direction SOUTH;break;case 65:direction WEST;break;case 68:direction EAST;break;default:break;}});function move(){if(count%100 KEY_CONTROL_FLAG0){direction Math.floor(Math.random()*4)}console.log(direction,direction);switch (direction) {case NORTH:y-SPEED;break;case SOUTH:ySPEED;break;case WEST:x-SPEED;break;case EAST:xSPEED;break;default:break;}if (x (SCREEN_WIDTH-NODE_LENGTH)) {x 0;}else if (y SCREEN_HEIGHT-NODE_LENGTH) {y 0;}else if (x 0) {x SCREEN_WIDTH-NODE_LENGTH;}else if (y 0) {y SCREEN_HEIGHT-NODE_LENGTH;}body[0] {x:x,y:y};// console.log(x,y,direction,x,y,direction)//判断有没有撞到自己for (var i 1; i body.length ; i) {if(body[i].x x body[i].yy){document.body.style.background colorArray[touchSelfCnt%11];touchSelfCnt;document.body.appendChild(div);}}}function drawSnake(){for (var i body.length-1; i 0 ; i--) {body[i] body[i-1];}for (var i 0; i body.length ; i) {var element document.getElementById(i);element.style.left body[i].xpx;element.style.top body[i].ypx;}}setInterval(function () {move();drawSnake();count;},100)
/script
/body
/html
