Menu
Hi all ? I’m trying to develop a tic tac toe game in js, using minmax algorithm for the AI.
But, as in the previous posts, the problem i have is about handling a class “inside” a function called by an event.
Uhm… probably the previous sentence is confusing, so let’s show the code ?
[code]
<html>
<head>
<script>
var n = 3;
function $(id){
var l = arguments.length;
var ref = new Array();
if(l > 1){
for(var i = 0; i < l; i++)
re.push(document.getElementById(arguments[i]));
return ref;
}
if(typeof id == “string”)
return document.getElementById(id);
return document;
}
function tictactoe(n){
this.n = n;
this.move = 0;
this.init = function(){
this.draw();
this.a = new Array();
for(var i = 0; i < this.n; i++)
for(var j = 0; j < this.n; j++)
this.a.push(0);
}
this.minmax = function(s){
var v = maxv(s);
return 0;
}
this.calculate = function(){
this.src = (this.move%2) ? ‘x.jpg’:’o.jpg’;
this.move += 1;
}
this.draw = function(){
for(var i = 0; i <this.n; i++){
for(j = 0; j < this.n; j++){
var img = document.createElement(‘img’);
img.setAttribute(‘id’,i*n+j);
img.setAttribute(‘src’,’e.jpg’);
img.onclick = this.calculate;
if (img.captureEvents) img.captureEvents(Event.CLICK);
$(‘container’).appendChild(img);
}
var br = document.createElement(‘br’);
$(‘container’).appendChild(br);
}
}
}
</script>
</head>
<body>
<div id=’container’>
</div>
<script>
var t = new tictactoe(3);
t.init();
</script>
</body>
</html>
The problem is,
[code]this.move += 1
called in this.calculate, the function called by the onclick event, doesn’t have any effect on the this.move element of the Map object.
How can i modify his value?