console
var body = document.getElementsByTagName("body")[0];
var t = body.offsetHeight;
var l = body.offsetWidth;
console.log(t,l);
var count = 0;
var st,sl;
var s_timer;
var sn = 15;
function createSnakeHead(){
st = createRandom(100,t-80,1)[0];
sl = createRandom(200,l-300,1)[0];
var sd = document.createElement("div");
sd.className = "snake-head";
sd.style = "top:"+st+"px;left:"+sl+"px;";
body.appendChild(sd);
}
function createFoods(n){
var fts = createRandom(20,t-20,n,6);
var fls = createRandom(20,l-20,n,6);
for(var i=0;i<n;i++){
var fd = document.createElement("div");
fd.className = "foods";
fd.style = "top:"+fts[i]+"px;left:"+fls[i]+"px;";
body.appendChild(fd);
}
}
function createRandom(min,max,n,s){
var arr = [];
var _arr = [];
var s = s ||1;
for(var i=min;i<max;i+=s){
arr.push(i);
}
arr.sort(function(){
return 0.5-Math.random();
});
for(var j=0;j<n;j++){
_arr.push(arr[j]);
}
return _arr;
}
function init(n){
count = 0;
var mt= ["left","right","up","under"];
var index = createRandom(0,mt.length,1)[0];
createSnakeHead();
createFoods(n);
var snakeHead = document.querySelector(".snake-head");
snakeHead.setAttribute("data-deg",mt[index]);
}
init(sn);
window.onkeydown=function(e){
var snakeHead = document.querySelector(".snake-head");
var deg = snakeHead.getAttribute("data-deg");
var e = e || window.event;
var n = e.keyCode;
switch(n){
case 37:
if(deg!="right"){
snakeHead.setAttribute("data-deg","left");
}
break;
case 38:
if(deg!="under"){
snakeHead.setAttribute("data-deg","up");
}
break;
case 39:
if(deg!="left"){
snakeHead.setAttribute("data-deg","right");
}
break;
case 40:
if(deg!="up"){
snakeHead.setAttribute("data-deg","under");
}
break;
}
}
function move(){
var snakeHead1 = document.querySelector(".snake-head");
var foods = document.querySelectorAll(".foods");
var deg = snakeHead1.getAttribute("data-deg");
var f = eat(snakeHead1,foods);
addBody(f);
var snakeBody = document.querySelectorAll(".snake-body");
var sbl = snakeBody.length;
follow(snakeHead1,snakeBody);
if(deg==="up"){
snakeHead1.style.top = snakeHead1.offsetTop-6 + "px";
}
if(deg==="under"){
snakeHead1.style.top = snakeHead1.offsetTop+6 + "px";
}
if(deg==="left"){
snakeHead1.style.left = snakeHead1.offsetLeft-6 + "px";
}
if(deg==="right"){
snakeHead1.style.left = snakeHead1.offsetLeft+6 + "px";
}
if(snakeHead1.offsetTop<=0||snakeHead1.offsetTop>=t-6||snakeHead1.offsetLeft<=0||snakeHead1.offsetLeft>=l-6){
clearInterval(s_timer);
alert("GAME OVER点击“确定”后点击鼠标左键重新开始");
clear(snakeHead1);
clear(foods);
clear(snakeBody);
init(sn);
}
if(foods.length===0){
clearInterval(s_timer);
alert("VICTORY点击“确定”后点击鼠标左键重新开始");
clear(snakeHead1);
clear(snakeBody);
init(sn+=5);
}
}
function eat(snakeHead,foods){
var isEat = false;
var len = foods.length;
var eat_st = snakeHead.offsetTop;
var eat_sl = snakeHead.offsetLeft;
for(var i=0;i<len;i++){
if(Math.abs(eat_st-foods[i].offsetTop)<6&&Math.abs(eat_sl-foods[i].offsetLeft)<6){
clear(foods[i]);
isEat = true;
}
}
return isEat;
}
function addBody(f){
if(f){
var sbody = document.createElement("div");
sbody.className = "snake-body";
body.appendChild(sbody);
}
}
function follow(shead,sbody){
var sb_len = sbody.length;
if(sb_len>0){
var i = sb_len-1;
while(i>0){
sbody[i].style = "top:"+ sbody[i-1].offsetTop +"px;left:"+ sbody[i-1].offsetLeft +"px;";
i--;
}
sbody[0].style="top:"+ shead.offsetTop +"px;left:"+ shead.offsetLeft +"px;";
}
return false;
}
document.onclick=function(){
if(count===0){
s_timer = setInterval(move,100.2548-sn+10);
count++;
}
document.getElementById("descr").style.display = "none";
}
function clear(ele){
var len = ele.length;
if(len===undefined){
ele.parentNode.removeChild(ele);
}else{
for(var i=0;i<len;i++){
ele[i].parentNode.removeChild(ele[i]);
}
}
}
<div id="descr">点击鼠标左键开始游戏!!! 用方向键↑ ↓ ← →控制运动方向!!!</div>
*{margin:0;padding:0}
html,body{width:100%;height:100%}
.snake-head,.foods{
position:absolute;
width:10px;
height:10px;
}
.snake-head{
animation:blink .8s infinite;
background:#09FF77;
}
@keyframes blink{
0%{
box-shadow: 0 0 1px 2px #09FF77;
}
50%{
box-shadow: 0 0 1px 2px #09FF7745;
}
100%{
box-shadow: 0 0 0 0 #09FF77;
}
}
.foods{
background:#000;
}
.snake-body{
position:absolute;
width:10px;
height:10px;
background: #f00;
}
.outer{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
#descr{
text-align: center;
color:#f00;
font-size:28px;
}