js实现贪吃蛇

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

HTML:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>游戏贪吃蛇</title>
</head>
<body>

</body>
<script src="js/app.js"></script>
</html>

JavaScript:

(function reset() {
    var oTa = document.createElement('table');
    var oTb = document.createElement('tbody');
    var index = 0;
    var snakeMove = null;
    var timer = null;
    for (var i = 0; i < 40; i++) {
        var oTr = document.createElement('tr');
        for (var j = 0; j < 40; j++) {
            var oTd = document.createElement('td');
            oTd.style.cssText = 'width:10px; height:10px; padding:0; border: 2p solid #ccc; background: #ccc;';
            oTr.appendChild(oTd);
        }
        oTb.appendChild(oTr);
    }
    oTa.appendChild(oTb);
    oTa.style.cssText = 'margin:60px auto 0; border:10px solid #333; background:#ccc;';
    document.body.appendChild(oTa);
    oTa.cellSpacing = '2 ';
    var aTd = oTb.getElementsByTagName('td');
    fruit();

    function fruit() {
        var num = Math.floor(Math.random() * aTd.length);
        if (num != index) {
            index = num;
            aTd[index].style.cssText = 'border: 2px solid #333; background: red;';
        } else {
            fruit();
        }
    }

    snake();

    function snake() {
        var rows = oTb.rows;
        var arr = []
        litleSnake();

        function litleSnake() {
            var ini = rows.length / 2 - 1;
            arr = [[ini, ini + 1]]
            snakeColor(arr);
        }

        function snakeColor(arr) {
            for (var i = 1; i < arr.length; i++) {
                rows[arr[i][0]].cells[arr[i][1]].style.cssText = 'background: #555; border: 2px solid #333;';
            }
            rows[arr[0][0]].cells[arr[0][1]].style.cssText = 'background: #eee; border: 2px solid #333;';
        }

        var json = {
            left: {key: true, timer: null},
            up: {key: true, timer: null},
            right: {key: true, timer: null},
            down: {key: true, timer: null}
        };
        var aDir = [];
        document.onkeydown = function (ev) {
            var ev = ev || event;
            for (var i = 37; i < 41; i++) {
                if (ev.keyCode == i && ev.keyCode != aDir[0]) {
                    aDir.unshift(ev.keyCode);
                    break;
                }
            }
            aDir.length = 2;
            if (Math.abs(aDir[0] - aDir[1]) == 2) return;
            switch (ev.keyCode) {
                case 32:
                    timer ? (function () {
                        clearInterval(timer);
                        timer = null;
                    })() : snakeMove && snakeMove();
                    break;
                case 37:
                    if (!json.left.key) return;
                    onOff('left');
                    fnTimer('left', 0, -1);
                    break;
                case 38:
                    if (!json.up.key) return;
                    onOff('up');
                    fnTimer('up', -1, 0);
                    break;
                case 39:
                    if (!json.right.key) return;
                    onOff('right');
                    fnTimer('right', 0, 1);
                    break;
                case 40:
                    if (!json.down.key) return;
                    onOff('down');
                    fnTimer('down', 1, 0);
                    break;
            } //switch
        }; //onkeydown
        function onOff(dir) {
            for (var i in json) {
                if (i == dir) {
                    json[i].key = false;
                } else {
                    json[i].key = true;
                    clearInterval(timer);
                }
            }
        }

        function fnTimer(dir, m, n) {
            snakeMove = function () {
                fnTimer(dir, m, n)
            };
            timer = setInterval(function () {
                if (arr[0][0] + m < 0 || arr[0][1] + n < 0 || arr[0][0] + m > 39 || arr[0][1] + n > 39) {
                    clearInterval(timer);
                    fail();
                    return;
                }
                for (var i = 2; i < arr.length; i++) {
                    if (arr[0][0] + m == arr[i][0] && arr[0][1] + n == arr[i][1]) {
                        clearInterval(timer);
                        fail();
                    }
                }
                arr.unshift([arr[0][0] + m, arr[0][1] + n]);
                if (rows[arr[0][0]].cells[arr[0][1]].style.backgroundColor != 'red') {
                    snakeTail();
                } else {
                    fruit();
                }
            }, 100);
        }

        function fail() {
            alert('OVER! 游戏结束!重新开始');
            document.body.removeChild(oTa);
            reset();
        }

        function snakeTail() {
            rows[arr[arr.length - 1][0]].cells[arr[arr.length - 1][1]].style.cssText = 'background: #ccc; border: 2px solid #ccc;';
            arr.pop(arr[arr.length - 1]);
            snakeColor(arr);
        }
    }

    !window.pop && (function () {
        alert('  方向键:移动小蛇游戏,空格键: 暂停/开始游戏');
        window.pop = 1;
    })()
})();
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的贪吃蛇游戏示例,使用纯 JavaScript 编写: HTML 代码: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>贪吃蛇游戏</title> <style> #game-board { width: 400px; height: 400px; border: 1px solid black; position: relative; } .snake { width: 20px; height: 20px; position: absolute; background-color: green; } .food { width: 20px; height: 20px; position: absolute; background-color: red; } </style> </head> <body> <div id="game-board"></div> <script src="snake.js"></script> </body> </html> ``` JavaScript 代码: ```javascript var board = document.getElementById("game-board"); var snake = [{ x: 200, y: 200 }]; var food = null; var direction = "right"; var intervalId = null; function draw() { // 清空画布 board.innerHTML = ""; // 绘制贪吃蛇 snake.forEach(function(segment) { var element = document.createElement("div"); element.className = "snake"; element.style.left = segment.x + "px"; element.style.top = segment.y + "px"; board.appendChild(element); }); // 绘制食物 if (!food) { var x = Math.floor(Math.random() * 20) * 20; var y = Math.floor(Math.random() * 20) * 20; food = { x: x, y: y }; } var element = document.createElement("div"); element.className = "food"; element.style.left = food.x + "px"; element.style.top = food.y + "px"; board.appendChild(element); } function move() { // 移动贪吃蛇 var head = snake[0]; switch (direction) { case "up": snake.unshift({ x: head.x, y: head.y - 20 }); break; case "down": snake.unshift({ x: head.x, y: head.y + 20 }); break; case "left": snake.unshift({ x: head.x - 20, y: head.y }); break; case "right": snake.unshift({ x: head.x + 20, y: head.y }); break; } // 判断是否吃到食物 if (head.x === food.x && head.y === food.y) { food = null; } else { snake.pop(); } // 判断是否碰到边界或自身 var headX = snake[0].x; var headY = snake[0].y; if (headX < 0 || headX >= 400 || headY < 0 || headY >= 400) { clearInterval(intervalId); alert("游戏结束!"); } else { for (var i = 1; i < snake.length; i++) { if (snake[i].x === headX && snake[i].y === headY) { clearInterval(intervalId); alert("游戏结束!"); break; } } } draw(); } document.addEventListener("keydown", function(event) { switch (event.keyCode) { case 37: direction = "left"; break; case 38: direction = "up"; break; case 39: direction = "right"; break; case 40: direction = "down"; break; } }); intervalId = setInterval(move, 100); ``` 这个示例中,游戏画面由一个 `<div>` 元素表示。贪吃蛇和食物都是由 `<div>` 元素表示,其样式通过 CSS 控制。通过 JavaScript 实现贪吃蛇的移动、吃到食物、撞到边界或自身等基本功能,并使用定时器实现了游戏的持续进行。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值