如何在函数onclick中调用函数
How to call a function in a function onclick
起初我想为我糟糕的英语道歉。
我正在 JavaScript 中玩井字游戏，但重新加载游戏对我不起作用。我做了一个这样的按钮：<button onclick="restart()"> Opnieuw! </button> 我的脚本是这样的：
function Canvas(){
/* other functions */
function restart(){
}
}
当我尝试点击按钮时，我得到：
Uncaught ReferenceError: restart is not defined [chrome]
我需要在我的 canvas 函数中放置重新启动函数来计算值的概率。那么有人知道我做错了什么吗？
这是我的全部代码（运行 整页中实际使游戏正常运行的代码段）：
/*
---------------------------
Door Thomas Pereira,
6-5-2015, 14:00, NL
---------------------------
*/
function Canvas() {
var ctx = document.getElementById('game').getContext('2d');
var cw = ctx.canvas.width,
ch = ctx.canvas.height;
var snelheid = 1;
var linewidth = 6;
var fSmall = 0.3;
var fout = -1;
var apl = {};
apl.speak = function(line) {
console.log(line);
};
function tekenkruis(x, y, w, h) {
ctx.beginPath();
x += w * (fSmall * 0.5);
y += h * (fSmall * 0.5);
w -= w * fSmall;
h -= h * fSmall;
ctx.moveTo(x, y);
ctx.lineTo(x + w, y + h);
ctx.moveTo(x + w, y);
ctx.lineTo(x, y + h);
ctx.lineWidth = linewidth;
ctx.stroke();
}
function tekencirkel(x, y, w, h) {
ctx.beginPath();
x += w * (fSmall * 0.5);
y += h * (fSmall * 0.5);
w -= w * fSmall;
h -= h * fSmall;
ctx.arc(x + (w * 0.5), y + (h * 0.5), w * 0.5, 0, 2 * Math.PI, false);
ctx.lineWidth = linewidth;
ctx.stroke();
}
function random(min, max, t, niet) {
var num = Math.floor(Math.random() * (max - min + 1) + min);
if (t) {
for (var i = "fout"; i == even_odd(num, t, niet); i) {
var num = Math.floor(Math.random() * (max - min + 1) + min);
}
return num;
} else {
return num;
}
}
function even_odd(num, t, niet) {
if (num % 2 == 0 && t == "even" && num != niet || num % 2 == 1 && t == "odd" && num != niet) {
return num;
} else {
return "fout";
}
}
function checkbestaan(z) {
var q = invullen.plaatsen[z];
if (q.kruis != "on" && q.cirkel != "on") {
return z;
} else {
return "fout"
}
}
/* Main Functions */
function background() {
this.w = cw, this.h = ch, this.x = 0, this.y = 0, this.color = "#F4F4F5";
this.draw = function() {
//draw
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.w, this.h);
ctx.beginPath();
ctx.moveTo(0, (1 / 3) * ch);
ctx.lineTo(cw, (1 / 3) * ch);
ctx.moveTo(0, (2 / 3) * ch);
ctx.lineTo(cw, (2 / 3) * ch);
ctx.moveTo((1 / 3) * cw, 0);
ctx.lineTo((1 / 3) * cw, ch);
ctx.moveTo((2 / 3) * cw, 0);
ctx.lineTo((2 / 3) * cw, ch);
ctx.lineWidth = linewidth;
ctx.stroke();
}
}
function invullen() {
this.x = fout;
this.y = fout;
this.call = "on";
this.tel = 0;
this.kansplaatsen = [];
this.tel2 = 0;
this.plaatsen = [{
"naam": 1,
"x": 0,
"y": 0,
"w": cw * (1 / 3),
"h": ch * (1 / 3),
"kruis": "off",
"cirkel": "off"
}, {
"naam": 2,
"x": cw * (1 / 3),
"y": 0,
"w": cw * (1 / 3),
"h": ch * (1 / 3),
"kruis": "off",
"cirkel": "off"
}, {
"naam": 3,
"x": cw * (2 / 3),
"y": 0,
"w": cw * (1 / 3),
"h": ch * (1 / 3),
"kruis": "off",
"cirkel": "off"
}, {
"naam": 8,
"x": 0,
"y": ch * (1 / 3),
"w": cw * (1 / 3),
"h": ch * (1 / 3),
"kruis": "off",
"cirkel": "off"
}, {
"naam": "fout",
"x": cw * (1 / 3),
"y": ch * (1 / 3),
"w": cw * (1 / 3),
"h": ch * (1 / 3),
"kruis": "off",
"cirkel": "off"
}, {
"naam": 4,
"x": cw * (2 / 3),
"y": ch * (1 / 3),
"w": cw * (1 / 3),
"h": ch * (1 / 3),
"kruis": "off",
"cirkel": "off"
}, {
"naam": 7,
"x": 0,
"y": ch * (2 / 3),
"w": cw * (1 / 3),
"h": ch * (1 / 3),
"kruis": "off",
"cirkel": "off"
}, {
"naam": 6,
"x": cw * (1 / 3),
"y": ch * (2 / 3),
"w": cw * (1 / 3),
"h": ch * (1 / 3),
"kruis": "off",
"cirkel": "off"
}, {
"naam": 5,
"x": cw * (2 / 3),
"y": ch * (2 / 3),
"w": cw * (1 / 3),
"h": ch * (1 / 3),
"kruis": "off",
"cirkel": "off"
}, ];
this.win = [{
"plek1": 0,
"plek2": 1,
"plek3": 2
}, {
"plek1": 3,
"plek2": 4,
"plek3": 5
}, {
"plek1": 6,
"plek2": 7,
"plek3": 8
}, {
"plek1": 0,
"plek2": 3,
"plek3": 6
}, {
"plek1": 1,
"plek2": 4,
"plek3": 7
}, {
"plek1": 2,
"plek2": 5,
"plek3": 8
}, {
"plek1": 0,
"plek2": 4,
"plek3": 8
}, {
"plek1": 2,
"plek2": 4,
"plek3": 6
}, ];
this.wandplaatsen = [{
"plek": "undefined"
}, {
"plek": 0
}, {
"plek": 1
}, {
"plek": 2
}, {
"plek": 5
}, {
"plek": 8
}, {
"plek": 7
}, {
"plek": 6
}, {
"plek": 3
}, ];
this.draw = function() {
//check of er in een vak geklikt is
for (var i = 0; i < this.plaatsen.length; i++) {
var k = this.plaatsen[i]
if (this.x >= k.x && this.x <= k.x + k.w && this.y >= k.y && this.y <= k.y + k.h && k.cirkel != "on" && k.kruis != "on") {
k.kruis = "on";
this.call = "on";
this.stap = i;
}
}
this.x = fout;
this.y = fout; //schakel klik uit
//als er geklikt is de PC
if (this.call == "on") {
this.tel++
this.checklaatste = this.laatste;
loop1:
for (var i = 1; i == 1; i) {
loop2: for (var i = 1; i < this.wandplaatsen.length; i++) {
var k = this.wandplaatsen[i];
if (i + 1 > 8) {
var de = i + 1 - 8;
} else {
var de = i + 1;
};
var d = this.wandplaatsen[de];
if (i - 1 < 1) {
var ce = i - 1 + 8;
} else {
var ce = i - 1;
};
var c = this.wandplaatsen[ce];
if (i + 2 > 8) {
var re = i + 2 - 8;
} else {
var re = i + 2;
};
var r = this.wandplaatsen[re];
if (i - 2 < 1) {
var qe = i - 2 + 8;
} else {
var qe = i - 2;
};
var q = this.wandplaatsen[qe];
if (i + 4 > 8) {
var ye = i + 4 - 8
} else {
var ye = i + 4
};
var y = this.wandplaatsen[ye];
if (i - 4 < 1) {
var we = i - 4 + 8
} else {
var we = i - 4
};
var w = this.wandplaatsen[we];
apl.speak("Niewe i is: " + i + " - " + this.plaatsen[k.plek].cirkel);
if (this.plaatsen[k.plek].cirkel == "on") {
if (i % 2 == 1) {
apl.speak("door " + i);
if (this.plaatsen[d.plek].cirkel == "on") {
if (i + 2 > 8) {
var g = i + 2 - 8;
} else {
var g = i + 2;
};
apl.speak("hier zijn we d: " + checkbestaan(this.wandplaatsen[g].plek));
if (checkbestaan(this.wandplaatsen[g].plek) != "fout") {
this.plaatsen[this.wandplaatsen[g].plek].cirkel = "on";
this.laatste = this.wandplaatsen[g].plek;
this.call = "off";
break loop1;
};
}
if (this.plaatsen[c.plek].cirkel == "on") {
if (i - 2 < 1) {
var ge = i - 2 + 8;
} else {
var ge = i - 2;
};
apl.speak("hier zijn we c: " + checkbestaan(this.wandplaatsen[ge].plek));
if (checkbestaan(this.wandplaatsen[ge].plek) != "fout") {
apl.speak("hier zijn we c: done: " + i);
this.plaatsen[this.wandplaatsen[ge].plek].cirkel = "on";
this.laatste = this.wandplaatsen[ge].plek;
this.call = "off";
break loop1;
};
}
if (this.plaatsen[r.plek].cirkel == "on") {
if (i + 1 > 8) {
var ge = i + 1 - 8;
} else {
var ge = i + 1;
};
apl.speak("hier zijn we r: " + checkbestaan(this.wandplaatsen[ge].plek));
if (checkbestaan(this.wandplaatsen[ge].plek) != "fout") {
this.plaatsen[this.wandplaatsen[ge].plek].cirkel = "on";
this.laatste = this.wandplaatsen[ge].plek;
this.call = "off";
break loop1;
};
}
if (this.plaatsen[q.plek].cirkel == "on") {
if (i - 1 < 1) {
var ge = i - 1 + 8;
} else {
var ge = i - 1;
};
/*apl.speak("hier zijn we q: "+checkbestaan(this.wandplaatsen[ge].plek));*/
if (checkbestaan(this.wandplaatsen[ge].plek) != "fout") {
this.plaatsen[this.wandplaatsen[ge].plek].cirkel = "on";
this.laatste = this.wandplaatsen[ge].plek;
this.call = "off";
break loop1;
};
}
if (this.plaatsen[w.plek].cirkel == "on") {
var g = 4;
apl.speak("hier zijn we wr: " + checkbestaan(g));
if (checkbestaan(g) != "fout") {
this.plaatsen[g].cirkel = "on";
this.laatste = g;
this.call = "off";
break loop1;
};
}
if (this.plaatsen[y.plek].cirkel == "on") {
var g = 4;
apl.speak("hier zijn we yr: " + checkbestaan(g));
if (checkbestaan(g) != "fout") {
this.plaatsen[g].cirkel = "on";
this.laatste = g;
this.call = "off";
break loop1;
};
}
}
/* if( i % 2 == 0 ){
apl.speak("door even"+ i);
if( this.plaatsen[w.plek].cirkel == "on" && this.call == "on" ){
if( i-4 < 1 ){ var g = 8-Math.abs(i-4); } else { var g = i-4; };
apl.speak("hier zijn we w: "+checkbestaan(this.wandplaatsen[g].plek));
if( checkbestaan(this.wandplaatsen[g].plek) != "fout" ){
this.plaatsen[this.wandplaatsen[g].plek].cirkel = "on";
this.laatste = this.wandplaatsen[g].plek;
this.call = "off";
};
}
if( this.plaatsen[y.plek].cirkel == "on" && this.call == "on" ){
if( i+4 > 8 ){ var g = i+4-8; } else { var g = i+4; };
apl.speak("hier zijn we y: "+checkbestaan(this.wandplaatsen[g].plek));
if( checkbestaan(this.wandplaatsen[g].plek) != "fout" ){
this.plaatsen[this.wandplaatsen[g].plek].cirkel = "on";
this.laatste = this.wandplaatsen[g].plek;
this.call = "off";
};
}
} */
}
}
for (var i = 1; i < this.wandplaatsen.length; i++) {
var k = this.wandplaatsen[i];
if (i - 4 < 1) {
var we = i - 4 + 8
} else {
var we = i - 4
};
var w = this.wandplaatsen[we];
if (this.plaatsen[k.plek].kruis == "on" && i % 2 == 0) {
apl.speak("door even : " + i)
if (this.plaatsen[4].kruis == "on") {
apl.speak("hier zijn we 4: " + checkbestaan(w.plek));
if (checkbestaan(w.plek) != "fout") {
this.plaatsen[w.plek].cirkel = "on";
this.laatste = w.plek;
this.call = "off";
break loop1;
}
}
if (this.plaatsen[w.plek].kruis == "on") {
apl.speak("hier zijn we w.plek: " + checkbestaan(4));
if (checkbestaan(4) != "fout") {
this.plaatsen[4].cirkel = "on";
this.laatste = 4;
this.call = "off";
break loop1;
}
}
}
}
break loop1;
}
apl.speak("--------------------------");
if (this.checklaatste != this.laatste) {
this.call = "off"
};
if (this.tel == 1 && this.call == "on") {
this.stap1 = random(0, 8, "even", 4);
for (var i = "fout"; i == checkbestaan(this.stap1); i) {
this.stap1 = random(0, 8, "even", 4);
};
this.plaatsen[this.stap1].cirkel = "on";
this.call = "off";
this.laatste = this.stap1;
} else if (this.tel == 2 && this.call == "on") {
var g = this.plaatsen[this.stap1].naam + 4;
if (g > 8) {
var g = g - 8;
}
var c = this.plaatsen[this.stap1].naam + 1;
var d = this.plaatsen[this.stap1].naam - 1;
if (d > 8) {
var d = d - 8;
}
if (this.stap != 4 || checkbestaan(this.wandplaatsen[g].plek) == "fout") {
this.stap2 = random(0, 8, "even", 4)
for (var i = "fout"; i == checkbestaan(this.stap2); i) {
this.stap2 = random(0, 8, "even", 4)
};
} else {
this.stap2 = this.wandplaatsen[g].plek;
}
this.plaatsen[this.stap2].cirkel = "on";
this.call = "off";
this.laatste = this.stap2;
} else if (this.tel == 3 && this.call == "on") {
this.stap3 = random(0, 8, "even", 4)
for (var i = "fout"; i == checkbestaan(this.stap3); i) {
this.stap3 = random(0, 8, "even", 4)
this.tel2++;
if (this.tel2 > 1000) {
this.tel2 = 0;
this.stap3 = random(0, 8);
for (var i = "fout"; i == checkbestaan(this.stap3); i) {
this.stap3 = random(0, 8);
};
};
};
this.plaatsen[this.stap3].cirkel = "on";
this.call = "off";
this.laatste = this.stap3;
} else if (this.tel == 4 && this.call == "on") {
this.stap4 = random(0, 8, "even", 4)
for (var i = "fout"; i == checkbestaan(this.stap4); i) {
this.stap4 = random(0, 8, "even", 4);
this.tel2++;
if (this.tel2 > 1000) {
this.tel2 = 0;
this.stap4 = random(0, 8);
for (var i = "fout"; i == checkbestaan(this.stap4); i) {
this.stap4 = random(0, 8);
};
};
}
this.plaatsen[this.stap4].cirkel = "on";
this.call = "off";
this.laatste = this.stap4;
} else if (this.call == "on") {
var q = random(0, 8);
for (var i = "fout"; i == checkbestaan(q); i) {
var q = random(0, 8);
};
this.plaatsen[q].cirkel = "on"
this.call = "off";
this.laatste = q;
}
}
//teken
for (var i = 0; i < this.plaatsen.length; i++) {
var k = this.plaatsen[i];
if (k.kruis == "on") {
tekenkruis(k.x, k.y, k.w, k.h)
}
}
for (var i = 0; i < this.plaatsen.length; i++) {
var k = this.plaatsen[i];
if (k.cirkel == "on") {
tekencirkel(k.x, k.y, k.w, k.h)
};
}
}
}
function checkwin() {
this.done = "false"
this.draw = function() {
for (var i = 0; i < invullen.win.length; i++) {
if (invullen.plaatsen[invullen.win[i].plek1].kruis == "on" && invullen.plaatsen[invullen.win[i].plek2].kruis == "on" && invullen.plaatsen[invullen.win[i].plek3].kruis == "on") {
invullen.plaatsen[invullen.laatste].cirkel = "off";
for (var i = 0; i < invullen.plaatsen.length; i++) {
var k = invullen.plaatsen[i];
if (k.cirkel == "on") {
tekencirkel(k.x, k.y, k.w, k.h)
};
}
ctx.font = "17px Arial";
ctx.textBaseline = "middle";
ctx.fillStyle = "black";
var text = " Jij hebt gewonnen!!"
ctx.fillText(text, 20, 20);
clearInterval(animateInterval);
this.done = "true"
}
}
for (var i = 0; i < invullen.win.length; i++) {
if (this.done != "true" && invullen.plaatsen[invullen.win[i].plek1].cirkel == "on" && invullen.plaatsen[invullen.win[i].plek2].cirkel == "on" && invullen.plaatsen[invullen.win[i].plek3].cirkel == "on") {
ctx.font = "17px Arial";
ctx.textBaseline = "middle";
ctx.fillStyle = "black";
var text = "De PC heeft gewonnen, jammer"
ctx.fillText(text, 20, 20);
clearInterval(animateInterval);
}
}
}
}
var background = new background();
var invullen = new invullen();
var checkwin = new checkwin();
function draw() {
ctx.save();
ctx.clearRect(0, 0, cw, ch);
//draw
background.draw();
invullen.draw();
checkwin.draw();
ctx.restore();
}
var animateInterval = setInterval(draw, snelheid);
ctx.canvas.addEventListener('click', function(event) {
invullen.x = event.clientX - ctx.canvas.offsetLeft;
invullen.y = event.clientY - ctx.canvas.offsetTop;
});
function restart() {
background.w = cw, background.h = ch, background.x = 0, background.y = 0, background.color = "#F4F4F5";
invullen.x = fout;
invullen.y = fout;
invullen.call = "on";
invullen.tel = 0;
invullen.kansplaatsen = [];
invullen.tel2 = 0;
invullen.plaatsen = [{
"naam": 1,
"x": 0,
"y": 0,
"w": cw * (1 / 3),
"h": ch * (1 / 3),
"kruis": "off",
"cirkel": "off"
}, {
"naam": 2,
"x": cw * (1 / 3),
"y": 0,
"w": cw * (1 / 3),
"h": ch * (1 / 3),
"kruis": "off",
"cirkel": "off"
}, {
"naam": 3,
"x": cw * (2 / 3),
"y": 0,
"w": cw * (1 / 3),
"h": ch * (1 / 3),
"kruis": "off",
"cirkel": "off"
}, {
"naam": 8,
"x": 0,
"y": ch * (1 / 3),
"w": cw * (1 / 3),
"h": ch * (1 / 3),
"kruis": "off",
"cirkel": "off"
}, {
"naam": "fout",
"x": cw * (1 / 3),
"y": ch * (1 / 3),
"w": cw * (1 / 3),
"h": ch * (1 / 3),
"kruis": "off",
"cirkel": "off"
}, {
"naam": 4,
"x": cw * (2 / 3),
"y": ch * (1 / 3),
"w": cw * (1 / 3),
"h": ch * (1 / 3),
"kruis": "off",
"cirkel": "off"
}, {
"naam": 7,
"x": 0,
"y": ch * (2 / 3),
"w": cw * (1 / 3),
"h": ch * (1 / 3),
"kruis": "off",
"cirkel": "off"
}, {
"naam": 6,
"x": cw * (1 / 3),
"y": ch * (2 / 3),
"w": cw * (1 / 3),
"h": ch * (1 / 3),
"kruis": "off",
"cirkel": "off"
}, {
"naam": 5,
"x": cw * (2 / 3),
"y": ch * (2 / 3),
"w": cw * (1 / 3),
"h": ch * (1 / 3),
"kruis": "off",
"cirkel": "off"
}, ];
invullen.win = [{
"plek1": 0,
"plek2": 1,
"plek3": 2
}, {
"plek1": 3,
"plek2": 4,
"plek3": 5
}, {
"plek1": 6,
"plek2": 7,
"plek3": 8
}, {
"plek1": 0,
"plek2": 3,
"plek3": 6
}, {
"plek1": 1,
"plek2": 4,
"plek3": 7
}, {
"plek1": 2,
"plek2": 5,
"plek3": 8
}, {
"plek1": 0,
"plek2": 4,
"plek3": 8
}, {
"plek1": 2,
"plek2": 4,
"plek3": 6
}, ];
invullen.wandplaatsen = [{
"plek": "undefined"
}, {
"plek": 0
}, {
"plek": 1
}, {
"plek": 2
}, {
"plek": 5
}, {
"plek": 8
}, {
"plek": 7
}, {
"plek": 6
}, {
"plek": 3
}, ];
checkwin.done = "false"
}
};
window.addEventListener('load', function(event) {
Canvas();
});
#game {
width: 500px;
height: 500px;
}
<canvas id="game" width="500px" height="500px">
Please get a new browser!
</canvas>
<button onclick="restart()">Opnieuw!</button>
您必须在全局上下文中声明 restart 才能从按钮访问它。
如果你必须声明它 Canvas 函数替换
function replace(){
//your code
}
到此无var:
restart = function(){
//your same code
}
这将访问 canvas 函数中的局部变量并全局声明它。
你可以这样做：
function Canvas(){
/* other functions */
this.restart = function(){
}
}
然后：
var canvas = new Canvas();
button.onclick = function() {
canvas.restart();
}
通过这种方式，您可以将函数调用到上下文中canvas。因为，this.restart 现在是属于 Canvas
的方法
起初我想为我糟糕的英语道歉。
我正在 JavaScript 中玩井字游戏，但重新加载游戏对我不起作用。我做了一个这样的按钮：<button onclick="restart()"> Opnieuw! </button> 我的脚本是这样的：
function Canvas(){
/* other functions */
function restart(){
}
}
当我尝试点击按钮时，我得到：
Uncaught ReferenceError: restart is not defined [chrome]
我需要在我的 canvas 函数中放置重新启动函数来计算值的概率。那么有人知道我做错了什么吗？
这是我的全部代码（运行 整页中实际使游戏正常运行的代码段）：
/*
---------------------------
Door Thomas Pereira,
6-5-2015, 14:00, NL
---------------------------
*/
function Canvas() {
var ctx = document.getElementById('game').getContext('2d');
var cw = ctx.canvas.width,
ch = ctx.canvas.height;
var snelheid = 1;
var linewidth = 6;
var fSmall = 0.3;
var fout = -1;
var apl = {};
apl.speak = function(line) {
console.log(line);
};
function tekenkruis(x, y, w, h) {
ctx.beginPath();
x += w * (fSmall * 0.5);
y += h * (fSmall * 0.5);
w -= w * fSmall;
h -= h * fSmall;
ctx.moveTo(x, y);
ctx.lineTo(x + w, y + h);
ctx.moveTo(x + w, y);
ctx.lineTo(x, y + h);
ctx.lineWidth = linewidth;
ctx.stroke();
}
function tekencirkel(x, y, w, h) {
ctx.beginPath();
x += w * (fSmall * 0.5);
y += h * (fSmall * 0.5);
w -= w * fSmall;
h -= h * fSmall;
ctx.arc(x + (w * 0.5), y + (h * 0.5), w * 0.5, 0, 2 * Math.PI, false);
ctx.lineWidth = linewidth;
ctx.stroke();
}
function random(min, max, t, niet) {
var num = Math.floor(Math.random() * (max - min + 1) + min);
if (t) {
for (var i = "fout"; i == even_odd(num, t, niet); i) {
var num = Math.floor(Math.random() * (max - min + 1) + min);
}
return num;
} else {
return num;
}
}
function even_odd(num, t, niet) {
if (num % 2 == 0 && t == "even" && num != niet || num % 2 == 1 && t == "odd" && num != niet) {
return num;
} else {
return "fout";
}
}
function checkbestaan(z) {
var q = invullen.plaatsen[z];
if (q.kruis != "on" && q.cirkel != "on") {
return z;
} else {
return "fout"
}
}
/* Main Functions */
function background() {
this.w = cw, this.h = ch, this.x = 0, this.y = 0, this.color = "#F4F4F5";
this.draw = function() {
//draw
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.w, this.h);
ctx.beginPath();
ctx.moveTo(0, (1 / 3) * ch);
ctx.lineTo(cw, (1 / 3) * ch);
ctx.moveTo(0, (2 / 3) * ch);
ctx.lineTo(cw, (2 / 3) * ch);
ctx.moveTo((1 / 3) * cw, 0);
ctx.lineTo((1 / 3) * cw, ch);
ctx.moveTo((2 / 3) * cw, 0);
ctx.lineTo((2 / 3) * cw, ch);
ctx.lineWidth = linewidth;
ctx.stroke();
}
}
function invullen() {
this.x = fout;
this.y = fout;
this.call = "on";
this.tel = 0;
this.kansplaatsen = [];
this.tel2 = 0;
this.plaatsen = [{
"naam": 1,
"x": 0,
"y": 0,
"w": cw * (1 / 3),
"h": ch * (1 / 3),
"kruis": "off",
"cirkel": "off"
}, {
"naam": 2,
"x": cw * (1 / 3),
"y": 0,
"w": cw * (1 / 3),
"h": ch * (1 / 3),
"kruis": "off",
"cirkel": "off"
}, {
"naam": 3,
"x": cw * (2 / 3),
"y": 0,
"w": cw * (1 / 3),
"h": ch * (1 / 3),
"kruis": "off",
"cirkel": "off"
}, {
"naam": 8,
"x": 0,
"y": ch * (1 / 3),
"w": cw * (1 / 3),
"h": ch * (1 / 3),
"kruis": "off",
"cirkel": "off"
}, {
"naam": "fout",
"x": cw * (1 / 3),
"y": ch * (1 / 3),
"w": cw * (1 / 3),
"h": ch * (1 / 3),
"kruis": "off",
"cirkel": "off"
}, {
"naam": 4,
"x": cw * (2 / 3),
"y": ch * (1 / 3),
"w": cw * (1 / 3),
"h": ch * (1 / 3),
"kruis": "off",
"cirkel": "off"
}, {
"naam": 7,
"x": 0,
"y": ch * (2 / 3),
"w": cw * (1 / 3),
"h": ch * (1 / 3),
"kruis": "off",
"cirkel": "off"
}, {
"naam": 6,
"x": cw * (1 / 3),
"y": ch * (2 / 3),
"w": cw * (1 / 3),
"h": ch * (1 / 3),
"kruis": "off",
"cirkel": "off"
}, {
"naam": 5,
"x": cw * (2 / 3),
"y": ch * (2 / 3),
"w": cw * (1 / 3),
"h": ch * (1 / 3),
"kruis": "off",
"cirkel": "off"
}, ];
this.win = [{
"plek1": 0,
"plek2": 1,
"plek3": 2
}, {
"plek1": 3,
"plek2": 4,
"plek3": 5
}, {
"plek1": 6,
"plek2": 7,
"plek3": 8
}, {
"plek1": 0,
"plek2": 3,
"plek3": 6
}, {
"plek1": 1,
"plek2": 4,
"plek3": 7
}, {
"plek1": 2,
"plek2": 5,
"plek3": 8
}, {
"plek1": 0,
"plek2": 4,
"plek3": 8
}, {
"plek1": 2,
"plek2": 4,
"plek3": 6
}, ];
this.wandplaatsen = [{
"plek": "undefined"
}, {
"plek": 0
}, {
"plek": 1
}, {
"plek": 2
}, {
"plek": 5
}, {
"plek": 8
}, {
"plek": 7
}, {
"plek": 6
}, {
"plek": 3
}, ];
this.draw = function() {
//check of er in een vak geklikt is
for (var i = 0; i < this.plaatsen.length; i++) {
var k = this.plaatsen[i]
if (this.x >= k.x && this.x <= k.x + k.w && this.y >= k.y && this.y <= k.y + k.h && k.cirkel != "on" && k.kruis != "on") {
k.kruis = "on";
this.call = "on";
this.stap = i;
}
}
this.x = fout;
this.y = fout; //schakel klik uit
//als er geklikt is de PC
if (this.call == "on") {
this.tel++
this.checklaatste = this.laatste;
loop1:
for (var i = 1; i == 1; i) {
loop2: for (var i = 1; i < this.wandplaatsen.length; i++) {
var k = this.wandplaatsen[i];
if (i + 1 > 8) {
var de = i + 1 - 8;
} else {
var de = i + 1;
};
var d = this.wandplaatsen[de];
if (i - 1 < 1) {
var ce = i - 1 + 8;
} else {
var ce = i - 1;
};
var c = this.wandplaatsen[ce];
if (i + 2 > 8) {
var re = i + 2 - 8;
} else {
var re = i + 2;
};
var r = this.wandplaatsen[re];
if (i - 2 < 1) {
var qe = i - 2 + 8;
} else {
var qe = i - 2;
};
var q = this.wandplaatsen[qe];
if (i + 4 > 8) {
var ye = i + 4 - 8
} else {
var ye = i + 4
};
var y = this.wandplaatsen[ye];
if (i - 4 < 1) {
var we = i - 4 + 8
} else {
var we = i - 4
};
var w = this.wandplaatsen[we];
apl.speak("Niewe i is: " + i + " - " + this.plaatsen[k.plek].cirkel);
if (this.plaatsen[k.plek].cirkel == "on") {
if (i % 2 == 1) {
apl.speak("door " + i);
if (this.plaatsen[d.plek].cirkel == "on") {
if (i + 2 > 8) {
var g = i + 2 - 8;
} else {
var g = i + 2;
};
apl.speak("hier zijn we d: " + checkbestaan(this.wandplaatsen[g].plek));
if (checkbestaan(this.wandplaatsen[g].plek) != "fout") {
this.plaatsen[this.wandplaatsen[g].plek].cirkel = "on";
this.laatste = this.wandplaatsen[g].plek;
this.call = "off";
break loop1;
};
}
if (this.plaatsen[c.plek].cirkel == "on") {
if (i - 2 < 1) {
var ge = i - 2 + 8;
} else {
var ge = i - 2;
};
apl.speak("hier zijn we c: " + checkbestaan(this.wandplaatsen[ge].plek));
if (checkbestaan(this.wandplaatsen[ge].plek) != "fout") {
apl.speak("hier zijn we c: done: " + i);
this.plaatsen[this.wandplaatsen[ge].plek].cirkel = "on";
this.laatste = this.wandplaatsen[ge].plek;
this.call = "off";
break loop1;
};
}
if (this.plaatsen[r.plek].cirkel == "on") {
if (i + 1 > 8) {
var ge = i + 1 - 8;
} else {
var ge = i + 1;
};
apl.speak("hier zijn we r: " + checkbestaan(this.wandplaatsen[ge].plek));
if (checkbestaan(this.wandplaatsen[ge].plek) != "fout") {
this.plaatsen[this.wandplaatsen[ge].plek].cirkel = "on";
this.laatste = this.wandplaatsen[ge].plek;
this.call = "off";
break loop1;
};
}
if (this.plaatsen[q.plek].cirkel == "on") {
if (i - 1 < 1) {
var ge = i - 1 + 8;
} else {
var ge = i - 1;
};
/*apl.speak("hier zijn we q: "+checkbestaan(this.wandplaatsen[ge].plek));*/
if (checkbestaan(this.wandplaatsen[ge].plek) != "fout") {
this.plaatsen[this.wandplaatsen[ge].plek].cirkel = "on";
this.laatste = this.wandplaatsen[ge].plek;
this.call = "off";
break loop1;
};
}
if (this.plaatsen[w.plek].cirkel == "on") {
var g = 4;
apl.speak("hier zijn we wr: " + checkbestaan(g));
if (checkbestaan(g) != "fout") {
this.plaatsen[g].cirkel = "on";
this.laatste = g;
this.call = "off";
break loop1;
};
}
if (this.plaatsen[y.plek].cirkel == "on") {
var g = 4;
apl.speak("hier zijn we yr: " + checkbestaan(g));
if (checkbestaan(g) != "fout") {
this.plaatsen[g].cirkel = "on";
this.laatste = g;
this.call = "off";
break loop1;
};
}
}
/* if( i % 2 == 0 ){
apl.speak("door even"+ i);
if( this.plaatsen[w.plek].cirkel == "on" && this.call == "on" ){
if( i-4 < 1 ){ var g = 8-Math.abs(i-4); } else { var g = i-4; };
apl.speak("hier zijn we w: "+checkbestaan(this.wandplaatsen[g].plek));
if( checkbestaan(this.wandplaatsen[g].plek) != "fout" ){
this.plaatsen[this.wandplaatsen[g].plek].cirkel = "on";
this.laatste = this.wandplaatsen[g].plek;
this.call = "off";
};
}
if( this.plaatsen[y.plek].cirkel == "on" && this.call == "on" ){
if( i+4 > 8 ){ var g = i+4-8; } else { var g = i+4; };
apl.speak("hier zijn we y: "+checkbestaan(this.wandplaatsen[g].plek));
if( checkbestaan(this.wandplaatsen[g].plek) != "fout" ){
this.plaatsen[this.wandplaatsen[g].plek].cirkel = "on";
this.laatste = this.wandplaatsen[g].plek;
this.call = "off";
};
}
} */
}
}
for (var i = 1; i < this.wandplaatsen.length; i++) {
var k = this.wandplaatsen[i];
if (i - 4 < 1) {
var we = i - 4 + 8
} else {
var we = i - 4
};
var w = this.wandplaatsen[we];
if (this.plaatsen[k.plek].kruis == "on" && i % 2 == 0) {
apl.speak("door even : " + i)
if (this.plaatsen[4].kruis == "on") {
apl.speak("hier zijn we 4: " + checkbestaan(w.plek));
if (checkbestaan(w.plek) != "fout") {
this.plaatsen[w.plek].cirkel = "on";
this.laatste = w.plek;
this.call = "off";
break loop1;
}
}
if (this.plaatsen[w.plek].kruis == "on") {
apl.speak("hier zijn we w.plek: " + checkbestaan(4));
if (checkbestaan(4) != "fout") {
this.plaatsen[4].cirkel = "on";
this.laatste = 4;
this.call = "off";
break loop1;
}
}
}
}
break loop1;
}
apl.speak("--------------------------");
if (this.checklaatste != this.laatste) {
this.call = "off"
};
if (this.tel == 1 && this.call == "on") {
this.stap1 = random(0, 8, "even", 4);
for (var i = "fout"; i == checkbestaan(this.stap1); i) {
this.stap1 = random(0, 8, "even", 4);
};
this.plaatsen[this.stap1].cirkel = "on";
this.call = "off";
this.laatste = this.stap1;
} else if (this.tel == 2 && this.call == "on") {
var g = this.plaatsen[this.stap1].naam + 4;
if (g > 8) {
var g = g - 8;
}
var c = this.plaatsen[this.stap1].naam + 1;
var d = this.plaatsen[this.stap1].naam - 1;
if (d > 8) {
var d = d - 8;
}
if (this.stap != 4 || checkbestaan(this.wandplaatsen[g].plek) == "fout") {
this.stap2 = random(0, 8, "even", 4)
for (var i = "fout"; i == checkbestaan(this.stap2); i) {
this.stap2 = random(0, 8, "even", 4)
};
} else {
this.stap2 = this.wandplaatsen[g].plek;
}
this.plaatsen[this.stap2].cirkel = "on";
this.call = "off";
this.laatste = this.stap2;
} else if (this.tel == 3 && this.call == "on") {
this.stap3 = random(0, 8, "even", 4)
for (var i = "fout"; i == checkbestaan(this.stap3); i) {
this.stap3 = random(0, 8, "even", 4)
this.tel2++;
if (this.tel2 > 1000) {
this.tel2 = 0;
this.stap3 = random(0, 8);
for (var i = "fout"; i == checkbestaan(this.stap3); i) {
this.stap3 = random(0, 8);
};
};
};
this.plaatsen[this.stap3].cirkel = "on";
this.call = "off";
this.laatste = this.stap3;
} else if (this.tel == 4 && this.call == "on") {
this.stap4 = random(0, 8, "even", 4)
for (var i = "fout"; i == checkbestaan(this.stap4); i) {
this.stap4 = random(0, 8, "even", 4);
this.tel2++;
if (this.tel2 > 1000) {
this.tel2 = 0;
this.stap4 = random(0, 8);
for (var i = "fout"; i == checkbestaan(this.stap4); i) {
this.stap4 = random(0, 8);
};
};
}
this.plaatsen[this.stap4].cirkel = "on";
this.call = "off";
this.laatste = this.stap4;
} else if (this.call == "on") {
var q = random(0, 8);
for (var i = "fout"; i == checkbestaan(q); i) {
var q = random(0, 8);
};
this.plaatsen[q].cirkel = "on"
this.call = "off";
this.laatste = q;
}
}
//teken
for (var i = 0; i < this.plaatsen.length; i++) {
var k = this.plaatsen[i];
if (k.kruis == "on") {
tekenkruis(k.x, k.y, k.w, k.h)
}
}
for (var i = 0; i < this.plaatsen.length; i++) {
var k = this.plaatsen[i];
if (k.cirkel == "on") {
tekencirkel(k.x, k.y, k.w, k.h)
};
}
}
}
function checkwin() {
this.done = "false"
this.draw = function() {
for (var i = 0; i < invullen.win.length; i++) {
if (invullen.plaatsen[invullen.win[i].plek1].kruis == "on" && invullen.plaatsen[invullen.win[i].plek2].kruis == "on" && invullen.plaatsen[invullen.win[i].plek3].kruis == "on") {
invullen.plaatsen[invullen.laatste].cirkel = "off";
for (var i = 0; i < invullen.plaatsen.length; i++) {
var k = invullen.plaatsen[i];
if (k.cirkel == "on") {
tekencirkel(k.x, k.y, k.w, k.h)
};
}
ctx.font = "17px Arial";
ctx.textBaseline = "middle";
ctx.fillStyle = "black";
var text = " Jij hebt gewonnen!!"
ctx.fillText(text, 20, 20);
clearInterval(animateInterval);
this.done = "true"
}
}
for (var i = 0; i < invullen.win.length; i++) {
if (this.done != "true" && invullen.plaatsen[invullen.win[i].plek1].cirkel == "on" && invullen.plaatsen[invullen.win[i].plek2].cirkel == "on" && invullen.plaatsen[invullen.win[i].plek3].cirkel == "on") {
ctx.font = "17px Arial";
ctx.textBaseline = "middle";
ctx.fillStyle = "black";
var text = "De PC heeft gewonnen, jammer"
ctx.fillText(text, 20, 20);
clearInterval(animateInterval);
}
}
}
}
var background = new background();
var invullen = new invullen();
var checkwin = new checkwin();
function draw() {
ctx.save();
ctx.clearRect(0, 0, cw, ch);
//draw
background.draw();
invullen.draw();
checkwin.draw();
ctx.restore();
}
var animateInterval = setInterval(draw, snelheid);
ctx.canvas.addEventListener('click', function(event) {
invullen.x = event.clientX - ctx.canvas.offsetLeft;
invullen.y = event.clientY - ctx.canvas.offsetTop;
});
function restart() {
background.w = cw, background.h = ch, background.x = 0, background.y = 0, background.color = "#F4F4F5";
invullen.x = fout;
invullen.y = fout;
invullen.call = "on";
invullen.tel = 0;
invullen.kansplaatsen = [];
invullen.tel2 = 0;
invullen.plaatsen = [{
"naam": 1,
"x": 0,
"y": 0,
"w": cw * (1 / 3),
"h": ch * (1 / 3),
"kruis": "off",
"cirkel": "off"
}, {
"naam": 2,
"x": cw * (1 / 3),
"y": 0,
"w": cw * (1 / 3),
"h": ch * (1 / 3),
"kruis": "off",
"cirkel": "off"
}, {
"naam": 3,
"x": cw * (2 / 3),
"y": 0,
"w": cw * (1 / 3),
"h": ch * (1 / 3),
"kruis": "off",
"cirkel": "off"
}, {
"naam": 8,
"x": 0,
"y": ch * (1 / 3),
"w": cw * (1 / 3),
"h": ch * (1 / 3),
"kruis": "off",
"cirkel": "off"
}, {
"naam": "fout",
"x": cw * (1 / 3),
"y": ch * (1 / 3),
"w": cw * (1 / 3),
"h": ch * (1 / 3),
"kruis": "off",
"cirkel": "off"
}, {
"naam": 4,
"x": cw * (2 / 3),
"y": ch * (1 / 3),
"w": cw * (1 / 3),
"h": ch * (1 / 3),
"kruis": "off",
"cirkel": "off"
}, {
"naam": 7,
"x": 0,
"y": ch * (2 / 3),
"w": cw * (1 / 3),
"h": ch * (1 / 3),
"kruis": "off",
"cirkel": "off"
}, {
"naam": 6,
"x": cw * (1 / 3),
"y": ch * (2 / 3),
"w": cw * (1 / 3),
"h": ch * (1 / 3),
"kruis": "off",
"cirkel": "off"
}, {
"naam": 5,
"x": cw * (2 / 3),
"y": ch * (2 / 3),
"w": cw * (1 / 3),
"h": ch * (1 / 3),
"kruis": "off",
"cirkel": "off"
}, ];
invullen.win = [{
"plek1": 0,
"plek2": 1,
"plek3": 2
}, {
"plek1": 3,
"plek2": 4,
"plek3": 5
}, {
"plek1": 6,
"plek2": 7,
"plek3": 8
}, {
"plek1": 0,
"plek2": 3,
"plek3": 6
}, {
"plek1": 1,
"plek2": 4,
"plek3": 7
}, {
"plek1": 2,
"plek2": 5,
"plek3": 8
}, {
"plek1": 0,
"plek2": 4,
"plek3": 8
}, {
"plek1": 2,
"plek2": 4,
"plek3": 6
}, ];
invullen.wandplaatsen = [{
"plek": "undefined"
}, {
"plek": 0
}, {
"plek": 1
}, {
"plek": 2
}, {
"plek": 5
}, {
"plek": 8
}, {
"plek": 7
}, {
"plek": 6
}, {
"plek": 3
}, ];
checkwin.done = "false"
}
};
window.addEventListener('load', function(event) {
Canvas();
});
#game {
width: 500px;
height: 500px;
}
<canvas id="game" width="500px" height="500px">
Please get a new browser!
</canvas>
<button onclick="restart()">Opnieuw!</button>
您必须在全局上下文中声明 restart 才能从按钮访问它。
如果你必须声明它 Canvas 函数替换
function replace(){
//your code
}
到此无var:
restart = function(){
//your same code
}
这将访问 canvas 函数中的局部变量并全局声明它。
你可以这样做：
function Canvas(){
/* other functions */
this.restart = function(){
}
}
然后：
var canvas = new Canvas();
button.onclick = function() {
canvas.restart();
}
通过这种方式，您可以将函数调用到上下文中canvas。因为，this.restart 现在是属于 Canvas