文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >将类属性作为参数传递给函数的JavaScript

问将类属性作为参数传递给函数的JavaScript
EN

Stack Overflow用户
提问于 2020-05-24 03:38:56
回答 1查看 69关注 0票数 0

我试图用嵌入HTML的Javascript编写一个连接四种游戏。得分功能是目前为止最棘手的部分。我已经把它弄到了一个很有问题的地步。只要按以下顺序输入，就可以检测到获胜组合:向上、向下、向下-右(Diag)。

然而，如果胜利组合是左上角、左、右、右，则不会实现。

有人能解释一下我哪里出错了吗？(B)是否有办法只编写一种类方法来实现这一效果？

对于上下文，我使用了一个类似于链接列表的设计~，如果遍历是可能的，那么它将被执行，从而增加值hop_count。如果hop_count达到4，则通过警报宣布胜利者。

任何帮助都是非常感谢的！

​

代码语言：javascript
复制
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

.dot {
  height: 50px;
  width: 50px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
}
</style>
</head>
<body>

<h2>Connect Four</h2>

<div style="text-align:center">
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
</div>
<div style="text-align:center">
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
</div>
<div style="text-align:center">
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
</div>
<div style="text-align:center">
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
</div>
<div style="text-align:center">
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
</div>
<div style="text-align:center">
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
</div>

<script>

class GameObject{
  constructor(shape){
    this.shape = shape;
    this.clicks = 0;
    this.count = null;
    this.top_left = null;
    this.top_mid = null;
    this.top_right = null;
    this.mid_left = null;
    this.mid_right = null;
    this.low_left = null;
    this.low_mid = null;
    this.low_right = null;
    this.status = null;
    this.clickEvent();
  };
  clickEvent(){
    this.shape.addEventListener('click',function(){
      this.clicks += 1
      if (this.clicks % 2 == 1){
        this.shape.style.backgroundColor = 'red';
        this.status = 'red';
      }else{
        this.shape.style.backgroundColor = 'blue';
        this.status = 'blue';
      }
      this.navigate_ax1();
      this.navigate_ax2();
      this.navigate_ax3();
      this.navigate_ax4();
    }.bind(this)) // bind callback function to the the correct 'this' context
  };

  navigate_ax1(){
    let color = this.status;
    let current = this;
    let start = current.count;
    let hop_count = 1;
    while (hash_map[current.top_left]!= null){
      if (hash_map[current.top_left].status==color){
        current = hash_map[current.top_left];
        hop_count += 1;
      }else{
        break;
      };
    };
    current = hash_map[start];
    while (hash_map[current.low_right]!= null){
      if (hash_map[current.low_right]==color){
        current = hash_map[current.low_right];
        hop_count += 1;
      }else{
        break;
      };
    };
    console.log(`ax1 hop count ${hop_count}`)
    if (hop_count >= 4){
       alert(`${current.status} wins!`);
    }
  };

  navigate_ax2(){
    let color = this.status;
    let current = this;
    let start = current.count;
    let hop_count = 1;
    while (hash_map[current.top_mid]!= null){
      if (hash_map[current.top_mid].status==color){
        current = hash_map[current.top_mid];
        hop_count += 1;
      }else{
        break;
      };
    };
    current = hash_map[start];
    while (hash_map[current.low_mid]!= null){
      if (hash_map[current.low_mid].status==color){
        current = hash_map[current.low_mid];
        hop_count += 1;
      }else{
        break;
      };
    };
    if (hop_count >= 4){
      alert(`${current.status} wins!`);
    }
    console.log(`ax2 hop count ${hop_count}`)
  };

  navigate_ax3(){
    let color = this.status;
    let current = this;
    let start = current.count;
    let hop_count = 1;
    while (hash_map[current.top_right]!= null){
      if (hash_map[current.top_right].status==color){
        current = current.top_right;
        hop_count += 1;
      }else{
        break;
      };
    };
    current = hash_map[start];
    while (hash_map[current.low_left]!= null){
      if (hash_map[current.low_left].status==color){
        current = current.low_left;
        hop_count += 1;
      }else{
        break;
      };
    };
    if (hop_count >= 4){
      alert(`${current.status} wins!`);
    };
    console.log(`ax3 hop count ${hop_count}`)
  };

  navigate_ax4(){
    let color = this.status;
    let current = this;
    let start = current.count;
    let hop_count = 1;
    while (hash_map[current.mid_right]!= null){
      if (hash_map[current.mid_right].status ==color){
        current = current.mid_right;
        hop_count += 1;
      }else{
        break;
      }
    };
    current = hash_map[start];
    while (hash_map[current.mid_left]!= null){
      if (hash_map[current.mid_left].status==color){
        current = current.mid_left;
        hop_count += 1;
      }else{
        break;
      };
    };
    if (hop_count >= 4){
      alert(`${current.status} wins!`);
    }
    console.log(`ax4 hop count ${hop_count}`)
  };
};


let hash_map = {};
let shapes = document.querySelectorAll('.dot');
let count = 0;

shapes.forEach((shape)=> {
  let s = new GameObject(shape);
  count += 1;
  s.count = count;
  let neighbors = {
  top_left: count-8,
  top_mid: count-7,
  top_right: count-6,
  mid_left: count-1,
  mid_right: count+1,
  low_left: count+6,
  low_mid: count+7,
  low_right: count+8
  }

  for ([key,value] of Object.entries(neighbors)){
    if ((value > 0)&(value < 43)){
      s[key] = value;
    };
  };
  hash_map[count] = s;
});
</script>

</body>
</html>

​

javascript
function
class
properties
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-05-24 05:36:16

您忘记了在hash_map的current =遍历中引用实际的对象mid_left，以及其他没有工作的对象。

​

代码语言：javascript
复制
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

.dot {
  height: 50px;
  width: 50px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
}
</style>
</head>
<body>

<h2>Connect Four</h2>

<div style="text-align:center">
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
</div>
<div style="text-align:center">
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
</div>
<div style="text-align:center">
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
</div>
<div style="text-align:center">
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
</div>
<div style="text-align:center">
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
</div>
<div style="text-align:center">
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
</div>

<script>

class GameObject{
  constructor(shape){
    this.shape = shape;
    this.clicks = 0;
    this.count = null;
    this.top_left = null;
    this.top_mid = null;
    this.top_right = null;
    this.mid_left = null;
    this.mid_right = null;
    this.low_left = null;
    this.low_mid = null;
    this.low_right = null;
    this.status = null;
    this.clickEvent();
  };
  clickEvent(){
    this.shape.addEventListener('click',function(){
      this.clicks += 1
      if (this.clicks % 2 == 1){
        this.shape.style.backgroundColor = 'red';
        this.status = 'red';
      }else{
        this.shape.style.backgroundColor = 'blue';
        this.status = 'blue';
      }
      this.navigate_ax1();
      this.navigate_ax2();
      this.navigate_ax3();
      this.navigate_ax4();
    }.bind(this)) // bind callback function to the the correct 'this' context
  };

  navigate_ax1(){
    let color = this.status;
    let current = this;
    let start = current.count;
    let hop_count = 1;
    while (hash_map[current.top_left]!= null){
      if (hash_map[current.top_left].status==color){
        current = hash_map[current.top_left];
        hop_count += 1;
      }else{
        break;
      };
    };
    current = hash_map[start];
    while (hash_map[current.low_right]!= null){
      if (hash_map[current.low_right]==color){
        current = hash_map[current.low_right];
        hop_count += 1;
      }else{
        break;
      };
    };
    console.log(`ax1 hop count ${hop_count}`)
    if (hop_count >= 4){
       alert(`${current.status} wins!`);
    }
  };

  navigate_ax2(){
    let color = this.status;
    let current = this;
    let start = current.count;
    let hop_count = 1;
    while (hash_map[current.top_mid]!= null){
      if (hash_map[current.top_mid].status==color){
        current = hash_map[current.top_mid];
        hop_count += 1;
      }else{
        break;
      };
    };
    current = hash_map[start];
    while (hash_map[current.low_mid]!= null){
      if (hash_map[current.low_mid].status==color){
        current = hash_map[current.low_mid];
        hop_count += 1;
      }else{
        break;
      };
    };
    if (hop_count >= 4){
      alert(`${current.status} wins!`);
    }
    console.log(`ax2 hop count ${hop_count}`)
  };

  navigate_ax3(){
    let color = this.status;
    let current = this;
    let start = current.count;
    let hop_count = 1;
    while (hash_map[current.top_right]!= null){
      if (hash_map[current.top_right].status==color){
        current = hash_map[current.top_right];
        hop_count += 1;
      }else{
        break;
      };
    };
    current = hash_map[start];
    while (hash_map[current.low_left]!= null){
      if (hash_map[current.low_left].status==color){
        current = hash_map[current.low_left];
        hop_count += 1;
      }else{
        break;
      };
    };
    if (hop_count >= 4){
      alert(`${current.status} wins!`);
    };
    console.log(`ax3 hop count ${hop_count}`)
  };

  navigate_ax4(){
    let color = this.status;
    let current = this;
    let start = current.count;
    let hop_count = 1;
    while (hash_map[current.mid_right]!= null){
      if (hash_map[current.mid_right].status ==color){
        current = hash_map[current.mid_right];
        hop_count += 1;
      }else{
        break;
      }
    };
    current = hash_map[start];
    while (hash_map[current.mid_left]!= null){
      if (hash_map[current.mid_left].status==color){
        current = hash_map[current.mid_left];
        hop_count += 1;
      }else{
        break;
      };
    };
    console.log(hop_count)
    if (hop_count >= 4){
      alert(`${current.status} wins!`);
    }
    console.log(`ax4 hop count ${hop_count}`)
  };
};


let hash_map = {};
let shapes = document.querySelectorAll('.dot');
let count = 0;

shapes.forEach((shape)=> {
  let s = new GameObject(shape);
  count += 1;
  s.count = count;
  let neighbors = {
  top_left: count-8,
  top_mid: count-7,
  top_right: count-6,
  mid_left: count-1,
  mid_right: count+1,
  low_left: count+6,
  low_mid: count+7,
  low_right: count+8
  }

  for ([key,value] of Object.entries(neighbors)){
    if ((value > 0)&(value < 43)){
      s[key] = value;
    };
  };
  hash_map[count] = s;
});

</script>

</body>
</html>

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/61981353

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档