HTML5+CSS+JS 貪吃蛇demo

時間 2020-05-29

標籤 html5+css+js html css 貪吃 demo 欄目 HTML 简体版

原文原文鏈接

我寫博客的主要目的就是溫習所學的知識，本身之前寫的遊戲固然不能放過！javascript

這款網頁版貪吃蛇是大一下冊學習網頁前端時老師教咱們寫的，因爲那個時候初學網頁前端，因此這款遊戲是純原生Java Script寫的，沒有使用JQuery。html

從新看了一遍本身寫的代碼，大一的我真的太年輕了，一個註釋都沒有寫，幸虧這款遊戲的邏輯不難，還能看得懂，補了一些註釋，對一些細節加深了理解。（之後要逼着本身寫註釋才行呀！）前端

從大一寒假寫C語言的俄羅斯方塊開始，我就下定決心學一門編程語言，就用這門編程語言寫一個遊戲，這個目標也基本上實現了，陸陸續續寫了C++推箱子、Python飛機大戰，最近正在寫Java打磚塊，之後會慢慢跟你們分享的。java

廢話很少說，上代碼！編程

<!DOCTYPE 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>貪吃蛇</title>
    <script type="text/javascript">
        var size = 20; //網格大小
        var rows = 30; //網格行數
        var cols = 40; //網格列數
        var c;
        var snake = []; //保存貪吃蛇的位置信息
        var snake_len = 4; //貪吃蛇的長度
        var foodx; //食物x座標
        var foody; //食物y座標
        var mark; //分數
        var go = 3; //貪吃蛇爬行方向，左：1；上：2；右：3；下：4
        var pause = true; //是否暫停
        var interval; //遊戲循環

        function draw() {
            c.clearRect(0, 0, size * cols, size * rows);

            c.strokeStyle = "black";
            for (var i = 1; i <= rows; i++) {
                c.beginPath();
                c.moveTo(0, i * size);
                c.lineTo(size * cols, i * size);
                c.closePath();
                c.stroke();
            } //畫橫線
            for (var i = 1; i <= cols; i++) {
                c.beginPath();
                c.moveTo(i * size, 0);
                c.lineTo(i * size, size * rows);
                c.closePath();
                c.stroke();
            } //畫豎線

            c.strokeStyle = "white";
            c.fillStyle = "green";
            for (var i = 0; i < snake_len; i++) {
                c.beginPath();
                c.fillRect(snake[i].x, snake[i].y, size, size);
                c.moveTo(snake[i].x, snake[i].y);
                c.lineTo(snake[i].x + size, snake[i].y);
                c.lineTo(snake[i].x + size, snake[i].y + size);
                c.lineTo(snake[i].x, snake[i].y + size);
                c.closePath();
                c.stroke();
            } //畫貪吃蛇

            c.fillStyle = "yellow";
            c.beginPath();
            c.fillRect(foodx, foody, size, size);
            c.moveTo(foodx, foody);
            c.lineTo(foodx + size, foody);
            c.lineTo(foodx + size, foody + size);
            c.lineTo(foodx, foody + size);
            c.closePath();
            c.stroke(); //畫食物
        }

        function addfood() {
            foodx = Math.floor(Math.random() * (cols - 1)) * size;
            foody = Math.floor(Math.random() * (rows - 1)) * size;
            while (foodx == 0) {
                foodx = Math.floor(Math.random() * (cols - 1)) * size;
            }
            while (foody == 0) {
                foody = Math.floor(Math.random() * (rows - 1)) * size;
            }
        } //設置食物位置，保證不爲第一行(列)、最後一行(列)

        function start() {
            for (var i = 0; i < snake_len; i++) {
                snake[i] = {
                    x: i * size,
                    y: 0
                }
            } //設置貪吃蛇出現的位置
            addfood();
            draw();
            mark.innerHTML = 0;
        }

        function addsnake() {
            snake_len++;
            snake.unshift({
                x: size * cols,
                y: size * rows
            }); //添加新方塊至網格外，會在下個遊戲循環添加至貪吃蛇
        }

        function IsEat() {
            if (snake[snake_len - 1].x == foodx && snake[snake_len - 1].y == foody) {
                mark.innerHTML = (parseInt(mark.innerHTML) + 1).toString();
                addfood();
                addsnake();
            }
        }

        function IsDie() {
            if (snake[snake_len - 1].x == -1 * size || snake[snake_len - 1].y == -1 * size ||
                snake[snake_len - 1].x == cols * size || snake[snake_len - 1].y == rows * size) {
                clearInterval(interval);
                alert("Game Over!沒有玩過癮，那就刷新頁面再來一次。");
            } //貪吃蛇爬行到網格外

            for (var i = 0; i < snake_len - 1; i++) {
                if (snake[i].x == snake[snake_len - 1].x && snake[i].y == snake[snake_len - 1].y) {
                    clearInterval(interval);
                    alert("Game Over!沒有玩過癮，那就刷新頁面再來一次。");
                }
            } //貪吃蛇纏繞
        }

        function move() {
            switch (go) {
                case 1:
                    snake.push({
                        x: snake[snake_len - 1].x - size,
                        y: snake[snake_len - 1].y
                    });
                    break;
                case 2:
                    snake.push({
                        x: snake[snake_len - 1].x,
                        y: snake[snake_len - 1].y - size
                    });
                    break;
                case 3:
                    snake.push({
                        x: snake[snake_len - 1].x + size,
                        y: snake[snake_len - 1].y
                    });
                    break;
                case 4:
                    snake.push({
                        x: snake[snake_len - 1].x,
                        y: snake[snake_len - 1].y + size
                    });
            }
            snake.shift();
            IsEat();
            IsDie();
            draw();
        } //遊戲循環

        function keydown(keyCode) {
            switch (keyCode) {
                case 37:
                    if (go != 1 && go != 3)
                        go = 1;
                    break;
                case 38:
                    if (go != 2 && go != 4)
                        go = 2;
                    break;
                case 39:
                    if (go != 3 && go != 1)
                        go = 3;
                    break;
                case 40:
                    if (go != 4 && go != 2)
                        go = 4;
                    break;
                case 32:
                    if (pause) {
                        interval = setInterval(move, 130); //開始遊戲循環
                        pause = false;
                        document.getElementById('pause').innerHTML = "Pause";

                    } else {
                        clearInterval(interval);
                        pause = true;
                        document.getElementById('pause').innerHTML = "Satrt";
                    }
                    break;
            }
        } //鍵盤操做

        window.onload = function () {
            c = document.getElementById('canvas').getContext('2d');
            mark = document.getElementById('score');
            start();
            document.onkeydown = function (event) {
                var event = event || window.event;
                keydown(event.keyCode);
            }
        }
    </script>

    <style>
        #page {
            margin-left: auto;
            margin-right: auto;
            margin-top: 20px;
            width: 1000px;
            height: 600px;
        }

        #yard {
            width: 800px;
            border: 1px solid gray;
            box-shadow: 0 0 10px #000;
            float: right;
        }

        #mark {
            font-weight: 800;
        }

        #score {
            color: #f00;
        }

        button {
            width: 50px;
        }

        p {
            margin-left: 40px;
        }
    </style>
</head>

<body>
<div id="page">
    <div id="yard">
        <canvas id="canvas" width="800" height="600"></canvas>
    </div>
    <div id="help">
        <div id="mark">Mark:<span id="score"></span></div>
        <div id="helper">
            <table>
                <tr>
                    <td></td>
                    <td>
                        <button onclick="keydown(38)">Up</button>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td>
                        <button onclick="keydown(37)">Left</button>
                    </td>
                    <td>
                        <button onclick="keydown(32)" id="pause">Satrt</button>
                    </td>
                    <td>
                        <button onclick="keydown(39)">Right</button>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <button onclick="keydown(40)">Down</button>
                    </td>
                    <td></td>
                </tr>
            </table>
            <p>空格鍵暫停</p>
        </div>
    </div>
</div>
</body>

</html>

效果圖：canvas

試玩：http://static.pzijigame.com/Game/snake.html（PC端才能玩哦！！！）dom

有感興趣的朋友能夠直接私聊我（1527985747@qq.com），咱們能夠一塊兒討論，一塊兒進步！！！編程語言

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。