衡水网站建设_智能建站系统怎么更换网站模板_百度营消营销推广_进入百度首页官网

一、HTML代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./../css/index.css">
</head>
<body><div class="container"><!-- 开始按钮 --><button class="start"></button><!-- 暂停按钮 --><button class="pause"></button></div><script src="../js/config.js"></script><script src="../js/index.js"></script>
</body>
</html>

二、css代码

html,body{margin: 0;padding:0 ;
}
/*容器样式*/
.container{width: 600px;height: 600px;background: #225675;border: 20px solid #7dd9ff;margin: 100px auto;position: relative;
}
/*按钮公共样式*/
button{border:none;outline: none;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);
}
/*开始按钮*/
.start{width: 200px;height: 200px;background: url(./../img/start.webp) center no-repeat;background-size: 100% 100%;display: block;
}
/*暂停按钮*/
.pause{width: 80px;height: 80px;background: url(./../img/b.webp) center no-repeat;background-size: 100% 100%;display: none;
}

三、JS代码

1.index.js

//绘制蛇的方法
function drawSnake(snake){for(var i=0;i<snake.snakePos.length;i++){if(!snake.snakePos[i].domConent){// 如果进入此if，说明是第一次创建蛇snake.snakePos[i].domConent=document.createElement("div");snake.snakePos[i].domConent.style.position="absolute";snake.snakePos[i].domConent.style.width=snakeBody+"px";snake.snakePos[i].domConent.style.height=snakeBody+"px";snake.snakePos[i].domConent.style.left=snake.snakePos[i].x*snakeBody+"px";snake.snakePos[i].domConent.style.top=snake.snakePos[i].y*snakeBody+"px";if(snake.snakePos[i].flag==='head'){//进入此if说明是蛇头snake.snakePos[i].domConent.style.background=`url("../img/a.webp") center/contain no-repeat`;//根据方向进行旋转switch(snake.direction.flag){case "top":{snake.snakePos[i].domConent.style.transform=`rotate(-90deg)`;break;}case "bottom":{snake.snakePos[i].domConent.style.transform=`rotate(90deg)`;break;}case "left":{snake.snakePos[i].domConent.style.transform=`rotate(180deg)`;break;}case "right":{snake.snakePos[i].domConent.style.transform=`rotate(0deg)`;break;}}}else{//说明是蛇身snake.snakePos[i].domConent.style.background="#e69009";snake.snakePos[i].domConent.style.borderRadius="50%"}}//需要将创建的DOM 元素添加到容器当中document.querySelector(".container").append(snake.snakePos[i].domConent)}
}//绘制食物的方法
function drawFood(){//1.食物是随机的//2.食物不能再蛇头或蛇身的位置while(true){//构成一个死循环，直到生成符合要求的食物坐标才能退出var isRepeat=false//默认生成的坐标是符合要求的//随机生成一个坐标food.x=Math.floor(Math.random()*tr+0)food.y=Math.floor(Math.random()*tr+0)//查看是否符合要求for(var i=0;i<snake.snakePos.length;i++){if(snake.snakePos[i].x===food.x&&snake.snakePos[i].y===food.y){//当前生成的食物，和蛇的坐标冲突了isRepeat = true;break; //跳出for循环}}if(!isRepeat){break;//跳出while循环}}//整个while循环跳出来以后u，食物的坐标一定是ok的if(!food.domConent){food.domConent = document.createElement("div")food.domConent.style.width = snakeBody+"px";food.domConent.style.height = snakeBody+"px";food.domConent.style.position = "absolute";food.domConent.style.background=`url("../img/apple.webp") center/contain no-repeat`;document.querySelector(".container").append(food.domConent);}food.domConent.style.left = food.x * snakeBody + "px";food.domConent.style.top = food.y * snakeBody + "px";
}// 初始化游戏
function initGame(){// 1.初始化地图for(var i=0;i<tr;i++){for(var j=0;j<td;j++){gridData.push({x:j,y:i})}}// console.log(gridData) //2.绘制蛇drawSnake(snake);//3.绘制食物 drawFood()
}
// 碰撞检测
function isCollide(newHead){var collideCheckInfo={isCollide:false,  //是否碰撞墙壁蛇身isEat:false       //是否迟到食物}// 是否碰到墙壁if(newHead.x<0||newHead.x>=td||newHead.y<0||newHead.y>=tr){collideCheckInfo.isCollide =true;return collideCheckInfo;}//检测是否碰到自己for(var i=0 ; i<snake.snakePos.length;i++){if(snake.snakePos[i].x === newHead.x && snake.snakePos[i].y===newHead.y){collideCheckInfo.isCollide=true;return collideCheckInfo;}}// 检测是否吃到东西if(newHead.x === food.x&&newHead.y===food.y){collideCheckInfo.isEat =true;score++;  //分数自增}return collideCheckInfo;
}// 蛇的移动
function snakeMove(){var oldHead =snake.snakePos[snake.snakePos.length-1]//根据方向计算出新的蛇头坐标var newHead ={domConent:"",x : oldHead.x + snake.direction.x,y : oldHead.y + snake.direction.y,flag:"head",}// 首先先进行碰撞检测，看计算出来的新的蛇头有没有碰上食物，蛇身体，墙壁var collideCheckResult= isCollide(newHead);if(collideCheckResult.isCollide){//说明碰墙le// console.log("碰墙")if(window.confirm(`游戏结束，您当前的得分为${score}分，是否要重新开始游戏`)){//重新开始游戏// console.log("重新开始游戏")document.querySelector(".container").innerHTML=`<!-- 开始按钮 --><button class="start" style="display:none"></button><!-- 暂停按钮 --><button class="pause" style="display:none"></button>`;score =0;snake ={//设一开始移动的方向direction:directionNumber.right,//蛇的初始位置snakePos:[{x:0,y:0,domConent:"",flag:"body"},{x:1,y:0,domConent:"",flag:"body"},{x:2,y:0,domConent:"",flag:"body"},{x:3,y:0,domConent:"",flag:"head"}]};food = {x:0 , y:0  ,domConent:""};initGame();}else{//结束游戏document.onkeydown = null;clearInterval(timerStop)// console.log("取消游戏")}return;}//将旧的头修改为身体oldHead.flag = "body";oldHead.domConent.style.background ="#e69009";oldHead.domConent.style.borderRadius ="50%";snake.snakePos.push(newHead);// 判段是否吃到东西if(collideCheckResult.isEat){//重新生成新的食物drawFood();}else{//没有吃到，移除最后一个document.querySelector(".container").removeChild(snake.snakePos[0].domConent)snake.snakePos.shift();}// 重新绘制蛇drawSnake(snake);
}//
function startGame(){timerStop = setInterval(function(){snakeMove()},time)
}// 绑定事件
function bindEvent(){// 首先是键盘事件，用户按上下左右，蛇可以移动document.onkeydown = function(e){// console.log(e.key)if((e.key === "ArrowUp" || e.key.toLocaleLowerCase() === "w")&&snake.direction.flag !== "bottom"){//用户按下上建snake.direction=directionNumber.top;event.preventDefault(); // 阻止方向键默认行为（如页面滚动）}if((e.key === "ArrowDown" || e.key.toLocaleLowerCase() === "s")&&snake.direction.flag !=="top"){//用户按下下建snake.direction=directionNumber.bottom;event.preventDefault(); // 阻止方向键默认行为（如页面滚动）}if((e.key === "ArrowLeft" || e.key.toLocaleLowerCase() === "a")&&snake.direction.flag !== "right"){//用户按下左建snake.direction=directionNumber.left;event.preventDefault(); // 阻止方向键默认行为（如页面滚动）}if((e.key === "ArrowRight" || e.key.toLocaleLowerCase() === "d")&&snake.direction.flag !== "lefts"){//用户按下右建snake.direction=directionNumber.right;event.preventDefault(); // 阻止方向键默认行为（如页面滚动）}// snakeMove();}//2.计时器自动调用蛇移动的方法startGame();//3.点击整个容器的时候可以暂停和重新开始游戏document.querySelector(".container").onclick = function(e){//这里是通过事件委托的形式，判断用户究竟点击的时候container容器还是暂停按钮，从而做出不同的操作if(e.target.className === "container"){//做暂停操作document.querySelector(".pause").style.display = 'block';clearInterval(timerStop);}else{//恢复游戏操作document.querySelector(".pause").style.display = 'none';startGame();}	}
}
// 主方法
function main(){//用户点击了开始游戏之后，再做后续的工作document.querySelector(".start").onclick= function(e){e.stopPropagation();document.querySelector(".start").style.display="none"//1.初始化游戏initGame();// 2.绑定事件bindEvent();}}
main();

2.config.js(游戏相关设置)

// 游戏相关的配置var gridData = [];//存储地图对象
// 整个网格的行与列
var tr = 30;
var td = 30;//蛇的身体大小
var snakeBody = 20;// 新的蛇头和旧的蛇头之间的关系
var directionNumber={// 我们在确定新的蛇头的时候，会拿下面的对象和旧蛇头做一个计算,从而得出新蛇头的位置left:{x:-1,y:0,flag:"left"},right:{x:1,y:0,flag:"right"},top:{x:0,y:-1,flag:"top"},bottom:{x:0,y:1,flag:"bottom"}
}//蛇相关的配置信息
var snake ={//设一开始移动的方向direction:directionNumber.right,//蛇的初始位置snakePos:[{x:0,y:0,domConent:"",flag:"body"},{x:1,y:0,domConent:"",flag:"body"},{x:2,y:0,domConent:"",flag:"body"},{x:3,y:0,domConent:"",flag:"head"}]
}
//食物的相关配置信息
var food = {x:0 , y:0  ,domConent:""
}
//游戏分数
var  score= 0
//停止计时器
var timerStop = null
//计时器事件
var time=100

衡水网站建设_智能建站系统怎么更换网站模板_百度营消 营销推广_进入百度首页官网

一、HTML代码

二、css代码

三、JS代码

1.index.js

2.config.js(游戏相关设置)

衡水网站建设_智能建站系统怎么更换网站模板_百度营消营销推广_进入百度首页官网