333 ui.score.speed = function(speed, turn) { |
333 ui.score.speed = function(speed, turn) { |
334 speedDom.innerHTML = '' + speed; |
334 speedDom.innerHTML = '' + speed; |
335 turnDom.innerHTML = '' + turn; |
335 turnDom.innerHTML = '' + turn; |
336 } |
336 } |
337 |
337 |
|
338 //////////////////////////////////////////////////////////////// |
|
339 // Game flow. |
|
340 |
|
341 ui.game = {} |
|
342 |
|
343 var messageDom = document.getElementById("message-area"); |
|
344 ui.game.clearMessage = function() { |
|
345 messageDom.innerHTML = ""; |
|
346 } |
|
347 ui.game.setMessage = function(msg) { |
|
348 messageDom.innerHTML = msg; |
|
349 } |
|
350 |
|
351 ui.game.checkGameOver = function() { |
|
352 if (board.gameOver(board.current)) { |
|
353 ui.game.setMessage("Game over!"); |
|
354 return true; |
|
355 } else { |
|
356 return false; |
|
357 } |
|
358 } |
|
359 ui.game.checkMoveValid = function(move) { |
|
360 var tmpBrd = board.create(); |
|
361 board.copy(board.current, tmpBrd); |
|
362 if (!(move in {"left":0,"right":0,"up":0,"down":0})) { |
|
363 ui.game.setMessage("AI can't find move!"); |
|
364 return false; |
|
365 } |
|
366 if ( ! board.move[move].call(null, tmpBrd)) { |
|
367 ui.game.setMessage("AI move "+move+" is ivalid!"); |
|
368 return false; |
|
369 } |
|
370 return true; |
|
371 } |
|
372 |
|
373 //////////////////////////////////////////////////////////////// |
|
374 // Actions. |
|
375 |
338 ui.action = {}; |
376 ui.action = {}; |
339 |
377 |
340 ui.action.start = function() { |
378 ui.action.start = function() { |
341 ui.score.clear(); |
379 ui.score.clear(); |
342 ui.message.clear(); |
380 ui.game.clearMessage(); |
343 ui.action.clearSuggestion(); |
381 ui.action.clearSuggestion(); |
344 board.current = board.create(); |
382 board.current = board.create(); |
345 board.putRandom(board.current); |
383 board.putRandom(board.current); |
346 ui.board.update(board.current); |
384 ui.board.update(board.current); |
347 } |
385 } |
400 case 38: ui.action.up(); break; |
438 case 38: ui.action.up(); break; |
401 case 40: ui.action.down(); break; |
439 case 40: ui.action.down(); break; |
402 case 37: ui.action.left(); break; |
440 case 37: ui.action.left(); break; |
403 case 39: ui.action.right(); break; |
441 case 39: ui.action.right(); break; |
404 } |
442 } |
|
443 event.preventDefault(); |
405 return false; |
444 return false; |
406 }); |
445 }); |
407 |
446 |
408 document.getElementById("test").addEventListener("click", function() { |
447 document.getElementById("test").addEventListener("click", function() { |
409 board.move.replaceByBoardJS(ui.brdEngine); |
448 board.move.replaceByBoardJS(ui.brdEngine); |
410 }); |
449 }); |
411 |
|
412 ui.message = {}; |
|
413 var messageDom = document.getElementById("message-area"); |
|
414 ui.message.clear = function() { |
|
415 messageDom.innerHTML = ""; |
|
416 } |
|
417 ui.message.set = function(msg) { |
|
418 messageDom.innerHTML = msg; |
|
419 } |
|
420 |
|
421 ui.action.checkGameOver = function() { |
|
422 if (board.gameOver(board.current)) { |
|
423 ui.message.set("Game over!"); |
|
424 return true; |
|
425 } else { |
|
426 return false; |
|
427 } |
|
428 } |
|
429 ui.action.checkMoveValid = function(move) { |
|
430 var tmpBrd = board.create(); |
|
431 board.copy(board.current, tmpBrd); |
|
432 if (!(move in {"left":0,"right":0,"up":0,"down":0})) { |
|
433 ui.message.set("AI can't find move!"); |
|
434 return false; |
|
435 } |
|
436 if ( ! board.move[move].call(null, tmpBrd)) { |
|
437 ui.message.set("AI move "+move+" is ivalid!"); |
|
438 return false; |
|
439 } |
|
440 return true; |
|
441 } |
|
442 |
450 |
443 ui.action.clearSuggestion = function() { |
451 ui.action.clearSuggestion = function() { |
444 var btns = document.querySelectorAll('div.move-control button'); |
452 var btns = document.querySelectorAll('div.move-control button'); |
445 for (var i = 0; i < btns.length; i++) |
453 for (var i = 0; i < btns.length; i++) |
446 btns[i].classList.remove('suggestion'); |
454 btns[i].classList.remove('suggestion'); |
447 } |
455 } |
448 ui.action.suggest = function() { |
456 ui.action.suggest = function() { |
449 ui.action.clearSuggestion(); |
457 ui.action.clearSuggestion(); |
450 ui.message.clear(); |
458 ui.game.clearMessage(); |
451 if (ui.action.checkGameOver()) |
459 if (ui.game.checkGameOver()) |
452 return; |
460 return; |
453 var tmpBrd = board.create(); |
461 var tmpBrd = board.create(); |
454 board.copy(board.current, tmpBrd); |
462 board.copy(board.current, tmpBrd); |
455 var move = ui.ai.current.analyse(tmpBrd); |
463 var move = ui.ai.current.analyse(tmpBrd); |
456 ui.ai.current.cleanup(); |
464 ui.ai.current.cleanup(); |
457 if ( ! ui.action.checkMoveValid(move)) |
465 if ( ! ui.game.checkMoveValid(move)) |
458 return; |
466 return; |
459 document.getElementById(move).classList.add('suggestion'); |
467 document.getElementById(move).classList.add('suggestion'); |
460 } |
468 } |
461 document.getElementById("suggest").addEventListener("click", ui.action.suggest); |
469 document.getElementById("suggest").addEventListener("click", ui.action.suggest); |
462 ui.action.step = function() { |
470 ui.action.step = function() { |
463 ui.message.clear(); |
471 ui.game.clearMessage(); |
464 ui.action.clearSuggestion(); |
472 ui.action.clearSuggestion(); |
465 if (ui.action.checkGameOver()) |
473 if (ui.game.checkGameOver()) |
466 return; |
474 return; |
467 var tmpBrd = board.create(); |
475 var tmpBrd = board.create(); |
468 board.copy(board.current, tmpBrd); |
476 board.copy(board.current, tmpBrd); |
469 var move = ui.ai.current.analyse(tmpBrd); |
477 var move = ui.ai.current.analyse(tmpBrd); |
470 ui.ai.current.cleanup(); |
478 ui.ai.current.cleanup(); |
471 if ( ! ui.action.checkMoveValid(move)) |
479 if ( ! ui.game.checkMoveValid(move)) |
472 return; |
480 return; |
473 board.move[move].call(null, board.current); |
481 board.move[move].call(null, board.current); |
474 board.putRandom(board.current); |
482 board.putRandom(board.current); |
475 ui.board.update(board.current); |
483 ui.board.update(board.current); |
476 ui.score.update(board.current); |
484 ui.score.update(board.current); |
477 } |
485 } |
478 document.getElementById("step").addEventListener("click", ui.action.step); |
486 document.getElementById("step").addEventListener("click", ui.action.step); |
479 |
487 |
480 ui.action.finish = function() { |
488 ui.action.finish = function() { |
481 ui.message.clear(); |
489 ui.game.clearMessage(); |
482 ui.action.clearSuggestion(); |
490 ui.action.clearSuggestion(); |
483 var step = 0; |
491 var step = 0; |
484 var tsFrom = new Date().getTime(); |
492 var tsFrom = new Date().getTime(); |
485 while (!board.gameOver(board.current)) { |
493 while (!board.gameOver(board.current)) { |
486 var tmpBrd = board.create(); |
494 var tmpBrd = board.create(); |
487 board.copy(board.current, tmpBrd); |
495 board.copy(board.current, tmpBrd); |
488 var move = ui.ai.current.analyse(tmpBrd); |
496 var move = ui.ai.current.analyse(tmpBrd); |
489 if (typeof move === 'undefined') { |
497 if (typeof move === 'undefined') { |
490 ui.message.set("I don't know how to move!"); |
498 ui.game.setMessage("I don't know how to move!"); |
491 return; |
499 return; |
492 } |
500 } |
493 var updated = board.move[move].call(null, board.current); |
501 var updated = board.move[move].call(null, board.current); |
494 if (updated) { |
502 if (updated) { |
495 board.putRandom(board.current); |
503 board.putRandom(board.current); |
496 } else { |
504 } else { |
497 ui.board.update(board.current); |
505 ui.board.update(board.current); |
498 ui.score.update(board.current); |
506 ui.score.update(board.current); |
499 ui.message.set("Wrong move!"); |
507 ui.game.setMessage("Wrong move!"); |
500 return; |
508 return; |
501 } |
509 } |
502 step++; |
510 step++; |
503 } |
511 } |
504 var tsTo = new Date().getTime(); |
512 var tsTo = new Date().getTime(); |
505 ui.board.update(board.current); |
513 ui.board.update(board.current); |
506 ui.score.update(board.current); |
514 ui.score.update(board.current); |
507 ui.score.speed(step*1000.0/(tsTo-tsFrom), step); |
515 ui.score.speed(step*1000.0/(tsTo-tsFrom), step); |
508 ui.message.set("Game over!"); |
516 ui.game.setMessage("Game over!"); |
509 ui.ai.current && ui.ai.current.cleanup(); |
517 ui.ai.current && ui.ai.current.cleanup(); |
510 } |
518 } |
511 document.getElementById("finish").addEventListener("click", ui.action.finish); |
519 document.getElementById("finish").addEventListener("click", ui.action.finish); |
512 |
520 |
513 //////////////////////////////////////////////////////////////// |
521 //////////////////////////////////////////////////////////////// |