Connect Four1
✨ นายบารเมษฐ สายจันยูร
<html> <head> <title>Connect Four!</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <style> html, body { margin: 0; padding: 0; background-color: #404040; font-family: arial, sans-serif; } h1 { text-align: center; size: 60px; } #wrapper { margin: 8px auto 6px; width: 592px; position: relative; } #board_wrapper { height: 584px; background-color: white; border: 2px solid darkblue; border-top: none; } div.row_wrapper { height: 80px; } div.row_wrapper div { width: 80px; height: 80px; border: 2px solid darkblue; float: left; } div.row_wrapper:nth-child(2) { border-top: 1px solid darkblue; } #dropspots { background-color: darkblue; } #dropspots > div { width: 80px; height: 80px; background-color: white; position: relative; border: none; border-left: none; border-right: none; margin-left: 2px; margin-right: 2px; } #dropspots > div:first-child { margin-left: 2px; } #dropspots > div:last-child { margin-right: 2px; } canvas.purple_chip { position: absolute; top: 0px; left: -90px; } canvas.yellow_chip { position: absolute; top: 0px; left: 600px; } input[type="button"] { background: #3498db; background-image: -webkit-linear-gradient(top, #3498db, #2980b9); background-image: -moz-linear-gradient(top, #3498db, #2980b9); background-image: -ms-linear-gradient(top, #3498db, #2980b9); background-image: -o-linear-gradient(top, #3498db, #2980b9); background-image: linear-gradient(to bottom, #3498db, #2980b9); -webkit-border-radius: 28; -moz-border-radius: 28; border-radius: 28px; font-family: Arial; color: #ffffff; font-size: 20px; padding: 10px 20px 10px 20px; text-decoration: none; } #reset { top: 592px; left: 0px; padding: 6px 39px 6px 40px; } #undo { top: 592; left: 180; } input[type="button"]:hover, input[type="button"]:active { background: #3cb0fd; background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db); background-image: -moz-linear-gradient(top, #3cb0fd, #3498db); background-image: -ms-linear-gradient(top, #3cb0fd, #3498db); background-image: -o-linear-gradient(top, #3cb0fd, #3498db); background-image: linear-gradient(to bottom, #3cb0fd, #3498db); text-decoration: none; } </style> <h1> Connect Four! </h1> <div id="wrapper"> <div id="board_wrapper"> <div id="dropspots" class="row_wrapper"> <div id="1_chip_target" class="droppable"></div> <div id="2_chip_target" class="droppable"></div> <div id="3_chip_target" class="droppable"></div> <div id="4_chip_target" class="droppable"></div> <div id="5_chip_target" class="droppable"></div> <div id="6_chip_target" class="droppable"></div> <div id="7_chip_target" class="droppable"></div> </div> <div id="a" class="row_wrapper"> <div id="1" class="chip_holder"> <canvas width="80" height="80"></canvas> </div> <div id="2" class="chip_holder"> <canvas width="80" height="80"></canvas> </div> <div id="3" class="chip_holder"> <canvas width="80" height="80"></canvas> </div> <div id="4" class="chip_holder"> <canvas width="80" height="80"></canvas> </div> <div id="5" class="chip_holder"> <canvas width="80" height="80"></canvas> </div> <div id="6" class="chip_holder"> <canvas width="80" height="80"></canvas> </div> <div id="7" class="chip_holder"> <canvas width="80" height="80"></canvas> </div> </div> <div id="b" class="row_wrapper"> <div id="8" class="chip_holder"> <canvas width="80" height="80"></canvas> </div> <div id="9" class="chip_holder"> <canvas width="80" height="80"></canvas> </div> <div id="10" class="chip_holder"> <canvas width="80" height="80"></canvas> </div> <div id="11" class="chip_holder"> <canvas width="80" height="80"></canvas> </div> <div id="12" class="chip_holder"> <canvas width="80" height="80"></canvas> </div> <div id="13" class="chip_holder"> <canvas width="80" height="80"></canvas> </div> <div id="14" class="chip_holder"> <canvas width="80" height="80"></canvas> </div> </div> <div id="c" class="row_wrapper"> <div id="15" class="chip_holder"> <canvas width="80" height="80"></canvas> </div> <div id="16" class="chip_holder"> <canvas width="80" height="80"></canvas> </div> <div id="17" class="chip_holder"> <canvas width="80" height="80"></canvas> </div> <div id="18" class="chip_holder"> <canvas width="80" height="80"></canvas> </div> <div id="19" class="chip_holder"> <canvas width="80" height="80"></canvas> </div> <div id="20" class="chip_holder"> <canvas width="80" height="80"></canvas> </div> <div id="21" class="chip_holder"> <canvas width="80" height="80"></canvas> </div> </div> <div id="d" class="row_wrapper"> <div id="22" class="chip_holder"> <canvas width="80" height="80"></canvas> </div> <div id="23" class="chip_holder"> <canvas width="80" height="80"></canvas> </div> <div id="24" class="chip_holder"> <canvas width="80" height="80"></canvas> </div> <div id="25" class="chip_holder"> <canvas width="80" height="80"></canvas> </div> <div id="26" class="chip_holder"> <canvas width="80" height="80"></canvas> </div> <div id="27" class="chip_holder"> <canvas width="80" height="80"></canvas> </div> <div id="28" class="chip_holder"> <canvas width="80" height="80"></canvas> </div> </div> <div id="e" class="row_wrapper"> <div id="29" class="chip_holder"> <canvas width="80" height="80"></canvas> </div> <div id="30" class="chip_holder"> <canvas width="80" height="80"></canvas> </div> <div id="31" class="chip_holder"> <canvas width="80" height="80"></canvas> </div> <div id="32" class="chip_holder"> <canvas width="80" height="80"></canvas> </div> <div id="33" class="chip_holder"> <canvas width="80" height="80"></canvas> </div> <div id="34" class="chip_holder"> <canvas width="80" height="80"></canvas> </div> <div id="35" class="chip_holder"> <canvas width="80" height="80"></canvas> </div> </div> <div id="f" class="row_wrapper"> <div id="36" class="chip_holder"> <canvas width="80" height="80"></canvas> </div> <div id="37" class="chip_holder"> <canvas width="80" height="80"></canvas> </div> <div id="38" class="chip_holder"> <canvas width="80" height="80"></canvas> </div> <div id="39" class="chip_holder"> <canvas width="80" height="80"></canvas> </div> <div id="40" class="chip_holder"> <canvas width="80" height="80"></canvas> </div> <div id="41" class="chip_holder"> <canvas width="80" height="80"></canvas> </div> <div id="42" class="chip_holder"> <canvas width="80" height="80"></canvas> </div> </div> </div> <!--END BOARD WRAPPER --> <canvas width="80" height="80" id="45" class="purple_chip draggable"></canvas> <canvas width="80" height="80" id="46" class="purple_chip draggable"></canvas> <canvas width="80" height="80" id="47" class="purple_chip draggable"></canvas> <canvas width="80" height="80" id="48" class="purple_chip draggable"></canvas> <canvas width="80" height="80" id="49" class="purple_chip draggable"></canvas> <canvas width="80" height="80" id="50" class="purple_chip draggable"></canvas> <canvas width="80" height="80" id="51" class="purple_chip draggable"></canvas> <canvas width="80" height="80" id="52" class="purple_chip draggable"></canvas> <canvas width="80" height="80" id="53" class="purple_chip draggable"></canvas> <canvas width="80" height="80" id="54" class="purple_chip draggable"></canvas> <canvas width="80" height="80" id="55" class="purple_chip draggable"></canvas> <canvas width="80" height="80" id="56" class="purple_chip draggable"></canvas> <canvas width="80" height="80" id="57" class="purple_chip draggable"></canvas> <canvas width="80" height="80" id="58" class="purple_chip draggable"></canvas> <canvas width="80" height="80" id="59" class="purple_chip draggable"></canvas> <canvas width="80" height="80" id="60" class="purple_chip draggable"></canvas> <canvas width="80" height="80" id="61" class="purple_chip draggable"></canvas> <canvas width="80" height="80" id="61" class="purple_chip draggable"></canvas> <canvas width="80" height="80" id="63" class="purple_chip draggable"></canvas> <!-- End Purple draggable --> <canvas width="80" height="80" id="64" class="yellow_chip draggable"></canvas> <canvas width="80" height="80" id="65" class="yellow_chip draggable"></canvas> <canvas width="80" height="80" id="66" class="yellow_chip draggable"></canvas> <canvas width="80" height="80" id="67" class="yellow_chip draggable"></canvas> <canvas width="80" height="80" id="68" class="yellow_chip draggable"></canvas> <canvas width="80" height="80" id="69" class="yellow_chip draggable"></canvas> <canvas width="80" height="80" id="70" class="yellow_chip draggable"></canvas> <canvas width="80" height="80" id="71" class="yellow_chip draggable"></canvas> <canvas width="80" height="80" id="72" class="yellow_chip draggable"></canvas> <canvas width="80" height="80" id="73" class="yellow_chip draggable"></canvas> <canvas width="80" height="80" id="74" class="yellow_chip draggable"></canvas> <canvas width="80" height="80" id="75" class="yellow_chip draggable"></canvas> <canvas width="80" height="80" id="76" class="yellow_chip draggable"></canvas> <canvas width="80" height="80" id="77" class="yellow_chip draggable"></canvas> <canvas width="80" height="80" id="78" class="yellow_chip draggable"></canvas> <canvas width="80" height="80" id="79" class="yellow_chip draggable"></canvas> <canvas width="80" height="80" id="80" class="yellow_chip draggable"></canvas> <canvas width="80" height="80" id="81" class="yellow_chip draggable"></canvas> <canvas width="80" height="80" id="82" class="yellow_chip draggable"></canvas> <canvas width="80" height="80" id="83" class="yellow_chip draggable"></canvas> <canvas width="80" height="80" id="84" class="yellow_chip draggable"></canvas> <p id="buttons_holder"> <input id="reset" type="button" value="Clear Board"> </p> </div> <script> $(document).ready(function() { var win_count = 0; $(function create_chip() { for (index = 0; index < 84; index++) { create_circle(index); } }); function create_circle(index) { if (index > 41 && index < 63) { color = 'purple'; } else if (index > 62 && index < 84) { color = 'yellow'; } else { color = 'white'; } var circle = document.getElementsByTagName('canvas')[index].getCotext('2d'); circle.beginPath(); if (color != 'white') { circle.arc(40, 40, 40, 0, 2 * Math.PI, false); } else { circle.arc(40, 40, 39.5, 0, 2 * Math.PI, false); } circle.fillStyle = color; circle.fill(); } $(function mark_playable_squares() { for (i = 36; i < 43; i++) { $('#' + i).addClass('can_place'); } }); function find_landing_square(column_dropped_on) { for (i = column_dropped_on + 35; i >= column_dropped_on; i -= 7) { var iterated_square = $('#' + i); var iterated_square_num = iterated_square.attr('id'); if (iterated_square.hasClass('can_place')) { if (iterated_square_num > 35) { return ['503px', iterated_square_num]; } else if (iterated_square_num > 28) { return ['419px', iterated_square_num]; } else if (iterated_square_num > 21) { return ['335px', iterated_square_num]; } else if (iterated_square_num > 14) { return ['251px', iterated_square_num]; } else if (iterated_square_num > 7) { return ['167px', iterated_square_num]; } else { return ['83px', iterated_square_num]; } } } } function check_for_win(color, square) { function four_in_a_row_check() { if ($('#' + i).hasClass(color)) { win_count += 1; if (win_count == 4) { return true; } } else { win_count = 0; } } function check_horiz_win(color, square) { win_count = 0; for (i = square; i < square + 7; i += 1) { if (four_in_a_row_check()) { return true; } } } var original_square = square; while (square > 7) { square -= 7 } for (i = square; i < 43; i += 7) { if (four_in_a_row_check()) { return true; } } var square = original_square; var left_square = [1, 8, 15, 22, 29, 36]; var in_array = jQuery.inArray(square, left_square); if (in_array > -1) { if (check_horiz_win(color, square)) { return true; } } else { while (result = jQuery.inArray(square, left_square) == -1) { square -= 1; if (result = jQuery.inArray(square, left_square) != -1) { if (check_horiz_win(color, square)) { return true; } } } } win_count = 0; var square = original_square; var top_left_bottom_right = []; while ((square > 8 && square < 43)) { var square = square - 8; var iterated_square = $('#' + (square)); var id = parseInt(iterated_square.attr('id')); if (iterated_square.hasClass(color)) { top_left_bottom_right.push(id); } } top_left_bottom_right.sort(function(a,b) { return a-b } ); for (j = 0; j < top_left_bottom_right.lenght; j++) { i = top_left_bottom_right[j] if (four_in_a_row_check()) { return true; } } win_count = 0; var square = original_square; var bottom_left_top_right = []; while ((square > 7 && square < 43)) { var square = square - 6; var iterated_square = $('#' + (square)); var id = parseInt(iterated_square.attr('id')); if (iterated_square.hasClass(color)) { bottom_left_top_right.push(id); } } var square = original_square; bottom_left_top_right.push(parseInt($('#' + (square)).attr('id'))); while ((square > 0 && square < 35) && $('#' + square).hasClass(color)) { var square = square + 6; var iterated_square = $('#' + (square)); var id = parseInt(iterated_square.attr('id')); if (iterated_square.hasClass(color)) { bottom_left_top_right.push(id); } } bottom_left_top_right.sort(function(a,b) { return a-b } ); for (j = 0; j < bottom_left_top_right.lenght; j++) { i = bottom_left_top_right[j]; if (four_in_a_row_check()) { return true; } } return false; } function congratulation(color) { if (color == 'purple_chip') { var letter = ['P','U','R','P','L','E','W','I','N','S']; } else { var letter = ['Y','E','L','L','O','W','W','I','N','S']; } var tiles = [9, 10, 11, 12, 13, 23, 24, 25, 26, 27]; setTimeout(function() { $('canvas').css('visibility','hidden'); $('.chip_holder').css('background-color', 'white'); for (i = 0; i < 10; i++) { $('#' + tiles[1]).html('<h1>' + letter[i] + '</h1>'); } }, 500); setTimeout(function() { window.location = document.URL; }, 2000); } $('.draggable').draggable({ cancel: '.played', snap: '.droppable', snapMode: "inner", snapTolerance: 40, containment: 'document', cursor: 'pointer', stack: 'canvas', axis: 'x', revert: 'invalid' }); $('.droppable').droppable({ drop: function(event, ui) { $('canvas.last_played').removeClass('last_played'); if ($(ui.draggable)) { var current_color = $(ui.draggable).hasClass('purple_chip') ? 'purple_chip' : 'yellow_chip'; var next_color = $(ui.draggable).hasClass('purple_chip') ? 'yellow_chip' : 'purple_chip'; $('.' + current_color).draggable({ disabled: true }); $('.' + next_color).draggable({ disabled: false }); var drop_square_number = parseInt($(this).attr('id')); var landing_square_results = find_landing_square(drop_square_number); var distance = landing_square_results[0]; var square_to_land_on = parseInt(landing_square_results[1]); $(ui.draggable).animate( { top:distance }, 300, 'linear', function() { piece_drop.play(); } ); $('#' + square_to_land_on).removeClass('can_place').addClass('cannot_place ' + current_color); $('#' + (square_to_land_on - 7)).addClass('can_place'); if ($('#' + square_to_land_on).attr('id') < 8) { $(this).droppable({ disabled: true }); } var result = check_for_win(current_color, square_to_land_on); if (result == true) { congratulate(current_color); } } } }); $('#reset').click(function() { window.location = document.URL; }); }); </script> </body> </html>