贪吃蛇游戏
一直喜欢玩贪吃蛇，又想联系前端，感觉用js写网页版小游戏还蛮好的。
因此就去万能的b站找了个视频，就学着写了贪吃蛇的小游戏，自己玩起来感觉还算ok。
效果图片
效果
开始暂停
刷新随机产生食物位置
撞墙
代码实现
index.html
<!Doctype html><html lang="en"><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><head><meta charset="utf-8"><title>贪吃蛇小游戏</title><link rel="stylesheet" href="css/main.css"><script type="text/javascript" src="js/jquery.min.js"></script></head><body><div id="main"><h1>贪吃蛇小游戏</h1><input class="btn btn-begin" type="button" value="开始游戏" id="begin"><input class="btn btn-pause" type="button" value="暂停游戏" id="pause"> <span class="gtitle">第 <span id="gnum">1</span> 关</span><script type="text/javascript" src="js/game.js"></script></div></body></html>
main.css
body{margin: 0px;padding: 0px;}#main{margin: 100px;}.gtitle{font-size:25px;font-weight: bold;}/*设置关数的样式*/#gnum{font-size: 50px;color:#8B0000;}.btn{cursor: pointer;width: 100px;height: 40px;border-radius: 10px;color: #fff;}.btn-begin{background: lightseagreen;}.btn-begin:hover{background: cadetblue;font-weight: bold;}.btn-pause{background: brown;}.btn-pause:hover{background: orangered;font-weight: bold;}
game.js
var main=documeant.getElementById('main');//决定是否显示画布小格子，true则显示，false则不显示var showcanvas = true;//------------创建地图------------------------/** atom:原子* xnum:横向原子的数量* ynum:纵向原子的数量*/function Map(atom,xnum,ynum) {this.atom=atom;//20x20this.xnum=xnum;this.ynum=ynum;this.canvas=null;// -------------创建画布的方法-------------------this.create=function () {this.canvas=document.createElement('div');this.canvas.style.cssText='position:relative;top:40px;border:1px solid #808080;background:#eee;';//画布宽度this.canvas.style.width=this.atom * this.xnum +'px';//画布高度this.canvas.style.height=this.atom * this.ynum +'px';//将画布追加到div后main.appendChild(this.canvas);if(showcanvas){//循环显示出所有的画布小格子for(var i=0;i<xnum;i++){for(var j=0;j<ynum;j++){var a=document.createElement('div');a.style.cssText='border:1px solid #808080';a.style.width=this.atom +'px';a.style.height=this.atom +'px';a.style.background='#D3D3D3';this.canvas.appendChild(a);a.style.position='absolute';a.style.left=i * this.atom+'px';a.style.top=j * this.atom+'px';}}}}}//------------创建食物------------------------function Food(map) {//食物的宽高都应与地图的原子一样大this.width=map.atom;this.height=map.atom;//随机产生背景颜色this.bgcolor='rgb('+Math.floor(Math.random()*200)+','+Math.floor(Math.random()*200)+','+Math.floor(Math.random()*200)+')';this.x=Math.floor(Math.random()*map.xnum);this.y=Math.floor(Math.random()*map.ynum);//食物的标记------设计食物的样式this.flag=document.createElement('div');this.flag.style.width=this.width+'px';this.flag.style.height=this.height+'px';this.flag.style.background=this.bgcolor;this.flag.style.borderRadius='50%';this.flag.style.position='absolute';this.flag.style.left=this.x *this.width+'px';this.flag.style.top=this.y *this.height+'px';map.canvas.appendChild(this.flag);}//--------------创建蛇------------------------function Snake(map) {// 设置蛇的基本属性this.width=map.atom;this.height=map.atom;// 默认行走的方向this.direction='right';this.body=[{x:2,y:0},//蛇头{x:1,y:0},//蛇体{x:0,y:0}//蛇尾];// ---------------显示蛇--------------------this.display = function () {for(var i=0;i<this.body.length;i++){if(this.body[i].x !=null){var s =document.createElement('div');this.body[i].flag=s;// 设置蛇的样式s.style.width=this.width+'px';s.style.height=this.height+'px';s.style.borderRadius='50%';//设置随机背景颜色ss.style.background='rgb('+Math.floor(Math.random()*200)+','+Math.floor(Math.random()*200)+','+Math.floor(Math.random()*200)+')';s.style.position='absolute';s.style.left=this.body[i].x * this.width+'px';s.style.top=this.body[i].y * this.height+'px';map.canvas.appendChild(s);}}}//-----------------让蛇移动------------------this.run=function () {/*0{x:2,y:0},//蛇头1{x:1,y:0},//蛇体2{x:0,y:0},//蛇尾*///body的长度为3，就是将1的值赋给2.....for(var i=this.body.length-1;i>0;i--){this.body[i].x = this.body[i-1].x;this.body[i].y = this.body[i-1].y;}/** 第一次循环后* 0{x:2,y:0},1{x:1,y:0},2{x:1,y:0},*第二次循环后* 0{x:2,y:0},1{x:2,y:0},2{x:1,y:0},*///执行到0时，让其加1// this.body[0].y +=1;/*第二次循环后* 0{x:3,y:0},1{x:2,y:0},2{x:1,y:0},*///设置移动方向switch(this.direction){case 'left':this.body[i].x-=1;break;case 'right':this.body[i].x+=1;break;case 'up':this.body[i].y-=1;break;case 'down':this.body[i].y+=1;break;}//判断是否吃到食物if(this.body[0].x==food.x && this.body[0].y ==food.y){// 吃到食物后，蛇的长度应变一节this.body.push({x:null,y:null,flag:null});//吃到食物后，食物消失，并且要随机产生新的食物map.canvas.removeChild(food.flag);food =new Food(map);}//判断有没有出界，也就是有没有撞壁if(this.body[0].x<0 || this.body[0].x >map.xnum-1||this.body[0].y<0 || this.body[0].y>map.ynum-1){clearInterval(timer);alert('撞墙了');// 重新开始游戏restart(map,this);return false;}//判断是否和自己相撞for(var i=4;i<this.body.length;i++){if(this.body[0].x==this.body[i].x && this.body[0].y==this.body[i].y){clearInterval(timer);alert('撞到自己了');// 重新开始游戏restart(map,this);return false;}}//删除所有的，重新画for(var i=0; i<this.body.length; i++){if(this.body[i].flag != null) {//当吃到食物， flag是null, 且不能删除map.canvas.removeChild(this.body[i].flag);}}this.display();}}//重新开始游戏function restart(map,snake) {for (var i = 0; i < snake.body.length; i++) {map.canvas.removeChild(snake.body[i].flag);}// 清除掉蛇之后，需要再重新生成一个蛇snake.body = [{x: 2, y: 0},{x: 1, y: 0},{x: 0, y: 0}];snake.direction = 'right';snake.display();// 将食物也清除掉,然后再生成一个新食物map.canvas.removeChild(food.flag);food = new Food(map);}//-----------设置通关级别对象-------------//每升一级都提升一个速度function Level() {this.num=1;//第几关this.speed=300;//300毫秒，每升一关，原子数量减少20，速度加快this.slength=8;//每关的长度判断//设置级别this.set=function () {this.num++;if(this.speed <=50){//如果当前速度小于50，则最低速度也只能是50毫秒this.speed=50;}else{//速度加快this.speed-=50;}this.slength +=20;this.display();// 重新开始，加快速度start();}this.display=function () {$('#gunm').innerHtml=this.num;}}//------------------------------------------------var level=new Level();level.display();//调用Map()设置原子大小20，长方向的原子40格，宽方向原子20格var map=new Map(20,40,20);//调用创建画布方法map.create();//调用显示食物var food = new Food(map);//创建蛇对象,调用display()方法显示蛇var snake = new Snake(map);snake.display();window.onkeydown=function (event) {var ev=event ||window.event;// console.log(ev.keyCode);//键盘控制上下左右移动switch(event.keyCode){case 38://上//避免折返，这样只能拐弯返回if(snake.direction!='down'){snake.direction='up';}break;case 40://下if(snake.direction!='up'){snake.direction='down';}break;case 37://左if(snake.direction!='right'){snake.direction='left';}break;case 39://右if(snake.direction!='left'){snake.direction='right';}break;}}var timer;function start() {//清除定时器，这样可确保正常运行clearInterval(timer);//定时器timer=setInterval(function () {//调用蛇运动的方法，让蛇运动起来snake.run();},level.speed);}//----------开始游戏------------------$('#begin').click(function(){start();});// --------------暂停游戏------------------$('#pause').click(function(){//清除定时器，这样可确保正常运行clearInterval(timer);});
引用
b站视频
☺️
如果觉得《web前端之贪吃蛇网页版小游戏》对你有帮助，请点赞、收藏，并留下你的观点哦！
