我正在尝试用嵌入HTML的Javascript编写一个connect-four游戏。评分功能是迄今为止最棘手的部分。我已经到了一个相当麻烦的地步。只要按以下顺序输入中奖组合,即可检测到中奖组合:向上、向下、向右向下(diag.)
但是,如果组合为左上、左上、右上、右上,则无法实现获胜组合。
有人能解释一下我错在哪里吗?
(B)有没有一种方法可以只编写一个类方法来实现这种效果?
对于上下文,我使用了一种类似于链表的设计,如果可以进行遍历,就会执行遍历,从而增加值hop_计数。如果hop_计数达到4,则通过警报宣布获胜者。
<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>
