如何为足球赛事手动追踪工具添加快捷键切换标记颜色并关联坐标记录功能

已实现的需求优化点 #

• 支持键盘快捷键切换标记点颜色：按1切换为红色（可代表主队控球）、按2切换为蓝色（可代表客队控球）、按0恢复默认黑色，切换后后续所有打点自动生效
• 控制台输出的坐标信息新增color字段，和当前标记点颜色完全绑定，后续做数据分析时可直接通过该字段区分不同控球权的轨迹数据
• 修复了原代码中足球场底图<img>标签放置在<body>外的规范问题

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>足球赛事轨迹追踪工具</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      position: relative;
    }
    .dot {
      width: 2px;
      height: 2px;
      position: absolute;
      z-index: 999; /* 保证打点显示在底图上方 */
    }
    img {
      display: block;
      width: 100%;
      max-width: 1200px;
    }
  </style>
</head>
<body>
  <!-- 足球场底图移到body内部，符合HTML规范 -->
  <img src="Soccer_Template.png" alt="足球场模板">
<script>
(function() {
    "use strict";
    var mousePos;
    var currentColor = 'black'; // 初始默认打点颜色

    document.onmousemove = handleMouseMove;
    // 新增键盘快捷键监听
    document.onkeydown = handleKeyPress;
    setInterval(getMousePosition, 100);

    function handleKeyPress(e) {
        e = e || window.event;
        // 按数字键切换颜色，可根据需求自行修改按键和对应颜色
        switch(e.key) {
            case '1':
                currentColor = 'red';
                break;
            case '2':
                currentColor = 'blue';
                break;
            case '0':
                currentColor = 'black';
                break;
        }
    }

    function handleMouseMove(event) {
        var eventDoc, doc, body;
        event = event || window.event;

        if (event.pageX == null && event.clientX != null) {
            eventDoc = (event.target && event.target.ownerDocument) || document;
            doc = eventDoc.documentElement;
            body = eventDoc.body;

            event.pageX = event.clientX +
              (doc && doc.scrollLeft || body && body.scrollLeft || 0) -
              (doc && doc.clientLeft || body && body.clientLeft || 0);
            event.pageY = event.clientY +
              (doc && doc.scrollTop  || body && body.scrollTop  || 0) -
              (doc && doc.clientTop  || body && body.clientTop  || 0 );
        }

        mousePos = {
            x: event.pageX,
            y: event.pageY
        };
    }

    function getMousePosition() {
        var pos = mousePos;
        if (!pos) return;
        // 控制台输出携带颜色字段，方便后续数据分析
        console.log("mouse location:", {
            x: pos.x,
            y: pos.y,
            color: currentColor
        });
        var dot = document.createElement('div');
        dot.className = "dot";
        dot.style.left = pos.x + "px";
        dot.style.top = pos.y + "px";
        dot.style.backgroundColor = currentColor; // 绑定当前选中的颜色
        document.body.appendChild(dot);
    }
})();
</script>
</body>
</html>

补充说明 #

如果需要新增更多控球状态，直接在handleKeyPress的switch分支里新增按键和对应颜色即可，控制台输出会自动同步颜色字段，不需要额外修改其他逻辑。

内容的提问来源于stack exchange，提问作者Howse33