JS贪吃蛇游戏

最新推荐文章于 2024-08-08 13:37:43 发布

envon123

最新推荐文章于 2024-08-08 13:37:43 发布

阅读量2.3k

点赞数 3

分类专栏： Web前端文章标签： js贪吃蛇

本文链接：https://blog.csdn.net/envon123/article/details/9258945

版权

这是一篇关于使用JavaScript编程实现贪吃蛇游戏的个人练习作品。文章中详细介绍了如何利用JS创建游戏逻辑，包括蛇的移动、食物生成、碰撞检测等关键部分，旨在锻炼和展示JavaScript编程技巧。

摘要由CSDN通过智能技术生成

JS贪吃蛇游戏，个人练习之用，放在这备份一下，

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JS贪吃蛇-练习</title>
    <style type="text/css">
        #pannel table {
            border-collapse: collapse;
        }

            #pannel table td {
                border: 1px solid #808080;
                width: 10px;
                height: 10px;
                font-size: 0;
                line-height: 0;
                overflow: hidden;
            }

            #pannel table .snake {
                background-color: green;
            }

            #pannel table .food {
                background-color: blue;
            }
    </style>
    <script type="text/javascript">
        var Direction = new function () {
            this.UP = 38;
            this.RIGHT = 39;
            this.DOWN = 40;
            this.LEFT = 37;
        };
        var Common = new function () {
            this.width = 20;  /*水平方向方格数*/
            this.height = 20; /*垂直方向方格数*/
            this.speed = 250; /*速度 值越小越快*/
            this.workThread = null;
        };
        var Main = new function () {
            var control = new Control();
            window.onload = function () {
                control.Init("pannel");
                /*开始按钮*/
                document.getElementById("btnStart").onclick = function () {
                    control.Start();
                    this.disabled = true;
                    document.getElementById("selSpeed").disabled = true;
                    document.getElementById("selSize").disabled = true;
                };
                /*调速度按钮*/
                document.getElementById(&