jbuddy_13
Reputation: 1250
JavaScript passing class attributes as parameters to a function
I'm trying to write a connect four game in Javascript embedded in HTML. The scoring function is by far the trickiest part. I've gotten it to a point where it's quite buggy. Winning combinations can be detected so long as they are entered in the following orders: Up, Down, Down-right (diag.)
However, winning combinations will not be realized if they are Up-left, Left, Right, Up-right.
Can someone explain (A) where I'm going wrong? And (B) Is there a way to write just one class method to accomplish this effect?
For context, I'm using a design ~similar to a linked list, where if a traversal is possible, it will be executed, augmenting the value hop_count. If hop_count reaches 4 a winner is declared via alert.
Any help is appreciated!
<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>Upvotes: 0
Views: 135
Answers (1)
user120242
Reputation: 15268
You forgot to reference the actual object hash_map in your current = traversal for mid_left and the other ones that didn't work.
<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>Upvotes: 1
Related Questions
- How to pass an object property as a parameter? (JavaScript)
- Have function passed through constructor access class's attributes
- Javascript class properties - how to assign a function as value to them?
- Declare class in function argument in Javascript
- Passing parameters to a class function in JavaScript
- Javascript passing object to function
- Javascript objects and passing member functions as parameters
- Javascript class passing parameters
- Passing Javascript object attribute to a function-Call by value
- Javascript function as class parameter?