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

目录

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

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

游戏主页入口 预览图

游戏入口代码

1.html

2.css 

3.js 

注册页面代码


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

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

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

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

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

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

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

代码的每一块都有注释。

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

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





    
    
    
    Document
    
    



    

当前得分:0 最高分:0


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

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





    
    
    
    Document
    
    



    

当前得分:0 最高分:0


游戏主页入口 预览图

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

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

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

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

游戏入口代码

1.html




    
    
    
    Document
    
    


    
    

选择模式开始游戏吧

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

注册页面代码

预览:

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






	注册
	
	
	



	
	

贪吃蛇账号-注册












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

你可能感兴趣的:(web前端,游戏,前端,javascript,html)