Cara Membuat Game Tic Tac Toe Dengan HTML5 - Kali ini kita akan membuat game Tic Tac Toe Atau SOS dengan HTML5 + Javascript + CSS, Tic tac toe atau di indonesia biasa di sebut SOS ( Etdah indonesia mao maen game apa minta tolong bkakakakak ) adalah permainan lingkar silang pada kotak 3 x 3 yang dimainkan oleh dua orang pemain, para pemain bermain dengan menggunakan bidak X dan O untuk membentuk satu barisan untuk menang, baik secara horizotal, vertikal ataupun diagonal.
Baca juga : Cara Membuat Sudoku Slover Dengan Javascript
Dengan menggunakan fitur canvas yang ada di html5 dan bantuan javascript kita bisa membuat game tic tac toe ini. Untuk lebih jelasnya langsung saja kita mulai buat gamenya.
Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse.
Baca juga : Cara Membuat Sudoku Slover Dengan Javascript
Dengan menggunakan fitur canvas yang ada di html5 dan bantuan javascript kita bisa membuat game tic tac toe ini. Untuk lebih jelasnya langsung saja kita mulai buat gamenya.
Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse.
CSS
Buatlah dahulu sebuah folder dengan nama Tic_tac_toe kemudian buatlah sebuah file CSS baru dengan nama style.css dengan isi script :body{
background-color: black;
text-align:center;
background-color:#61b3de;
}
.box{
text-align:left;
width:auto;
height:auto;
}
.wrap {
width:730px;
margin:30px auto;
border: 10px dashed #cecece;
border-radius:4px;
padding: 20px 5px;
}
h1 {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:170%;
color:#fff;
font-style:italic;
text-decoration:none;
font-weight:100;
padding: 10px;
}
canvas{
position:relative;
}
Javascript
Buatlah sebuah file Javascript di folder yang sama dengan nama script.js dengan isi script :
//Global Variables
var painted;
var content;
var winningCombinations;
var turn = 0;
var theCanvas;
var c;
var cxt;
var squaresFilled = 0;
var w;
var y;
//Instanciate Arrays
window.onload=function(){
painted = new Array();
content = new Array();
winningCombinations = [[0,1,2],[3,4,5],[6,7,8],[0,3,6],[1,4,7],[2,5,8],[0,4,8],[2,4,6]];
for(var l = 0; l <= 8; l++){
painted[l] = false;
content[l]='';
}
}
//Game methods
function canvasClicked(canvasNumber){
theCanvas = "canvas"+canvasNumber;
c = document.getElementById(theCanvas);
cxt = c.getContext("2d");
if(painted[canvasNumber-1] ==false){
if(turn%2==0){
cxt.beginPath();
cxt.moveTo(10,10);
cxt.lineTo(40,40);
cxt.moveTo(40,10);
cxt.lineTo(10,40);
cxt.stroke();
cxt.closePath();
content[canvasNumber-1] = 'X';
}else{
cxt.beginPath();
cxt.arc(25,25,20,0,Math.PI*2,true);
cxt.stroke();
cxt.closePath();
content[canvasNumber-1] = 'O';
}
turn++;
painted[canvasNumber-1] = true;
squaresFilled++;
checkForWinners(content[canvasNumber-1]);
if(squaresFilled==9){
alert("THE GAME IS OVER!");
location.reload(true);
}
}else{
alert("THAT SPACE IS ALREADY OCCUPIED WITH YOUR HEART!");
}
}
function checkForWinners(symbol){
for(var a = 0; a < winningCombinations.length; a++){
if(content[winningCombinations[a][0]]==symbol&&content[winningCombinations[a][1]]== symbol&&content[winningCombinations[a][2]]==symbol){
alert(symbol+ " WON!");
playAgain();
}
}
}
function playAgain(){
y=confirm("PLAY AGAIN?");
if(y==true){
alert("OKAY! ^^/>");
location.reload(true);
}else{
alert("SO LONG,SUCKER!");
}
}
//Global Variables
var painted;
var content;
var winningCombinations;
var turn = 0;
var theCanvas;
var c;
var cxt;
var squaresFilled = 0;
var w;
var y;
//Instanciate Arrays
window.onload=function(){
painted = new Array();
content = new Array();
winningCombinations = [[0,1,2],[3,4,5],[6,7,8],[0,3,6],[1,4,7],[2,5,8],[0,4,8],[2,4,6]];
for(var l = 0; l <= 8; l++){
painted[l] = false;
content[l]='';
}
}
//Game methods
function canvasClicked(canvasNumber){
theCanvas = "canvas"+canvasNumber;
c = document.getElementById(theCanvas);
cxt = c.getContext("2d");
if(painted[canvasNumber-1] ==false){
if(turn%2==0){
cxt.beginPath();
cxt.moveTo(10,10);
cxt.lineTo(40,40);
cxt.moveTo(40,10);
cxt.lineTo(10,40);
cxt.stroke();
cxt.closePath();
content[canvasNumber-1] = 'X';
}else{
cxt.beginPath();
cxt.arc(25,25,20,0,Math.PI*2,true);
cxt.stroke();
cxt.closePath();
content[canvasNumber-1] = 'O';
}
turn++;
painted[canvasNumber-1] = true;
squaresFilled++;
checkForWinners(content[canvasNumber-1]);
if(squaresFilled==9){
alert("GAME OVER!");
location.reload(true);
}
}else{
alert("SUDAH TERISI!");
}
}
function checkForWinners(symbol){
for(var a = 0; a < winningCombinations.length; a++){
if(content[winningCombinations[a][0]]==symbol&&content[winningCombinations[a][1]]== symbol&&content[winningCombinations[a][2]]==symbol){
alert(symbol+ " WON!");
playAgain();
}
}
}
function playAgain(){
y=confirm("PLAY AGAIN?");
if(y==true){
alert("OKAY! ^^/>");
location.reload(true);
}else{
alert("BYE BYE!");
location.reload(true);
}
}
File ini yang nantinya bertugas untuk menggambar di canvas serta mengecek berjalannya permainan apakah sudah menang atau game over.
HTML
Buatlah sebuah file HTML baru dengan nama index.html di dalam folder yang sama dengan isi script :
<!DOCTYPE HTML> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"/> <script src="script.js"></script> </head> <body> <div class="wrap"> <h1>Jin Toples Programming</h1> <h1>Game Tic - Tac - Toe Dengan HTML5</h1> <div id ="box"> <canvas id = "canvas1" width="50" height="50" style="border:5px solid white; background-color:white" onclick="canvasClicked(1)"></canvas> <canvas id = "canvas2" width="50" height="50" style="border:5px solid white; background-color:white" onclick="canvasClicked(2)"></canvas> <canvas id = "canvas3" width="50" height="50" style="border:5px solid white; background-color:white" onclick="canvasClicked(3)"></canvas><br/> <canvas id = "canvas4" width="50" height="50" style="border:5px solid white; background-color:white" onclick="canvasClicked(4)"></canvas> <canvas id = "canvas5" width="50" height="50" style="border:5px solid white; background-color:white" onclick="canvasClicked(5)"></canvas> <canvas id = "canvas6" width="50" height="50" style="border:5px solid white; background-color:white" onclick="canvasClicked(6)"></canvas><br/> <canvas id = "canvas7" width="50" height="50" style="border:5px solid white; background-color:white" onclick="canvasClicked(7)"></canvas> <canvas id = "canvas8" width="50" height="50" style="border:5px solid white; background-color:white" onclick="canvasClicked(8)"></canvas> <canvas id = "canvas9" width="50" height="50" style="border:5px solid white; background-color:white" onclick="canvasClicked(9)"></canvas> </div> </div> </body> </html>
File HTML ini lah yang berisi canvas - canvas yang digunakan javascript untuk menggambar X dan O.
anda dapat mencobanya dengan cara membukanya di browser anda, disarankan membukanya dengan browser Chrome atau Mozilla, jangan menggunakan IE Bkakakak.... jika di IE tidak jalan saya sudah tidak heran.
anda dapat mencobanya dengan cara membukanya di browser anda, disarankan membukanya dengan browser Chrome atau Mozilla, jangan menggunakan IE Bkakakak.... jika di IE tidak jalan saya sudah tidak heran.
Anda juga dapat mengunduh file jadinya di sini : DOWNLOAD
Author : Justin Truax
From : http://cssdeck.com/labs/n1qttwyx
Modified by : Jin Toples
Game Tic Tac Toe Dengan HTML5 anda sudah selesai, baca juga tutorial program HTML5 dan Javascript lainnya.
0 komentar