前端三小时用html和js写一个贪吃蛇游戏，非常简单带讲解，代码可直接用，功能完整

目录

游戏主体部分--普通模式

游戏主体部分--地狱模式

游戏主页入口 预览图

游戏入口代码

1.html

2.css 

3.js 

注册页面代码

---

游戏实现很简单，只写游戏主体的话只要三小时就够了。

话不多说，我们直接来看效果预览。

转成gif图之后有点卡，但是游戏效果并不卡，非常流畅。 

简单描述一下这个游戏分为两种模式，普通模式和困难模式。
普通模式里面如果撞到墙会死，或者撞到自己也会死。

困难模式多设置了一些障碍物，如果撞到障碍物也会死，同时速度会更快，难度更大。

每个模式的界面下方都会记录一个当前得分和最高得分。

为了游戏的完整性，我还写了一个游戏的入口界面，和用户的注册界面。

代码的每一块都有注释。

如果需要完整压缩包的友友，请私信我，无偿免费。

游戏主体部分--普通模式

    
    
    
    
    
    



    

        开始游戏
    
    

    
    

        
当前得分：0 最高分：0
    
    

        游戏模式
        

        沉浸模式
    

游戏主体部分--地狱模式

别看这么长，其实他和普通模式相比只是多了几行代码，百分之九十九都是复制粘贴的。

    
    
    
    
    
    



    

        开始游戏
    
    

    
    

        
当前得分：0 最高分：0
    
    

        游戏模式
        

        沉浸模式
    

游戏主页入口 预览图

主体是一个登录按钮和轮播图 

轮播图里面写的是游戏规则。

每一张图都是我自己制作的，有需要可以私信我，这里就不放了，因为太多了。

游戏入口代码

1.html

    
    
    
    
    
    


    

        
        
点击注册
    
    

        

            

            

            

            

            

        
        

            

            

            

            

            

        
        <
        >
    
    

    
选择模式开始游戏吧
    

        
        
    
    

        
©版权所属：咸蛋dd 
Copyright2022.All Rights Reserved
联系我们：1761662039
    
    

2.css 

*{
    margin:0;
    padding:0;
    list-style:none;
}
img{
    width:800px;
    height:400px;
}
.wrap{
    width:800px;
    height:400px;
    position:relative;
    margin:0 auto;
    border:5px solid yellowgreen;
}
.list{
    width:700px;
    height:400px;
    position:relative;
}
.item{
    width:100%;
    height:100%;
    font-size:20px;
    opacity: 1;
    position:absolute;
    transition: all 2s;
}

.btn{
    width:50px;
    height:100px;
    top:150px;
    position:absolute;
    font-size:30px;
    border-radius: 30%;
    opacity: 0.5;
    border:0px;
    display:none;
    cursor: pointer;
    z-index: 100;
}
.item.active{
    z-index:99;
    opacity: 1;
}
#goPre{
    left:0px;
}
#goNext{
    right:0px;
    opacity: 1;
}
div:hover .btn{
    display:block;
}
.pointList{
    position: absolute;
    z-index: 1000;
    right:20px;
    bottom:20px;
}
.point{
    width:10px;
    height:10px;
    background-color:gray;
    border-radius: 100%;
    float:left;
    margin-left:15px;
    border-style:solid;
    border-width:2px;
    border-color:rgb(255, 255, 255, 0.6);
    cursor: pointer;
}
.point.active{
    background-color:rgb(0,0,0);
}

3.js 

var items=document.getElementsByClassName('item');
var points=document.getElementsByClassName('point');
var goPrebtn=document.getElementById('goPre');
var goNextbtn=document.getElementById('goNext');
var index=0;
var clearActive=function(){
    for(var i=0;i=items.length)
    index=0;
    goIndex();
}
goNextbtn.addEventListener('click',function(){
    goNext();
})

for(var i=0;i

注册页面代码

预览：

	
	
	
	



	
	

		
贪吃蛇账号-注册

		

			
			
			


			
			


			
			


			
			


			
			


			
			
			
		

	

以上就是关于贪吃蛇小游戏的全部内容了。