To show replays of Othello games in a website, you can use a few programs mostly written in Java (as applets), but also in Javascript. A survey you will find at Onlinespiele-Sammlung.
In the near future the Java-applets will become more difficult to use because of security reasons. Most browsers are already blocking them nowadays.
So it will be useful to look for alternatives as there were Flash and Javascript.
Flash is going also out of fashion, moreover I don't know such a tool in Flash.
So remains Javascript.
In the moment you will only find two apps in Javascript to replay Othello games online:
Both programs are excellent and both have (different) great features but also some limitations: Hamlite needs a connection to the server of the developer and an iframe to be integrated into a webpage. KOBRO II is mainly made for use in the authors website only and cannot be used multiple times at once in one webpage; but to show other games in the same page, you can set up links to click on.
With these tools in mind I tried to create the "perfect" Othello browser which should:
As a starting point I used a working Othello game created by Kelly Yancey in 2000; this had all the necessary routines of a digital Othello game so that I only had to add the aforementioned features.
Talked enough! Show me the masterpiece!
........ ........ ........ ...O#... ...#O... ........ ........ ........
WOC Final 2010: Yusuke TAKANASHI (Black) - Michele BORASSI (White)
With the above OTHELLY you can replay the World Othello Championchip final from 2010 between Yusuke TAKANASHI (Black) and Michele BORASSI (White). Just play around with it by hitting the different buttons. You may also play yourself, but to get back to the original game, you have to hit the RESET button before.
The simplest way to include the program into a webpage as a replayer is the following HTML code:
<div class="othello-game"> <input type="text" class="gameplay" value="F5 D6 C3 D3 C4 F4 F6 G5 E6 D7 E3 C5 ... A8 H2 B7 A7" /> </div> <p class="othello-game-title">Some title text</p>
If you don't have a transcript of a game, you can also take the numbers of the moves arranged in form of the board:
<div class="othello-game"> <pre> 47 46 17 23 26 24 27 49 57 58 09 14 22 29 48 50 42 08 03 04 15 19 35 36 41 12 05 () ## 06 34 51 44 13 07 ## () 01 37 40 16 18 11 02 10 20 28 39 45 38 32 30 25 21 59 54 43 56 33 31 52 53 60 55 </pre> <input type="text" class="gameplay" value="" /> </div> <p class="othello-game-title">Some title text</p>
OTHELLY will reproduce these codes as regular games you can replay move by move. Look at the following example, which is a representation of the former encoding.
47 46 17 23 26 24 27 49 57 58 09 14 22 29 48 50 42 08 03 04 15 19 35 36 41 12 05 () ## 06 34 51 44 13 07 ## () 01 37 40 16 18 11 02 10 20 28 39 45 38 32 30 25 21 59 54 43 56 33 31 52 53 60 55
Play the game by hitting the > button
The easiest way to display a state of a game is to include OTHELLY in the same way as you include it as a replayer; but at the end of the transcript you have to append the number of the move, after which you want to show the game. Just add: >25 (the > is required, 25 is the number of the move).
1st and recommended way:
<div class="othello-game"> <input type="text" class="gameplay" value="f5d6c3d3c4f4c5b3c2d1a3c6b4e3...h2h3>25" /> </div>
2nd way:
<div class="othello-game"> <pre> 47 46 17 23 26 24 27 49 57 58 09 14 22 29 48 50 42 08 03 04 15 19 35 36 41 12 05 () ## 06 34 51 44 13 07 ## () 01 37 40 16 18 11 02 10 20 28 39 45 38 32 30 25 21 59 54 43 56 33 31 52 53 60 55 > 22 </pre> <input type="text" class="gameplay" value="" /> </div> <p class="othello-game-title">Some title text</p>
The 3rd and possible way: OTHELLY is also able to read the following HTML to display a game state; here the game state is "hard coded". You can use two ways of encoding the game (empty fields, black and white stones).
I found these both in tutorials; maybe there are more ways - then it is easy to expand OTHELLY.
<div class="othello-game"> <pre class="othello-board-code"> ..OOOO.. #.O#OO.. ##OOOOOO #O###OOO .OO#OOOO OOOOOOOO ..#OOO.. .###.O.. </pre> <input type="text" class="gameplay" value="b1a1a5b2g1g2b7a8a7e8h1h2h7g7g8h8" /> </div> <div class="othello-game"> <pre class="othello-board-code"> - - - - - - - - - X - - - - - - - - X O O - - - - - - X O - - - - - - O X - - - - - O - - X - - - - - - - - - - - - - - - - - - </pre> <input type="text" class="gameplay" value="" /> </div>
To these hard coded representations you may add some moves (see the input tag below), so that a user can play them by hitting the FORWARD button (and undo them with the BACKWARD button). You may also add the whole transcript of the game.
<input type="text" class="gameplay" value="b1a1a5b2g1g2b7a8a7e8h1h2h7g7g8h8" />
..OOOO.. #.O#OO.. ##OOOOOO #O###OOO .OO#OOOO OOOOOOOO ..#OOO.. .###.O..
Score of the game between Pete Bhagat (Black) und Joel Feinstein (White) of Cambridge International 1987, like the latter uses it in his strategy lection "The art of sacrificing four corners" for demonstration purposes. Hit the "FORWARD" (>) button to follow the moves he does suggest.
The colors of OTHELLY are very easy to customize over CSS. Just change the values in the associated CSS-file to get a different look.
You can also change the images which are used for the stones, the empty fields and some features from the original game (e. g. to show how many stones will be flipped by every legal move).
The size of the boards (and some other details like the language) you can adjust with Javascript only. You can do this globally for all boards in a page or adjust only single boards. How to do this you will have a look at the source code of the demonstration files below.
More details you will find here or by studying the download files.
I changed the original static images against OTHELLY in 3 examples of strategy guides/articles:
Othello: An Introduction to Strategy and Tactics by Colin Springer (Original)
Too many pieces can be bad for you! by Joel Feinstein (Original
In the original article the autor uses more grafics to demonstrate different sequences of moves; but you can "feed" OTHELLY with all the moves shown in the figures. The moves can be retraced by clicking the forward button.
The Art of Sacrificing Four Corners by Joel Feinstein (Original)
Here you'll find a zipped archive with all examples and a minified version of the js-file for download.
If you will use OTHELLY in your own projects or expand/improve it or if you find a bug, I would be glad to get a short note.