Html Canvas JavaScript自制贪吃蛇小游戏

最新推荐文章于 2025-03-31 16:14:10 发布
晨易夕
最新推荐文章于 2025-03-31 16:14:10 发布
阅读量255
点赞数
分类专栏：小玩意文章标签： javascript html5 canvas 网页游戏
本文链接：https://blog.youkuaiyun.com/qq_28194303/article/details/108381086
版权
小玩意专栏收录该内容
6 篇文章
订阅专栏
本博客介绍了一个使用单个HTML文件实现的贪吃蛇游戏，游戏支持速度调节和随机大小的食物，通过HTML、CSS和JavaScript实现，包括游戏逻辑、用户界面设计和交互控制。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
单文件html，直接复制可用。
可调节速度和随机大小食物。
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Snake</title>
    <style>
        .text{
            width: 100%;
            line-height: 30px;
            height: 30px;
            font-size: 16pt;
            text-align: center;
        }
        canvas{
            display: block;
            margin: 30px auto;
            border: solid;
            border-width: 1px;
            border-color:rgb(51, 51, 51);
            box-shadow: 0 0 12px 2px rgba(51, 51, 51, 0.8);
            
        }
        .slider-contain{
            text-align: center;
            position: relative;
        }
        .slider-bar{
            display: inline-block;
            height: 8px;
            width: 300px;
            background-color: rgb(218, 218, 218);            
            border: solid;
            border-color: rgb(218, 218, 218);            
            border-width: 1px;
            box-shadow: 0 0 8px 2px rgba(97, 97, 97, 0.8);
        }
        .slider-block{
            position: absolute;
            height: 23px;
            width: 10px;
            background-color: rgb(8, 85, 8);
            margin-top: -7px;
            cursor: pointer;
        }
        
    </style>
</head>
<body>
    <div class="text" id="score">0</div>
    <canvas id="canvas"></canvas>    
    <div class="slider-contain">     
        <abbr title="拖动调节速度">     
            <div class="slider-bar">
                <div class="slider-block"></div>
            </div>  
        </abbr>                                  
    </div>    
    <br><br>
    <div class="text">
        上下左右控制方向
    </div>    
    <div class="text">
        F5重新开始|空格暂停/继续
    </div>    
</body>
    
<script>


const direction={
    UP:0,
    RIGHT:1,
    DOWN:2,
    LEFT:3
}

var snake={
    color:'#04573D',
    headColor:'#211E1E',
    size:10,
    length:3,
    direction:direction.RIGHT,
    speed:100,// 200ms/move 1 time  200-50
    body:[
        {x:25,y:145},
        {x:15,y:145},
        {x:5,y:145}
    ],//每一节身体的位置
    tail:[]//记录所有的尾巴,以便吃到食物后增长，按食物大小增长长度    
}

var food={
    color:'#8F401F',
    size:10,
    position:{x:200,y:200},//食物出现的位置
}

var map={
    color:'#868686',
}

var Game=function(){
    this.score=0;//计分
    this.isDealControl=true;//是否处理了方向控制
    this.pause=false;//游戏暂停
    this.direction=direction;//方向枚举
    this.snake=snake;//蛇
    this.food=food;//食物
    this.map=map;    //地图
    this.canvas=document.getElementById('canvas');
    this.canvas.width = 300;
    this.canvas.height = 300;
    this.cxt=this.canvas.getContext("2d");

    let speed=localStorage.getItem("snake_speed");
    if(speed)
        this.snake.speed=parseInt(speed);
    else
        localStorage.setItem('snake_speed',this.snake.speed);    
    this.init();
    this.draw_map();
    this.create_food();
    window.onkeyup=this.control.bind(this);
}

Game.prototype.draw_map=function(){        
    this.cxt.fillStyle=this.map.color;
    this.cxt.fillRect(0,0,this.canvas.width,this.canvas.height);    
}
Game.prototype.reset_map=function(){
    this.cxt.clearRect(0,0,this.canvas.width,this.canvas.height);
    this.draw_map(); 
    this.draw_snake(); 
    this.draw_food();  
}
Game.prototype.draw_snake=function(){      
    for(var i in this.snake.body){
        if(i==0)//头部        
            this.cxt.fillStyle=this.snake.headColor;                    
        else
            this.cxt.fillStyle=this.snake.color;        
        this.cxt.fillRect(this.snake.body[i].x-this.snake.size/2,this.snake.body[i].y-this.snake.size/2,this.snake.size,this.snake.size);
    }            
}
Game.prototype.create_food=function(){
    this.food.size=10+Math.round(Math.random()*20);
    this.food.position.x=Math.round(Math.random()*this.canvas.width);
    this.food.position.y=Math.round(Math.random()*this.canvas.height);
    if(this.food.position.x<this.food.size/2)this.food.position.x=this.food.size/2;
    if(this.food.position.y<this.food.size/2)this.food.position.y=this.food.size/2;
    if(this.food.position.x>this.canvas.width-this.food.size/2)this.food.position.x=this.canvas.width-this.food.size/2
    if(this.food.position.y>this.canvas.height-this.food.size/2)this.food.position.y=this.canvas.height-this.food.size/2
}
Game.prototype.draw_food=function(){
    this.cxt.fillStyle=this.food.color;
    this.cxt.fillRect(this.food.position.x-this.food.size/2,this.food.position.y-this.food.size/2,this.food.size,this.food.size);
}
Game.prototype.move=function(){
    const json=JSON.stringify(this.snake.body);    
    const oldbody=JSON.parse(json);
    this.snake.tail.push(oldbody[oldbody.length-1]); 
    //续上尾巴个数
    let tailCount=1;
    //每截身体移动：头部移动，之后的每一节=前一节    
    for(var i=0;i<this.snake.length;i++){
        if(i==0)
        {
            switch(this.snake.direction){
                case direction.UP:this.snake.body[i].y-=this.snake.size;break;
                case direction.RIGHT:this.snake.body[i].x+=this.snake.size;break;
                case direction.DOWN:this.snake.body[i].y+=this.snake.size;break;
                case direction.LEFT:this.snake.body[i].x-=this.snake.size;break;
            }            
        }
        else{
            if(i<this.snake.body.length){
                this.snake.body[i]=oldbody[i-1]              
            }else{
                this.snake.body[i]=this.snake.tail[this.snake.tail.length-tailCount]
                tailCount++;
            }
        }                             
    } 
    this.isDealControl=true;   
    //碰撞检测
    //碰撞墙壁
    if(this.snake.body[0].x-this.snake.size/2<0||this.snake.body[0].x+this.snake.size/2>this.canvas.width||this.snake.body[0].y-this.snake.size/2<0||this.snake.body[0].y+this.snake.size/2>this.canvas.height){
        return false;      
    }   
    //碰撞自己 xy均有重叠
    for(var i=1;i<this.snake.body.length;i++) {        
        if(
        Math.abs(this.snake.body[0].x - this.snake.body[i].x) < this.snake.size/2 + this.snake.size/2
        &&
        Math.abs(this.snake.body[0].y - this.snake.body[i].y) < this.snake.size/2 + this.snake.size/2
        ){
            return false;
        }        
    }
    //碰撞食物
    if(
      Math.abs(this.snake.body[0].x - this.food.position.x) < this.snake.size/2 + this.food.size/2
      &&
      Math.abs(this.snake.body[0].y - this.food.position.y) < this.snake.size/2 + this.food.size/2
    ){
      this.create_food();
      this.snake.length+=Math.ceil(this.food.size/this.snake.size);
      this.score+=this.food.size;
    }
    return true;
}
Game.prototype.control=function(e){
    if(!this.isDealControl)
        return;
    switch(e.keyCode){
        case 37:if(this.snake.direction!==direction.RIGHT){this.snake.direction=direction.LEFT;this.isDealControl=false;}break;
        case 38:if(this.snake.direction!==direction.DOWN){this.snake.direction=direction.UP;this.isDealControl=false;}break;
        case 39:if(this.snake.direction!==direction.LEFT){this.snake.direction=direction.RIGHT;this.isDealControl=false;}break;
        case 40:if(this.snake.direction!==direction.UP){this.snake.direction=direction.DOWN;this.isDealControl=false;}break;
        case 32:
            this.pause=!this.pause;
            if(!this.pause)this.go();           
            break;
    }
}
Game.prototype.init=function(){
    let that=this;
    let slider_bar=document.getElementsByClassName('slider-bar')[0];
    let slider_block=document.getElementsByClassName('slider-block')[0];
    let moveX; 
    slider_block.style.left = (slider_bar.offsetLeft+(200-this.snake.speed)*2)+'px';
    slider_block.onmousedown=function(event){
        var event = event || window.event;
        var diffX = event.clientX - slider_block.offsetLeft;
        var diffY = event.clientY - slider_block.offsetTop;
        if(typeof slider_block.setCapture !== 'undefined'){
            slider_block.setCapture(); 
        }           
        document.onmousemove = function(event){
            var event = event || window.event;
            moveX = event.clientX - diffX;
            if(moveX<slider_bar.offsetLeft)
                moveX=slider_bar.offsetLeft;
            if(moveX>slider_bar.offsetLeft+slider_bar.offsetWidth)
                moveX=slider_bar.offsetLeft+slider_bar.offsetWidth
            // var moveY = event.clientY - diffY;
            if(moveX < 0){
                moveX = 0
            }else if(moveX > window.innerWidth - slider_block.offsetWidth){
                moveX = window.innerWidth - slider_block.offsetWidth
            }
            // if(moveY < 0){
            //     moveY = 0
            // }else if(moveY > window.innerHeight - slider_block.offsetHeight){
            //     moveY =  window.innerHeight - slider_block.offsetHeight
            // }
            slider_block.style.left = moveX + 'px';
            // slider_block.style.top = moveY + 'px'
        }
        document.onmouseup = function(event){
            this.onmousemove = null;
            this.onmouseup = null;
            //value:0-300  speed:200-50
            let value=moveX-slider_bar.offsetLeft;
            let speed=200-value*0.5;
            localStorage.setItem('snake_speed',speed);
            that.snake.speed=speed;
            //低版本ie bug  
            if(typeof slider_block.releaseCapture!='undefined'){  
                slider_block.releaseCapture();  
            }  
        }
    }
            
}
Game.prototype.go=function(){
    if(!this.move())
    {                
        alert('你没了');
        return
    }
    this.reset_map();
    //计分
    document.getElementById('score').innerHTML=this.score;
    if(this.pause)return;
    setTimeout(() => {
        this.go();
    }, this.snake.speed);
}

var game=new Game();
game.go();



</script>
</html>