整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

html实现贪吃蛇

html实现贪吃蛇

么也不说了，直接上源码：


<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style>
 *{
 margin: 0;
 padding: 0;
 }
 #container{
 width: 1000px;
 height: 550px;
 border: 1px solid #000;
 margin: 100px auto;
 }
 #ground{
 width: 1000px;
 height: 500px;
 position: relative;
 }
 #button{
 float: right;
 height: 50px;
 line-height: 50px;
 }
 button{
 width: 50px;
 height: 20px;
 cursor: pointer;
 }
 .block{
 width: 20px;
 height: 20px;
 background: #2abad9;
 float: left;
 }
 .snakeBody{
 width: 20px;
 height: 20px;
 position: absolute;
 background: #f57926;
 }
 .food{
 width: 20px;
 height: 20px;
 background: green;
 position: absolute;
 }
 </style>
</head>
<body>
<div id="container">
 <div id="ground"></div>
 <div id="gameControl">
 <div id="button">
 <button id="start">开始</button>
 <button id="pause">暂停</button>
 </div>
 </div>
</div>
</body>
<script>
 var timer;
 window.onload=function(){
 createGrass();
 createSnake();
 createFood();
 document.getElementById('start').onclick=function(){
 clearInterval(timer); //防止多次点击开始
 timer=setInterval(function(){
 snakeMove(diRection);
 },150);
 snakeMove(diRection);
 };
 document.getElementById('pause').onclick=function(){
 clearInterval(timer);
 };
 };
 //创建草坪
 function createGrass(){
 var oGround=document.getElementById('ground');
 var oDiv;
 for(var i=0;i<50;i++){
 for(var j=0;j<25;j++){
 oDiv=document.createElement('div');
 oDiv.className='block';
 oGround.appendChild(oDiv);
 }
 }
 }
 //创建蛇
 var snakeBody=[],oFood,diRection='left';
 function createSnake(){
 var oGround=document.getElementById('ground');
 var oDiv;
 for(var i=0;i<3;i++){
 oDiv=document.createElement('div');
 oDiv.className='snakeBody';
 oDiv.style.left=(i+40)*20+'px';
 oDiv.style.top='60px';
 oGround.appendChild(oDiv);
 snakeBody.push(oDiv);
 }
 }
 //创建食物
 function createFood(){
 var flag=true; //该标识用于判断生成的div是否和蛇身div重合
 var oGround=document.getElementById('ground');
// var oDiv;
 var len=snakeBody.length;
 var iLeft,iTop;
 oFood=document.createElement('div');
 oFood.className='food';
 iLeft=parseInt(Math.random()*49)*20;
 iTop=parseInt(Math.random()*24)*20;
 for(var i=0;i<len;i++){
 if(snakeBody[i].offsetLeft==iLeft && snakeBody[i].offsetTop==iTop){ //可console.log(snakeBody[i]),其中是按照offsetLeft和offsetTop来确定方块位置的
 flag=false;
 break;
 }
 }
 if(flag==true){
 oFood.style.left=iLeft+'px';
 oFood.style.top=iTop+'px';
 oGround.appendChild(oFood);
 }else{
 createFood(); //若生成的div有重合则再次调用自身
 }
 }
 //蛇运动
 function snakeMove(direction){ //direction用于作为蛇移动的四个方向的判断
 var snakeHead=snakeBody[0]; //获取蛇头
 diRection=direction; //用于防止比如蛇身本来往左边走，但是向右按钮仍然有效的情况
 for(var i=snakeBody.length-1;i>0;i--){ //移动说白了就是后面的div使用它前一个div的位置
 snakeBody[i].style.left=snakeBody[i-1].offsetLeft+'px';
 snakeBody[i].style.top=snakeBody[i-1].offsetTop+'px';
 }
 switch (direction){ //蛇头的位置
 case 'left':snakeHead.style.left=snakeHead.offsetLeft-20+'px';break;
 case 'right':snakeHead.style.left=snakeHead.offsetLeft+20+'px';break;
 case 'up':snakeHead.style.top=snakeHead.offsetTop-20+'px';break;
 case 'down':snakeHead.style.top=snakeHead.offsetTop+20+'px';break;
 }
 //蛇头碰壁
 if(snakeHead.offsetLeft==-20 || snakeHead.offsetLeft==1000 || snakeHead.offsetTop==-20 || snakeHead.offsetTop==500){
 clearInterval(timer);
 if(confirm('再来一次?')){
 window.location.reload();
 }
 }
 //蛇碰到自身
 for(var j=1;j<snakeBody.length;j++){
 if(snakeHead.offsetLeft==snakeBody[j].offsetLeft && snakeHead.offsetTop==snakeBody[j].offsetTop){
 clearInterval(timer);
 if(confirm('再来一次')){
 window.location.reload();
 }
 }
 }
 //吃掉食物
 if(snakeHead.offsetLeft==oFood.offsetLeft && snakeHead.offsetTop==oFood.offsetTop){
 oFood.className='snakeBody snake-block'; //食物变成和蛇身一样的颜色
 console.log(snakeBody[snakeBody.length-1].offsetTop);
 switch (direction){ //把oFood的坐标采用最后一个div的坐标
 case 'left':oFood.style.left=snakeBody[snakeBody.length-1].offsetLeft+'px';break;
 case 'right':oFood.style.left=snakeBody[snakeBody.length-1].offsetLeft+'px';break;
 case 'up':oFood.style.top=snakeBody[snakeBody.length-1].offsetTop+'px';break;
 case 'down':oFood.style.top=snakeBody[snakeBody.length-1].offsetTop+'px';break;
 }
 snakeBody.push(oFood); //这里最好用push把吃掉的div添加到蛇尾,添加到头部有一个问题，吐过实物div是靠边生成，那么吃掉后会超出墙范围或者直接撞墙
 createFood();
 }
 }
 //上下左右操作
 document.onkeydown=function(e){ //document不要换成window，出滚动条的话，window会导致窗口移动
 var event=e || window.event;
 var direction=event.keyCode;
 switch (direction){
 case 37:
 if(diRection !='right'){
 snakeMove('left');
 }
 break; //左
 case 39:
 if(diRection !='left'){
 snakeMove('right');
 }
 break; //右
 case 38:
 if(diRection !='down'){
 snakeMove('up');
 }
 break; //上
 case 40:if(diRection !='up'){
 snakeMove('down');
 }
 break; //下
 }
 }
</script>
</html>

效果图：

.话不多，先瞅效果：

又在别的地方嫖到了这个效果研究了亿下下，制作过程如下（超详细）：

二.实现过程（源码在最后）：

1.定义canvas标签：

 <canvas id="canvas"></canvas>

2.基本css样式：

#canvas{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            box-shadow:  0 0 10px rgb(150, 150, 150);     
        }

position: absolute; 绝对定位。
top: 50%;
left: 50%;
transform: translate(-50%,-50%); 居中。
box-shadow: 0 0 10px rgb(150, 150, 150); 阴影。

3.开始js部分，获取标签：

var canvas=document.querySelector("#canvas");
var ctx=canvas.getContext('2d');

4.定义基本变量：

        //画布宽
        var wide=600;
        //画布高
        var high=600;
        // 变量，判断一次渲染中只识别按键一次
        var kd=0;
        //当前分数
        var fraction=0;
        //速度，就是执行定时器的时间参数
        var speed=250;
        // 蛇的初始颜色 红色
        var yanse=`red`;
        // 蛇数组，组成蛇的每一个方块
        var snake=[];
        // 食物数组
        var food={};
        // 蛇的移动方向，x轴：1为向右，-1为向左；y轴：1为向下，-1为向上 。不能斜着走，所以0为某轴无方向。
        var diretion={
            x:-1,
            y:0
        }
        // 给画布宽高赋值 打算画一个长宽都是30个20px的方块画布
        canvas.width=wide;
        canvas.height=high;

5. 初始化：

function chushi(){            
        //蛇初始长度为3个方块，位置如下（这个随意）
            for(let i=0;i<3;i++){
                snake.push({
                    x: i+10,
                    y: 10
                })
            }
            // 给食物一个随机位置和随机颜色
            food={
                x: parseInt(Math.random()*30),
                y: parseInt(Math.random()*30),
                color:`rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255})`
            }
        }

6. 绘制图形：

  // 绘制图形
        function draw(){
            // 绘制显示当前分数的文字
            ctx.fillStyle='rgba(255,255,255,0.5)';
                ctx.font="50px 仿宋";
                ctx.textAlign='center'; 
                ctx.fillText("你的分数为："+fraction+" 分",300,300);

             // 绘制方格，长宽都是30个，都是19px*19px的方格   
            for(let i=0;i<30;i++){
                for(let j=0;j<30;j++){
                    ctx.fillStyle='rgba(255, 255, 255,.3)';
                    ctx.fillRect(i*20,j*20,19,19);
                }
            }
              // 绘制蛇
            for(let i=0;i<snake.length;i++){
                temp=snake[i];
                ctx.fillStyle=yanse;
                ctx.fillRect(temp.x*20,temp.y*20,19,19);
                // 判断蛇头（第一个方块）是否与身体某个方块重合 ，就是头撞到身体
                if(temp.x==snake[0].x&&temp.y==snake[0].y&&i!=0){
                    // 游戏结束，重新给初始化
                    alert('游戏结束~点击确认再来一次~'); 
                    fraction=0;
                    snake.length=0;  
                    chushi();
                    
                }
            }
               // 绘制食物，绘制一个圆形
                ctx.beginPath();
                ctx.fillStyle=food.color;
                ctx.arc(food.x*20+9.5,food.y*20+9.5,7,0,Math.PI*2,false);
                ctx.stroke();
                ctx.fill();
                ctx.closePath();
      
               // 给蛇头绘制一个字符，☆ ，好区分头尾 ，也可省略
                ctx.fillStyle='yellow';
                ctx.font="15px 仿宋";
                ctx.textAlign="start";
                ctx.fillText("☆",snake[0].x*20+2,snake[0].y*20+14.5);
        }

7.更新位置：

 //更新
        function update(){
            // 建一个对象head，这个为蛇的新头，通过绘制新头，去掉尾部实现移动效果
            var head={};
            //判断蛇头是否遇到边界，到边界则在另一边重新绘制 x轴
            switch (snake[0].x+diretion.x){
                case -1: head.x=29;break;
                case 30: head.x=0;break;
                // 没到边界则为当前位置加方向
                default:  head.x=snake[0].x+diretion.x;
            }
           //判断蛇头是否遇到边界，到边界则在另一边重新绘制 y轴
            switch (snake[0].y+diretion.y){
                case -1: head.y=29;break;
                case 30: head.y=0;break;
                // 没到边界则为当前位置加方向
                default:  head.y=snake[0].y+diretion.y;
            }
            // 判断新蛇头是否与食物重合，就是吃到食物
           if(head.x==food.x&&head.y==food.y){
               //蛇的颜色为吃到食物的颜色
            yanse=food.color;
             // 重新给食物初始化
            food={
                x: parseInt(Math.random()*30),
                y: parseInt(Math.random()*30),
                color:`rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255})`
            }
            //在蛇尾添加一节
            let temp=snake[length-1];
            snake.push(temp);
            fraction+=1;
            // 吃完食物速度加快
            if(speed>80){
                //定时器间隔减10
                speed=speed-10;
                // 清除原来定时器，重新绘制
                clearInterval(time);
                 time=setInterval(function () {
                    kd=0;
                    ctx.clearRect(0, 0, wide, high);
                    update();
                    draw();

                }, speed);
            
            }
           
           }
            //添加新头
            snake.splice(0,0,head);
            //去掉尾部
            snake.pop();
                     
        }

8.判断点击键盘事件：

 //判断点击事件 
        document.addEventListener('keydown', event=>{
              switch (event.keyCode){
                  // 按了向上键
                  case 38:
                      // 判断当前不是向下移动与还没按过键，否则蛇会重叠
                      if(diretion.y!=1&&kd==0){
                          // 重新给移动方向赋值
                        diretion.x=0;
                        diretion.y=-1;
                        kd=1;
                      }
                      break;
                      // 下面以此类推一样的原理
                  case 39:
                      if(diretion.x!=-1&&kd==0){
                        diretion.x=1;
                        diretion.y=0;
                        kd=1;
                      }
                      break;
                  case 40:
                      if(diretion.y!=-1&&kd==0){                     
                      diretion.x=0;
                      diretion.y=1;
                      kd=1;
                      }
                      break; 
                  case 37:
                      if(diretion.x!=1&&kd==0){
                        diretion.x=-1;
                        diretion.y=0;
                        kd=1;
                      }
                      break;        

              }
        })

9.设置定时器，开始动画：

 chushi();    
            var time=setInterval(function(){
            kd=0;
            ctx.clearRect(0,0,wide,high);
            update();
            draw();      
        
        },speed);

三.完整代码：

avaScript写一个贪吃蛇的游戏（附源码）

javascript群内每日课题-今日课题：JavaScript写一个贪吃蛇的游戏

PS:最近群内很多伙伴想要做游戏学学，练练自己的JavaScript，所以今天做了小游戏，很多人都担心自己写的代码烂，而不敢去写代码，总想着等自己等写出好的代码再来做游戏，再来练习，其实我的意见是前端新人要多些烂代码，不管你在学习中还是工作中，你不写够足量的烂代码，是无法进化到写好代码的程度，所以练习吧骚年

如果想要更多的企业求职加分项目，案例，游戏源码，可以来一下我的前端群216634437，每天都会精挑细选一个特效，项目游戏出来详细讲解，分享！

JavaScript贪吃蛇代码：

1.body部分

2.style样式部分

3, JavaScript部分

想要练习这个游戏的进群领取源码：216634437（代码已经上传到群文件，自助下载练习）

头条号里有许多web前端学习视频，企业常用特效/案例/项目，敬请关注！

如果想看到更加系统的文章和学习方法经验可以关注我的微信公众号：‘web前端课程’关注后回复‘给我资料’可以领取一套完整的学习视频


在线咨询
上一篇：PHP 获取网页所有链接
下一篇：2020年最主流的软件测试工具汇总（含下载链接）

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 石家庄看香高人 白沙黎族自治县 京口区 江华瑶族自治县 召陵区 东营区 庐阳区 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com   www.hmttv.cn
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服