Android参考源码-三国杀版连连看（使用html5的canvas特性，纯javascript开发）.zip资源-CSDN文库

共2个文件

js：1个

htm：1个

版权申诉

javascript

android

html5

开发语言

ecmascript

123 浏览量 2022-03-08 13:58:54 上传评论收藏 478KB ZIP 举报

《基于HTML5 Canvas的“三国杀版连连看”——JavaScript编程深度解析》在移动设备与互联网技术的快速发展中，HTML5作为新一代的网页标准，以其强大的功能和跨平台的特性，逐渐成为开发者的重要工具。本项目“Android参考源码-三国杀版连连看”，就是一款完全使用HTML5的canvas特性，结合JavaScript开发的游戏，展现了HTML5在游戏开发领域的潜力。下面将深入探讨其中的关键知识点。 Canvas是HTML5中用于绘制2D图形的一个元素，它允许开发者通过JavaScript代码来绘制图像、线条、形状等，实现了动态和交互式的视觉效果。在这个连连看游戏中，Canvas就是画布，所有的游戏元素，如棋盘、牌面、连线等，都是通过JavaScript在Canvas上绘制的。 JavaScript，作为ECMAScript规范的实现，是这个项目的灵魂所在。它负责处理游戏逻辑、用户交互以及动画效果。例如，JavaScript代码会定义每张牌的属性，包括其图片、位置、是否被选中等状态，同时处理用户的点击事件，判断两个选中的牌是否匹配，以及消除匹配的牌并更新游戏状态。在"board.js"文件中，我们可以看到游戏的核心逻辑。这可能包含了棋盘的初始化、牌的位置设定、匹配检查算法、游戏结束条件判断等功能。JavaScript的面向对象编程特性使得可以创建棋盘类、牌类等对象，通过这些对象来组织和管理游戏数据。此外，JavaScript的异步处理能力，如setTimeout和requestAnimationFrame，可以用来实现平滑的动画效果，如牌翻转、消除等。 HTML5的离线存储机制也是该项目值得关注的部分。通过HTML5的localStorage或IndexedDB，游戏状态可以保存在本地，即使在网络不稳定或者断开的情况下，用户仍能继续之前的游戏进度。此外，由于这个项目是针对Android平台，因此可能考虑了移动设备的特性和优化，比如触摸事件的处理、屏幕适配、性能优化等。对于Android设备，HTML5应用可以通过WebView组件嵌入到原生App中，提供一体化的用户体验。总结来说，“Android参考源码-三国杀版连连看”项目充分展示了HTML5、JavaScript以及ECMAScript的强大功能。开发者可以通过学习这个项目，深入理解Canvas的绘图机制，掌握JavaScript游戏开发技巧，以及如何在移动平台上构建Web App。同时，这个项目也提醒我们，随着技术的进步，传统的界限正在模糊，HTML5和JavaScript已经不再局限于网页，而是可以创造出丰富的、跨平台的应用和游戏。

展开

资源推荐

资源详情

资源评论

收起资源包目录

Android参考源码-三国杀版连连看（使用html5的canvas特性，纯javascript开发）.zip （2个子文件）

lianliankan.htm 24KB

board.js 664KB

      <!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>连连看</title>
    <script type="text/javascript" src="board.js"></script>
    <script type="text/javascript">
        // canvas obj
        var _canvas = null;
        // context obj
        var _ctx = null;
        // face image obj
        var _img_face = null;

        // face img size
        var _img_face_m = 0;
        var _img_face_n = 0;
        var _img_face_src_width = 0;
        var _img_face_src_height = 0;
        var _img_face_width = 0;
        var _img_face_height = 0;
        var _img_face_radius = 0;

        // board size
        var _board_m = 0;
        var _board_n = 0;
        var _boardsize = 0;
        var _board_m_offset = 0;
        var _board_n_offset = 0;

        // board obj
        var _board = null;

        // canvas size
        var _width = 0;
        var _height = 0;

        // first selected face
        var _first_p = null;
        // last moveout face
        var _old_p = null;

        // animation flag
        var _is_play_animation = false;

        // board state flag
        // 0: start
        // 1: pause
        // 2: stop
        var _board_state = 0;

        // current time
        var _current_time = null;
        var _pause_time = null;
        var _timer_time = null;

        // entry point
        window.onload = function () {
            // face img resource size
            _img_face_m = 13;
            _img_face_n = 4;
            _img_face_src_width = 60;
            _img_face_src_height = 60;
            _img_face_width = 60;
            _img_face_height = 60;
            _img_face_radius = 10;

            //// calc canvas size
            //_width = (16 + 2) * _img_face_width;
            //_height = (9 + 2) * _img_face_height;

            // get canvas obj
            _canvas = document.getElementById('canvas');
            if (_canvas != null && _canvas.getContext != null) {
                //_canvas.width = _width;
                //_canvas.height = _height;
                _canvas.style.backgroundImage = 'url(' + img_bg + ')';
                _ctx = _canvas.getContext("2d");
                _ctx.save();

                _canvas.onmousemove = OnCanvas_MouseMove;
                _canvas.onmousedown = OnCanvas_Click;
            }

            // load face image to image obj
            _img_face = new Image();
            _img_face.onload = function () {
                // new game
                btnNewGame_Click();
            }
            _img_face.src = img_src;
        }

        // event
        function btnNewGame_Click() {
            if (_is_play_animation) return;
            _board_state = 0;
            document.getElementById('btnOrder').value = '暂停查看排名';

            var boardsize = parseInt(document.getElementById('boardsize').value);
            if (boardsize != _boardsize) {
                _boardsize = boardsize;
                _first_p = null;
                _old_p = null;

                switch (boardsize) {
                    case 1:
                        _board_m = 8;
                        _board_n = 6;
                        break;
                    case 3:
                        _board_m = 16;
                        _board_n = 9;
                        break;
                    case 2:
                    default:
                        _board_m = 12;
                        _board_n = 8;
                        break;
                }
                _width = (_board_m + 2) * _img_face_width;
                _height = (_board_n + 2) * _img_face_height;
                _board_m_offset = (_width - (_board_m + 2) * _img_face_width) / 2;
                _board_n_offset = (_height - (_board_n + 2) * _img_face_height) / 2;

                if (_ctx != null) {
                    _canvas.width = _width;
                    _canvas.height = _height;
                    _ctx.restore();
                    _ctx.save();
                    _ctx.clearRect(0, 0, _width, _height);
                    _ctx.translate(_board_m_offset, _board_n_offset);
                }
                _board = null;
                _board = new Board();
                _board.Init(_board_m, _board_n, _img_face_m * _img_face_n);
            }

            _board.NewGame();

            if (_ctx != null) {
                draw_board();
            }

            if (_timer_time != null) {
                clearInterval(_timer_time);
                _current_time = null;
                _timer_time = null;
            }

            _current_time = (new Date()).getTime();
            draw_time(calc_time());
            _timer_time = setInterval(function () {
                draw_time(calc_time());
            }, 500);
        }

        function btnHint_Click() {
            if (_is_play_animation) return;
            if (_board_state > 0) return;

            if (_board != null) {
                var path = new PATH();
                if (_board.GetHint(path) && _ctx != null) {
                    // draw path
                    draw_face_animation(path.Start.X, path.Start.Y, 'rgba(255,40,40, 1.0)');
                    draw_face_animation(path.End.X, path.End.Y, 'rgba(255,40,40, 1.0)');
                    draw_path(path, 'rgba(255,40,40, 1.0)');

                    _is_play_animation = true;

                    setTimeout(function () {
                        _is_play_animation = false;

                        // erase path
                        erase_path(path);

                        // draw face
                        draw_face(_board.FaceItems[path.Start.X][path.Start.Y], path.Start.X, path.Start.Y);
                        draw_face(_board.FaceItems[path.End.X][path.End.Y], path.End.X, path.End.Y);
                    }, 300);
                }
            }
        }

        function btnOrder_Click() {
            if (_is_play_animation) return;
            if (_board_state == 2) return;
            if (localStorage == null || _ctx == null) return;

            if (_timer_time != null) {
                _board_state = 1;
                document.getElementById('btnOrder').value = '恢复游戏';

                // pause timer
                clearInterval(_timer_time);
                _timer_time = null;
                _pause_time = (new Date()).getTime();

                // draw order
                draw_order(true);
            }
            else {
                _board_state = 0;
                document.getElementById('btnOrder').value = '暂停查看排名';
                
                // draw board
                draw_board();
                
                // restart timer
                _current_time += (new Date()).getTime() - _pause_time;
                _pause_time = null;
                draw_time(calc_time());
                _timer_time = setInterval(function () {
                    draw_time(calc_time());
                }, 500);
            }
        }

        function btnRemoveOrder_Click() {
            if (localStorage == null) return;

            for (var i = 0; i < 5; i++) {
                var keyName = "name" + _boardsize + "_" + i;
                var keyTime = "time" + _boardsize + "_" + i;
                localStorage.removeItem(keyName);
                localStorage.removeItem(keyTime);
            }
        }

        function OnCanvas_MouseMove(e) {
            if (_is_play_animation) return;
            if (_board_state > 0) return;

            if (!e.offsetX) {
                var offsetP = calc_offset(_canvas);
                e.offsetX = e.pageX - offsetP.X;
                e.offsetY = e.clientY - offsetP.Y;
            }
            var x = e.offsetX - _board_m_offset;
            var y