贪吃蛇

最新推荐文章于 2024-04-20 15:20:30 发布
梦逸雨涵
最新推荐文章于 2024-04-20 15:20:30 发布
阅读量266
点赞数
分类专栏： web 文章标签： HTML css javascript
本文链接：https://blog.youkuaiyun.com/qq_41943578/article/details/88658932
版权
web 专栏收录该内容
9 篇文章
订阅专栏
代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>贪吃蛇</title>
    <!-- <link rel="stylesheet" href="css/retroSnake.css"> -->
    <style>
        /*设置游戏画布的样式*/
        canvas
        {
            width: 400;
            height: 400;
            border: 1px solid;
        }
        body
        {
            background-color:silver;/*设置页面的背景颜色为银色*/
        }
        /*游戏主界面的总体样式*/
        #container
        {
            text-align: center;
            width:400px;
            margin: auto;
            padding: 10px;
            background-color: white;
            box-shadow: 10px 10px 15px gray;
        }
        /*状态栏样式*/
        #status
        {
            padding: 10px;
            width: 400px;
            height: 40px;
            margin: auto;
        }
    </style>
</head>
<body>
    <div id="container"> 
        <h3>贪吃蛇小游戏</h3>
        <hr>
        <canvas id="canvas" ></canvas>
        <div>
            <!-- <button onclick="clickSwitch()"> 重新开始</button> -->
            <input id="switch" type="button" value="开始" onclick="clickSwitch()"><br/>
            <input id="content" type="text" value="0">
        </div>
    </div>
</body>
<script type="text/javascript">
    const width = 300;
    const height = 250;
    const snakeWidth = 15;
    const snakeHeight = 15;
    //移动时间间隔
    const timeMove = 300;
    //食物刷新时间
    const timeFood = 5000;
    //食物总量
    const totalFood = 200; 
    //石头刷新时间
    const timeStone = 8000;
    //石头总量
    const totalStone = 300;
    var switchStatus = 0;
    var changeMove = "right";
    var currentMove = "right";
    //被用的位置
    var points = new Array();
    var snake = new Array();
    var foods = new Array();
    var stones = new Array();
    var moveing = false;
    var time_Move, time_Food, time_Stone;
    
    window.onload = function () 
    {
            createGround();
    };
        
        //获取按键
    function keyDown(event) 
    {
        switch(event.keyCode)
        {
            case 87:
                changeMove = "up";
                break;
            case 68:         
                changeMove = "right";
                break;
            case 83:
                changeMove = "down";
                break;
            case 65:
                changeMove = "left";
                break;
        }    
    }

    function handlePoints(x, y, type)
    {
        if (0 == type)
        {
            points.push(x+y*width);
        } 
        else 
        {    
            var index = points.indexOf(x+y*width);
            if (index != -1) 
            {
                points.splice(index, 1);
            }
        }
    }
    //贪吃蛇
    function snakes(x, y) 
    {
        this.x = x;
        this.y = y;
    }
        
    //食物
    function food(x, y) 
    {
        this.x = x;
        this.y = y;
    }
  
    //石头
    function stone(x, y) 
    {
        this.x = x;
        this.y = y;
    }
        
        //开关操作
    function clickSwitch() 
    {
        if (switchStatus == 0 || switchStatus == 2) 
        {
            document.getElementById("switch").value = "暂停";
            if (switchStatus == 0) 
            {
                //开始
                play();
            }
            switchStatus = 1;
        } 
        else if (switchStatus == 1) 
        {
            document.getElementById("switch").value = "继续";
            switchStatus = 2;
        }
    }
        
    //碰撞判定并操作
    function judge(x, y) 
    {
        /*** 判断是否撞上边界  ***/
        if (x < 0 || x >= width || y < 0 || y >= height) 
        {
            end();
            return;
        } 
        var i;
        /*** 推断是否撞上自己  ***/
        for (i = 1; i < snake.length; i++) 
        {
            if (snake[0].x == snake[i].x && snake[0].y == snake[i].y) 
            {
                end();
                return;
            }
        }   
        /*** 推断是否撞上石头  ***/
        for (i = 0; i < stones.length; i++) 
        {
            if (snake[0].x == stones[i].x && snake[0].y == stones[i].y) 
            {
                end();
                return;
            }
        }
        /*** 推断是否撞上食物  ***/
        var flag = false;
        for (i = 0; i < foods.length; i++) 
        {
            if (x == foods[i].x && y == foods[i].y) 
            {
                flag = true;
                foods.splice(i, 1);
            }
        } 
        var newSnake = new snakes(x, y);
        snake.unshift(newSnake);
        if (!flag) 
        {
            var p = snake.pop();
            handlePoints(p.x, p.y, 1);
        }
        document.getElementById("content").value = "x:"+snake[0].x+" y:"+snake[0].y+" length:"+snake.length;
        refresh();
    }
        
    //移动贪吃蛇
    function move() 
    {
        if(moveing == false && switchStatus == 1) 
        {
            moveing = true;
            if ((currentMove != "right" && changeMove == "left") || (currentMove == "left" && changeMove == "right")) 
            {
                currentMove = "left";
                judge(snake[0].x-snakeWidth, snake[0].y);
            } 
            else if ((currentMove != "down" && changeMove == "up") || (currentMove == "up" && changeMove == "down")) 
            {
                currentMove = "up";
                judge(snake[0].x, snake[0].y-snakeHeight);
            } 
            else if ((currentMove != "left" && changeMove == "right")  || (currentMove == "right" && changeMove == "left")) 
            {
                currentMove = "right";
                judge(snake[0].x+snakeWidth, snake[0].y);
            } 
            else if ((currentMove != "up" && changeMove == "down") || (currentMove == "down" && changeMove == "up"))
            {
                currentMove = "down";
                judge(snake[0].x, snake[0].y+snakeHeight);
            } 
            changMove = currentMove;
        }
        moveing = false;
    }
        
    //创建地图
    function createGround() 
    {
        var canvas = document.getElementById("canvas");
        var draw = canvas.getContext('2d');
        //清除原图
        draw.clearRect(0, 0, width, height);
        draw.strokeStyle = "orange";
        draw.strokeRect(0, 0, width, height);
    }
        
    //创建食物 
    function createFood() 
    {
        if (foods.length < totalFood) 
        {
            var x = Math.round(Math.random()*(width/snakeWidth-1))*snakeWidth;
            var y = Math.round(Math.random()*(height/snakeHeight-1))*snakeHeight;
            if (points.indexOf(x+y*width) == -1) 
            {
                var newFood = new food(x, y);
                var canvas = document.getElementById("canvas");
                var draw = canvas.getContext('2d');
                draw.fillStyle = "green";
                draw.fillRect(x, y, snakeWidth, snakeHeight);
                foods.push(newFood); 
                handlePoints(x, y, 0);
            }
        }
    }
        
        //创建石头
    function createStone() 
    {
        if (stones.length < totalStone) 
        {
            var x = Math.round(Math.random()*(width/snakeWidth-1))*snakeWidth;
            var y = Math.round(Math.random()*(height/snakeHeight-1))*snakeHeight;
            if (points.indexOf(x+y*width) == -1) 
            {
                var newStone = new stone(x, y);
                var canvas = document.getElementById("canvas");
                var draw = canvas.getContext('2d');
                draw.fillStyle = "#663300";
                draw.beginPath();   
                draw.arc(x+snakeWidth*0.5, y+snakeHeight*0.5, snakeWidth*0.5+1, 0, Math.PI*2, true);     
                draw.closePath();                        
                draw.fill();
                stones.push(newStone);
                handlePoints(x, y, 0);
            }
        }
    }
        
    //刷新场景
    function refresh() 
    {
        var canvas = document.getElementById("canvas");
        var draw = canvas.getContext('2d');
        //清除原图
        draw.clearRect(1, 1, width-2, height-2);
        /*** 边界  ***/
        draw.strokeStyle = "blue";
        draw.strokeRect(0, 0, width, height);
        var i;
        /*** 食物   ***/
        draw.fillStyle = "green";
        for (i = 0; i < foods.length; i++) 
        {
            draw.fillRect(foods[i].x, foods[i].y, snakeWidth, snakeHeight);
        }    
        /*** 石头  ***/
        draw.fillStyle = "#663300";
        for (i = 0; i < stones.length; i++) 
        {
            draw.beginPath();   
            draw.arc(stones[i].x+snakeWidth*0.5, stones[i].y+snakeHeight*0.5, snakeWidth*0.5+1, 0, Math.PI*2, true);     
            draw.closePath();                        
            draw.fill();
        }
            
        /***  贪吃蛇    ***/
        draw.fillStyle = "brown";                   
        draw.beginPath();   
        //圆心x坐标|圆心y坐标|半径|始|PI为圆周率。Math.PI*2为画圆|true为时针方向：逆时针，0为顺时针
        draw.arc(snake[0].x+snakeWidth*0.5, snake[0].y+snakeHeight*0.5, snakeWidth*0.5+1, 0, Math.PI*2, true);     
        draw.closePath();                        
        draw.fill(); 
        for (i = 1; i < snake.length; i++) 
        {
            draw.fillRect(snake[i].x, snake[i].y, snakeWidth, snakeHeight);
        }
    }

    //游戏开始
    function play() 
    {
        createGround();
        for (var i = 2; i > 0; i--) 
        {
            var newSnake = new snakes(snakeWidth*i, snakeHeight);
            snake.push(newSnake);
            handlePoints(newSnake.x, newSnake.y, 0);
        }
        refresh();
        document.onkeydown = keyDown;
        time_Move = setInterval(move, timeMove); 
        time_Food = setInterval(createFood, timeFood); 
        time_Stone = setInterval(createStone, timeStone); 
    }
        
    //游戏结束
    function end() 
    {
        clearInterval(time_Move);  
        clearInterval(time_Food);  
        clearInterval(time_Stone);  
        switchStatus = 0;
        changeMove = "right";
        currentMove = "right";
        points.length = 0;
        snake.length = 0;
        foods.length = 0;
        stones.length = 0;
        moveing = false;
        document.getElementById("switch").value = "开始";
        document.getElementById("content").value = "游戏结束";
        alert("游戏结束");
    }
</script>
</html>
运行结果：