js小项目(7)贪吃蛇小游戏

最新推荐文章于 2024-01-28 17:49:34 发布

qq_41208092

最新推荐文章于 2024-01-28 17:49:34 发布

阅读量316

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_41208092/article/details/80369213

本文介绍了一个使用HTML和JavaScript实现的简易版贪吃蛇游戏。游戏实现了基本的移动、碰撞检测及食物生成等功能，并提供了键盘方向控制。未来可考虑加入分数显示等优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<link rel="stylesheet" href="snake.css">
<body>
    <div id="map"></div>
    <script>
    var map = {
        width:900,
        height:500,
    };
    var box = {
        width:50,
        height:50,
    }
    var nums = {
        hnum:map.width/box.width,
        vnum:map.height/box.height,
    }
    var DIR = {
        DIR_LEFT:1,
        DIR_TOP:2,
        DIR_RIGHT:3,
        DIR_BOTTOM:4,
    }
    var dir=DIR.DIR_RIGHT;
    var snake=[];
    var other=[];
    function initMap(){
        var map_target=document.getElementById("map");
        map_target.style.width=map.width+"px";
        map_target.style.height=map.height+"px";
        var newSpan = null;
        for(var i=1;i<=nums.hnum*nums.vnum;i++){
            var newSpan = document.createElement('span');
            newSpan.style.width=box.width+"px";
            newSpan.style.height=box.height+"px";
            newSpan.id=i;
            map_target.appendChild(newSpan);
            // console.log(map_target);
            if(i<=3){
                newSpan.className = "snake";
                snake.push(newSpan);
            }else{
                other.push(newSpan);
            }
        }
    }
    function moveSnake(){
        var headId;
        // console.log(dir);
        
        switch(dir){
            case DIR.DIR_LEFT:
                headId = parseInt(snake[snake.length - 1].id) - 1;
                if(headId % nums.hnum == 0){
                    headId += nums.hnum;
                }
                break;
            case DIR.DIR_RIGHT:
                headId = parseInt(snake[snake.length - 1].id) + 1;
                if(headId % nums.hnum == 1 ){
                    headId -= nums.hnum;
                }
                break;              
            case DIR.DIR_TOP:
                headId = parseInt(snake[snake.length-1].id) - nums.hnum;
                if(headId < 1){
                    headId += nums.hnum * nums.vnum;
                }
                break;          
            case DIR.DIR_BOTTOM:
                headId = parseInt(snake[snake.length-1].id) + nums.hnum;
                if(headId > nums.hnum * nums.vnum){
                    headId -= nums.hnum * nums.vnum;
                }
                break;
            default:
                break;              
            
        }
        

        var head=document.getElementById(headId);
        for(var i = 0;i < snake.length;i ++){
            if(headId == snake[i].id){
                alert("Game over");
                window.location=window.location;
            }
        }
        var index;
        for(var i=1;i<other.length;i++){
            if(headId==other[i].id){
                index=i;break;
            }
        }
        // console.log(index);
        other.splice(index,1);
        snake.push(head);
        if(head.className == "food"){
            // alert(1);
            showFood();
            // console.log(index);
        }else{
            snake[0].className = "";
            other.push(snake.shift());
        }
        head.className = "snake";
    }
    function showFood(){
        // console.log(other.length)
        console.log(1);     
        var index=Math.floor(Math.random()*other.length);
        other[index].className = "food";    
    }
    window.onload=function(){
        initMap();
        setInterval(moveSnake,200);
        showFood();
        document.onkeydown=function(e){
            switch (e.keyCode) {
                case 37:
                    if(dir == DIR.DIR_RIGHT) break; else{dir = DIR.DIR_LEFT;break} 
                case 38:
                    if(dir == DIR.DIR_BOTTOM) break; else{dir = DIR.DIR_TOP;break;}
                case 39:
                    if(dir == DIR.DIR_LEFT) break; else{dir = DIR.DIR_RIGHT;break}
                case 40:
                    if(dir == DIR.DIR_TOP) break; else{dir = DIR.DIR_BOTTOM; break;}
                default:
                    break;
            }
        }
    }
    
</script>   
</body>
</html>
可以对其进行优化例如加入分数技术，蛇方向的改变优化