javascript的贪吃蛇游戏

最新推荐文章于 2023-02-23 09:49:37 发布

ikesi-X

最新推荐文章于 2023-02-23 09:49:37 发布

阅读量412

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： javascript 游戏

本文链接：https://blog.youkuaiyun.com/qq_22793991/article/details/53838008

javascript 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个简单的贪吃蛇游戏实现方法，使用HTML、CSS和JavaScript进行开发。游戏包括地图、食物和蛇三个主要元素，通过键盘控制蛇的方向，使蛇能够吃到食物并增长长度，同时避免碰到边界和自身。

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

可以直接运行的代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>贪吃蛇</title>
<script type="text/javascript">
    //地图类
    function Map(){
        var w = 800;
        var h = 400;
        this.showMap =function(){
            //创建地图
            var mian = document.createElement('div');
            mian.style.width = w+'px';
            mian.style.height = h+'px';
            //mian.style.backgroundColor = 'pink';
            mian.style.backgroundImage = 'url(12.jpg)';// 背景图片
            document.body.appendChild(mian);
            }
        }
    //食物类
    function Food(){
        var len = 20;
        this.xFood = 0;
        this.yFood = 0;
        this.food = null;
        this.showFood = function(){
            if(this.food === null){
                this.food = document.createElement('div');
                this.food.style.width = len+'px';
                this.food.style.height  = len+'px';
                this.food.style.backgroundColor = 'blue';
                this.food.style.position = 'absolute';
                document.body.appendChild(this.food);
            }

            this.xFood =  Math.floor(Math.random()*40);
            this.yFood = Math.floor(Math.random()*20);
            this.food.style.left = this.xFood*len+'px';
            this.food.style.top = this.yFood*len+'px';

        }
    }

    //蛇身体类
    function Snake(){
        var len = 20;
        this.speed = 500;
        this.fen = 0;

        this.snake = [[3,5,'green',null], [4,5,'green', null], [5,5,'green', null],[6,5,'red', null]];
        this.redirect = 'down';
        this.showSnake = function(){
            for(var i=0; i<this.snake.length; i++){
                if(this.snake[i][3] === null){
                    this.snake[i][3] = document.createElement('div');
                    this.snake[i][3].style.width = this.snake[i][3].style.height = len+'px';
                    this.snake[i][3].style.backgroundColor =  this.snake[i][2];
                    this.snake[i][3].style.position = 'absolute';
                    document.body.appendChild(this.snake[i][3]);
                }
                this.snake[i][3].style.left = this.snake[i][0]*len+'px';
                this.snake[i][3].style.top = this.snake[i][1]*len+'px';
            }
        }

        //移动方法
        this.moveSnake = function(){
            for(var i = 0; i < this.snake.length-1;i++){
                this.snake[i][0] = this.snake[i+1][0];
                this.snake[i][1] = this.snake[i+1][1];
            }
            if(this.redirect == 'right'){
                this.snake[this.snake.length -1][0]++;
            }else if (this.redirect == 'left'){
                this.snake[this.snake.length -1][0]--;
            }else if (this.redirect == 'up'){
                this.snake[this.snake.length -1][1]--;
            }else if (this.redirect == 'down'){
                this.snake[this.snake.length -1][1]++;
            }

                //如果吃到给蛇数组加一个方块
            if(food.xFood == this.snake[this.snake.length-1][0] && food.yFood == this.snake[this.snake.length-1][1]){
               var arr = [this.snake[0][0],this.snake[0][1],'green',null];
                this.snake.unshift(arr);
                food.showFood();
            }

            //判断是否碰到边界
            if (this.snake[this.snake.length-1][0] >39 ||this.snake[this.snake.length-1][0] < 0 ||
                    this.snake[this.snake.length-1][1] >19 ||this.snake[this.snake.length-1][1] < 0){
                alert('game over');
                clearInterval(mytime);
                return false;
            }

            //判断是否碰到自己身体
            for(var i = 0; i < this.snake.length-1; i++){
                if(this.snake[i][0] == this.snake[this.snake.length-1][0] && this.snake[i][1] == this.snake[this.snake.length-1][1]){
                    alert('game over');
                    clearInterval(mytime);
                    return false;
                }
            }
            this.showSnake();
        }
    }

    window.onload = function(){
        var  map = new Map();
        map.showMap();
        food = new Food();
        food.showFood();
        snake = new Snake();
        snake.showSnake();
        mytime = setInterval("snake.moveSnake()",snake.speed); // 每隔0.5秒刷新一次

        //按键检测
        document.onkeyup = function(e){
            switch (e.keyCode){
                case 37:
                        if(snake.redirect != 'right')
                        snake.redirect = 'left';
                    break;
                case 38:
                    if(snake.redirect != 'down')
                    snake.redirect = 'up';
                    break;
                case 39:
                    if(snake.redirect != 'left')
                    snake.redirect = 'right';
                    break;
                case 40:
                    if(snake.redirect != 'up')
                    snake.redirect = 'down';
                    break;
            }
        }
    }
</script>
    <style type="text/css">
        body{margin: 0;}
    </style>
</head>

<body>
</body>
</html>