1. class Snake{
    2. // 表示蛇头的元素
    3. head: HTMLElement;
    4. // 蛇的身体(包括蛇头)
    5. bodies: HTMLCollection;
    6. // 获取蛇的容器
    7. element: HTMLElement;
    8. constructor() {
    9. this.element = document.getElementById('snake')!;
    10. this.head = document.querySelector('#snake>div') as HTMLElement;
    11. this.bodies = document.getElementById('snake')!.getElementsByTagName('div');
    12. }
    13. // 获取蛇的坐标(蛇头坐标)
    14. get X() {
    15. return this.head.offsetLeft;
    16. }
    17. // 获取蛇的Y轴坐标
    18. get Y() {
    19. return this.head.offsetTop;
    20. }
    21. // 设置蛇头的坐标
    22. set X(value: number) {
    23. this.head.style.left = value + 'px'
    24. }
    25. set Y(value: number) {
    26. this.head.style.top = value + 'px'
    27. }
    28. // 蛇增加身体的方法
    29. addBody() {
    30. this.element.insertAdjacentHTML('beforeend', '<div></div>');
    31. }
    32. }
    33. export default Snake;