HTML5贪吃蛇代码

冷不防 2022-08-22 11:30 196阅读 0赞

首先声明，这是网上摘录的贪吃蛇完整代码，放在我博客上仅作学习用。

<!DOCTYPE html>

<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>贪吃蛇</title>  
    <style type="text/css">  
\*\{margin:0;padding: 0;font-family: "Microsoft YaHei";\}  
\#page\{margin-right: auto;margin-left: auto; margin-top: 20px;height: 600px; width: 980px; \}  
\#yard\{ width: 800px;border: 1px solid gray;box-shadow: 0 0 10px black; float: right;\}  
\#mark\{font-weight: 800;\}  
\#mark\_con\{ color: red; \}  
button\{width: 50px; \}  
a\{text-decoration:none;\}  
</style>  
<script type="text/javascript">  
        //伪常量  
        var BLOCK\_SIZE = 20;        //格子大小  
        var COLS = 40;                        //列数  
        var ROWS = 30;                        //行数  
        //变量  
        var snakes = \[\];                //保存蛇坐标  
        var c = null;                        //绘图对象  
        var toGo = 3;                        //行进方向  
        var snakecount = 4;                //蛇身数量  
        var interval = null;        //计时器  
        var foodX = 0;                        //食物X轴坐标  
        var foodY = 0;                        //食物Y轴坐标  
        var oMark = null;                //分数显示框  
        var isPause = false;        //是否暂停  
        // 绘图函数  
        function draw()\{  
            c.clearRect(0,0,BLOCK\_SIZE \* COLS, BLOCK\_SIZE \* ROWS);  
            //画出横线  
            for( var i = 1; i <= ROWS; i++ ) \{  
                c.beginPath();  
                c.moveTo(0, i \* BLOCK\_SIZE);  
                c.lineTo(BLOCK\_SIZE \* COLS, i \* BLOCK\_SIZE);  
                c.strokeStyle = "gray";  
                c.stroke();  
            \}  
            //画出竖线  
            for(var i = 1; i <= COLS; i++)\{  
                c.beginPath();  
                c.moveTo(i \* BLOCK\_SIZE, 0);  
                c.lineTo(i \* BLOCK\_SIZE, BLOCK\_SIZE \* ROWS);  
                c.stroke();  
            \}  
            //画出蛇  
            for (var i = 0; i < snakes.length; i++)\{  
                c.beginPath();  
                c.fillStyle = "green";  
                c.fillRect(snakes\[i\].x, snakes\[i\].y, BLOCK\_SIZE, BLOCK\_SIZE);  
                c.moveTo(snakes\[i\].x, snakes\[i\].y);  
                c.lineTo(snakes\[i\].x + BLOCK\_SIZE, snakes\[i\].y);  
                c.lineTo(snakes\[i\].x + BLOCK\_SIZE, snakes\[i\].y + BLOCK\_SIZE);  
                c.lineTo(snakes\[i\].x, snakes\[i\].y + BLOCK\_SIZE);  
                c.closePath();  
                c.strokeStyle = "red";  
                c.stroke();  
            \}  
            //画出食物  
            c.beginPath();  
            c.fillStyle = "yellow";  
            c.fillRect(foodX, foodY, BLOCK\_SIZE, BLOCK\_SIZE);  
            c.moveTo(foodX, foodY);  
            c.lineTo(foodX + BLOCK\_SIZE, foodY);  
            c.lineTo(foodX + BLOCK\_SIZE, foodY + BLOCK\_SIZE);  
            c.lineTo(foodX, foodY + BLOCK\_SIZE);  
            c.closePath();  
            c.strokeStyle = "red";  
            c.stroke();  
        \}  
        //游戏初始化  
        function start()\{  
            for( var i = 0; i < snakecount; i++)\{  
                snakes\[i\] = \{x: i \* BLOCK\_SIZE, y: 0\};  
            \}  
            addFood();  
            //draw();  
            oMark.innerHTML = 0;  
        \}  
        //移动函数  
        function move()\{  
            switch(toGo)\{  
                case 1: //左边  
                    snakes.push(\{x: snakes\[snakecount - 1\].x - BLOCK\_SIZE, y: snakes\[snakecount - 1\].y\});  
                break;  
                case 2: //上边  
                    snakes.push(\{x: snakes\[snakecount - 1\].x, y: snakes\[snakecount - 1\].y - BLOCK\_SIZE\});  
                break;  
                case 3: //右边  
                    snakes.push(\{x: snakes\[snakecount - 1\].x + BLOCK\_SIZE, y: snakes\[snakecount - 1\].y\});  
                break;  
                case 4: //下边  
                    snakes.push(\{x: snakes\[snakecount - 1\].x, y: snakes\[snakecount - 1\].y + BLOCK\_SIZE\});  
                break;  
                default:;  
            \}  
            snakes.shift();  
            isEat();  
            isDie();  
            draw();  
        \}  
        //吃到食物判断  
        function isEat()\{  
            if (snakes\[snakecount - 1\].x == foodX && snakes\[snakecount - 1\].y == foodY) \{  
                oMark.innerHTML = (parseInt(oMark.innerHTML) + 1).toString();  
                addFood();  
                addSnake();  
            \}  
        \}  
        //添加蛇身  
        function addSnake()\{  
            snakecount++;  
            snakes.unshift(\{x:BLOCK\_SIZE \* COLS, y:BLOCK\_SIZE \* ROWS\});  
        \}  
        //交互响应函数  
        function keydown(keyCode)\{  
                switch(keyCode)\{  
                        case 37: //左边  
                                if(toGo != 1 && toGo != 3)  toGo = 1;break;  
                        case 38: //上边  
                                if(toGo != 2 && toGo != 4)        toGo = 2;break;  
                        case 39: //右边  
                                if(toGo != 3 && toGo != 1)         toGo = 3;break;  
                        case 40: //下的  
                                if(toGo != 4 && toGo != 2)        toGo = 4;break;  
                        case 80: //开始/暂停  
                                if(isPause)\{  
                                        interval = setInterval(move,200);  
                                        isPause = false;  
                                        document.getElementById('pause').innerHTML = "Pause";  
                                \}else\{  
                                        clearInterval(interval);  
                                        isPause = true;  
                                        document.getElementById('pause').innerHTML = "Start";  
                                \}  
                                break;  
                \}  
        \}  
        //制造食物  
        function addFood()\{  
                foodX = Math.floor(Math.random() \* (COLS - 1)) \* BLOCK\_SIZE;  
                foodY = Math.floor(Math.random() \* (ROWS - 1)) \* BLOCK\_SIZE;  
                // console.log(foodX + " -- " + foodY);  
        \}  
        //死亡判断  
        function isDie()\{  
                if(snakes\[snakecount - 1\].x == -20 || snakes\[snakecount - 1\].x == BLOCK\_SIZE \* COLS  
                        || snakes\[snakecount - 1\].y == -20 || snakes\[snakecount - 1\].y == BLOCK\_SIZE \* ROWS)\{  
                        alert("Game Over!");  
                        clearInterval(interval);  
                \}  
                for(var i = 0; i < snakecount - 1; i++)\{  
                        if(snakes\[snakecount - 1\].x == snakes\[i\].x && snakes\[snakecount - 1\].y == snakes\[i\].y)\{  
                                clearInterval(interval);  
                                alert("Game Over!");  
                        \}  
                \}  
        \}  
        // 启动函数  
        window.onload = function()\{  
            c = document.getElementById('canvas').getContext('2d');  
            oMark = document.getElementById('mark\_con');  
            start();  
            interval = setInterval(move,100);  
            document.onkeydown = function(event)\{  
                var event = event || window.event;  
                keydown(event.keyCode);  
            \}  
        \}  
</script>  
</head>  
<body>  
  
    <div id="page">  
        <div id="yard"><canvas id="canvas" height="600px" width="800px"></canvas></div>  
  
        <div id="help">  
            <div id="mark">得分：<span id="mark\_con"></span></div>  
              
        </div>  
    </div>  
    <div style="text-align:center;">  
<p>来源:<a href="http://www.mycodes.net/" target="\_blank">源码之家</a></p>  
</div>  
</body>  
</html>