Revisions to Order and Chaos and Codegolf

added 234 characters in body

Source Link

edited May 17, 2015 at 9:46

32.2k
3
36
90

Edit Modified interactive game, should run even in MSIE

As requested, text based game, input via popup, output in console (so to have a monospaced font).

function start() {
  b='\nb=Array(7).join('\n......'.repeat(6).split('');
  t=0;
  $('#O').text('');
  $('table')[0].className='';
  show();
  $('th').eq(1).html('Left-click: O<br>Right-click: X');
  $('#B')
  .off('mouseup')
  .on('mouseup','td.F',function(ev){
    var x,y, p=~~this.id.slice(1)
    x=p%7-1
    y=p/7|0
    b[p]=ev.which > 1 ?'X':'O';
    ++t
    for(x=z='',c=0;c++<6;)
      for(x+='_',z+='_',r=0;r<6;r++)
        x+=b[c+r*7],z+=b[c<4?c-1+r*8:c+1+r*6];
    show()
    if (/X{5}|O{5}/.test(b.join('')+x+z))
      end(1)
    else if(t==6*6) 
      end(2)
    return false
  })
}

function end(w) {
  var n=['Order','Chaos'][w-1]
  $('th').eq(0).text('P'+w+' '+n+' Wins')
  $('th').eq(1).text('Click to play again')
  
  $('table')[0].className=$('tr')[0].className =n[0];
  $('#B').off('mouseup').on('mouseup', start)
}
function show() {
  var w,p
  p=t&1
  $('tr')[0].className=$('#B')[0].className='OC'[p];
  w=b.map(function(c,i){
    return c>' '?'<td class='+(c=='.'?'F':'X')+' id=C'+i+'>'+c+'</td>':'</tr><tr>'
  }).join('');
  $('th').eq(0).text('Playing: '+['Order','Chaos'][p]);
  $('#B').html('<tr>' + w +'</tr>');
}

start()

th { 
  font-size: 12px;
}
.C th { color: #807; }
.O th { color: #047; }
.C td.F:hover { background: #f0e; }
.O td.F:hover { background: #0fe; }
table.C td { background: #f0e; }
table.O td { background: #0fe; }

td {
  font-family: monospace;
  font-size: 12px;
  width: 1.2em;
  height: 1em;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr><th colspan=6></th></tr>
  <tbody id=B></tbody>
  <tr><th colspan=6></th></tr>
</table>
<p id=O></p>

As requested, text based game, input via popup, output in console (so to have a monospaced font).

function start() {
  b='\n......'.repeat(6).split('');
  t=0;
  $('#O').text('');
  $('table')[0].className='';
  show();
  $('th').eq(1).html('Left-click: O<br>Right-click: X');
  $('#B')
  .off('mouseup')
  .on('mouseup','td.F',function(ev){
    var x,y, p=~~this.id.slice(1)
    x=p%7-1
    y=p/7|0
    b[p]=ev.which > 1 ?'X':'O';
    ++t
    for(x=z='',c=0;c++<6;)
      for(x+='_',z+='_',r=0;r<6;r++)
        x+=b[c+r*7],z+=b[c<4?c-1+r*8:c+1+r*6];
    show()
    if (/X{5}|O{5}/.test(b.join('')+x+z))
      end(1)
    else if(t==6*6) 
      end(2)
    return false
  })
}

function end(w) {
  var n=['Order','Chaos'][w-1]
  $('th').eq(0).text('P'+w+' '+n+' Wins')
  $('th').eq(1).text('Click to play again')
  
  $('table')[0].className=$('tr')[0].className =n[0];
  $('#B').off('mouseup').on('mouseup', start)
}
function show() {
  var w,p
  p=t&1
  $('tr')[0].className=$('#B')[0].className='OC'[p];
  w=b.map(function(c,i){
    return c>' '?'<td class='+(c=='.'?'F':'X')+' id=C'+i+'>'+c+'</td>':'</tr><tr>'
  }).join('');
  $('th').eq(0).text('Playing: '+['Order','Chaos'][p]);
  $('#B').html('<tr>' + w +'</tr>');
}

start()

th { 
  font-size: 12px;
}
.C th { color: #807; }
.O th { color: #047; }
.C td.F:hover { background: #f0e; }
.O td.F:hover { background: #0fe; }
table.C td { background: #f0e; }
table.O td { background: #0fe; }

td {
  font-family: monospace;
  font-size: 12px;
  width: 1.2em;
  height: 1em;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr><th colspan=6></th></tr>
  <tbody id=B></tbody>
  <tr><th colspan=6></th></tr>
</table>
<p id=O></p>

Edit Modified interactive game, should run even in MSIE

As requested, text based game, input via popup, output in console (so to have a monospaced font).

function start() {
  b=Array(7).join('\n......').split('');
  t=0;
  $('#O').text('');
  $('table')[0].className='';
  show();
  $('th').eq(1).html('Left-click: O<br>Right-click: X');
  $('#B')
  .off('mouseup')
  .on('mouseup','td.F',function(ev){
    var x,y, p=~~this.id.slice(1)
    x=p%7-1
    y=p/7|0
    b[p]=ev.which > 1 ?'X':'O';
    ++t
    for(x=z='',c=0;c++<6;)
      for(x+='_',z+='_',r=0;r<6;r++)
        x+=b[c+r*7],z+=b[c<4?c-1+r*8:c+1+r*6];
    show()
    if (/X{5}|O{5}/.test(b.join('')+x+z))
      end(1)
    else if(t==6*6) 
      end(2)
    return false
  })
}

function end(w) {
  var n=['Order','Chaos'][w-1]
  $('th').eq(0).text('P'+w+' '+n+' Wins')
  $('th').eq(1).text('Click to play again')
  
  $('table')[0].className=$('tr')[0].className =n[0];
  $('#B').off('mouseup').on('mouseup', start)
}
function show() {
  var w,p
  p=t&1
  $('tr')[0].className=$('#B')[0].className='OC'[p];
  w=b.map(function(c,i){
    return c>' '?'<td class='+(c=='.'?'F':'X')+' id=C'+i+'>'+c+'</td>':'</tr><tr>'
  }).join('');
  $('th').eq(0).text('Playing: '+['Order','Chaos'][p]);
  $('#B').html('<tr>' + w +'</tr>');
}

start()

th { 
  font-size: 12px;
}
.C th { color: #807; }
.O th { color: #047; }
.C td.F:hover { background: #f0e; }
.O td.F:hover { background: #0fe; }
table.C td { background: #f0e; }
table.O td { background: #0fe; }

td {
  font-family: monospace;
  font-size: 12px;
  width: 1.2em;
  height: 1em;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr><th colspan=6></th></tr>
  <tbody id=B></tbody>
  <tr><th colspan=6></th></tr>
</table>
<p id=O></p>

added 234 characters in body

Source Link

edited May 17, 2015 at 9:40

edc65

32.2k
3
36
90

function start() {
  b='\n......'.repeat(6).split('');
t=0
sel='X'

function show() {
  var w,p
  p=t&1t=0;
  $('#B').addClass('OC'[p]'#O').removeClasstext('CO'[p]'');
  w=b.map(function$(c,i'table'){
    return c>' '?'<td class='+(c=='[0].'?'F':'X')+' id=C'+i+'>'+c+'</td>':'</tr><tr>'className='';
  }).joinshow('');
  $('#B''th').eq(1).html('<tr><th'Left-click: colspan=6>PlayingO<br>Right-click: '+(['Order','Chaos'][p]X') + 
  '</th><tr><tr><td colspan=6>' +;
  '<input type=radio name=S value=X' + $(sel=='X'?' checked':'''#B')+ '>X '+
  '<input type=radio name=S value=O' + .off(sel=='O'?' checked':'''mouseup')+ '>O</td>'+
  w +'</tr>');
}

show()

$('#B').on('click''mouseup','td.F',function(ev){
    var x,y, p=~~this.id.slice(1)
    x=p%7-1
    y=p/7|0
  sel=b[p]=$('input[type=radio]:checked')  b[p]=ev.val();which > 1 ?'X':'O';
    ++t
    for(x=z='',c=0;c++<6;)
      for(x+='_',z+='_',r=0;r<6;r++)
        x+=b[c+r*7],z+=b[c<4?c-1+r*8:c+1+r*6];
    show()
    if (/X{5}|O{5}/.test(b.join('')+x+z))
  {    end(1)
    else alertif('P1t==6*6) 
      end(ORDER2) 
 WINS'   return false
  })
}

function end(w) {
  var b='\n....n=['Order','Chaos'][w-1]
  $('th').eq(0).'text('P'+w+' '+n+' Wins')
  $('th').repeateq(61).splittext('''Click to play again');
   
  $('table')[0].className=$('tr')[0].className t=0=n[0];
  $('#B').off('mouseup').on('mouseup', start)
}
  elsefunction ifshow(t==6*6) {
  var w,p
  alert('P2p=t&1
  $(CHAOS'tr')[0].className=$('#B')[0].className='OC'[p];
 WINS' w=b.map(function(c,i){
    return b='\n......c>' '.repeat?'<td class='+(6c=='.'?'F':'X')+' id=C'+i+'>'+c+'</td>':'</tr><tr>'
  }).splitjoin('');
    $('th').eq(0).text('Playing: t=0'+['Order','Chaos'][p]);
  } $('#B').html('<tr>' 
 + w show(+'</tr>')
 ;
}

start()

th { 
  font-size: 12px;
}  
table.C th { color: #807; }
.O th { color: #807;#047; }
.C td.F:hover { background: #f0e; }
table.O thtd.F:hover { background: #0fe; }
table.C td color{ background: #087;#f0e; }
table.O td { background: #0fe; }

td {
  font-family: monospace;
  font-size: 12px;
  width: 1em;1.2em;
  height: 1em;
  text-align: center;
}    

table.C td.F:hover {
  background: #f0e;
}
table.O td.F:hover {
  background: #0fe;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table<table>
  <tr><th colspan=6></th></tr>
  <tbody id=B></tbody>
  <tr><th colspan=6></th></tr>
</table>
<p id=O></p>

b='\n......'.repeat(6).split('');
t=0
sel='X'

function show() {
  var w,p
  p=t&1
  $('#B').addClass('OC'[p]).removeClass('CO'[p]);
  w=b.map(function(c,i){
    return c>' '?'<td class='+(c=='.'?'F':'X')+' id=C'+i+'>'+c+'</td>':'</tr><tr>'
  }).join('');
  $('#B').html('<tr><th colspan=6>Playing: '+(['Order','Chaos'][p]) + 
  '</th><tr><tr><td colspan=6>' +
  '<input type=radio name=S value=X' + (sel=='X'?' checked':'')+ '>X '+
  '<input type=radio name=S value=O' + (sel=='O'?' checked':'')+ '>O</td>'+
  w +'</tr>');
}

show()

$('#B').on('click','td.F',function(){
  var x,y, p=~~this.id.slice(1)
  x=p%7-1
  y=p/7|0
  sel=b[p]=$('input[type=radio]:checked').val();
  ++t
  for(x=z='',c=0;c++<6;)
      for(x+='_',z+='_',r=0;r<6;r++)
        x+=b[c+r*7],z+=b[c<4?c-1+r*8:c+1+r*6];
  if (/X{5}|O{5}/.test(b.join('')+x+z))
  {
     alert('P1 (ORDER) WINS')
     b='\n......'.repeat(6).split('');
     t=0
  }
  else if(t==6*6) {
     alert('P2 (CHAOS) WINS')
     b='\n......'.repeat(6).split('');
     t=0
  }  
   show()
 
})

th {
  font-size: 12px;
}  
table.C th {
  color: #807;
}
table.O th {
  color: #087;
}

td {
  font-family: monospace;
  font-size: 12px;
  width: 1em;
  height: 1em;
  text-align: center;
}    

table.C td.F:hover {
  background: #f0e;
}
table.O td.F:hover {
  background: #0fe;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id=B></table>
<p id=O></p>

function start() {
  b='\n......'.repeat(6).split('');
  t=0;
  $('#O').text('');
  $('table')[0].className='';
  show();
  $('th').eq(1).html('Left-click: O<br>Right-click: X');
  $('#B')
  .off('mouseup')
  .on('mouseup','td.F',function(ev){
    var x,y, p=~~this.id.slice(1)
    x=p%7-1
    y=p/7|0
    b[p]=ev.which > 1 ?'X':'O';
    ++t
    for(x=z='',c=0;c++<6;)
      for(x+='_',z+='_',r=0;r<6;r++)
        x+=b[c+r*7],z+=b[c<4?c-1+r*8:c+1+r*6];
    show()
    if (/X{5}|O{5}/.test(b.join('')+x+z))
      end(1)
    else if(t==6*6) 
      end(2) 
    return false
  })
}

function end(w) {
  var n=['Order','Chaos'][w-1]
  $('th').eq(0).text('P'+w+' '+n+' Wins')
  $('th').eq(1).text('Click to play again')
   
  $('table')[0].className=$('tr')[0].className =n[0];
  $('#B').off('mouseup').on('mouseup', start)
}
function show() {
  var w,p
  p=t&1
  $('tr')[0].className=$('#B')[0].className='OC'[p];
  w=b.map(function(c,i){
    return c>' '?'<td class='+(c=='.'?'F':'X')+' id=C'+i+'>'+c+'</td>':'</tr><tr>'
  }).join('');
  $('th').eq(0).text('Playing: '+['Order','Chaos'][p]);
  $('#B').html('<tr>' + w +'</tr>');
}

start()

th { 
  font-size: 12px;
}
.C th { color: #807; }
.O th { color: #047; }
.C td.F:hover { background: #f0e; }
.O td.F:hover { background: #0fe; }
table.C td { background: #f0e; }
table.O td { background: #0fe; }

td {
  font-family: monospace;
  font-size: 12px;
  width: 1.2em;
  height: 1em;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr><th colspan=6></th></tr>
  <tbody id=B></tbody>
  <tr><th colspan=6></th></tr>
</table>
<p id=O></p>

added 1978 characters in body

Source Link

edited May 16, 2015 at 17:00

edc65

32.2k
3
36
90

Not using ES6ES5 features, it should run on any moder browser (where you can have a JS console panel)

Now, some more fun Interactive and graphic version, run snippet to play.

b='\n......'.repeat(6).split('');
t=0
sel='X'

function show() {
  var w,p
  p=t&1
  $('#B').addClass('OC'[p]).removeClass('CO'[p]);
  w=b.map(function(c,i){
    return c>' '?'<td class='+(c=='.'?'F':'X')+' id=C'+i+'>'+c+'</td>':'</tr><tr>'
  }).join('');
  $('#B').html('<tr><th colspan=6>Playing: '+(['Order','Chaos'][p]) + 
  '</th><tr><tr><td colspan=6>' +
  '<input type=radio name=S value=X' + (sel=='X'?' checked':'')+ '>X '+
  '<input type=radio name=S value=O' + (sel=='O'?' checked':'')+ '>O</td>'+
  w +'</tr>');
}

show()

$('#B').on('click','td.F',function(){
  var x,y, p=~~this.id.slice(1)
  x=p%7-1
  y=p/7|0
  sel=b[p]=$('input[type=radio]:checked').val();
  ++t
  for(x=z='',c=0;c++<6;)
      for(x+='_',z+='_',r=0;r<6;r++)
        x+=b[c+r*7],z+=b[c<4?c-1+r*8:c+1+r*6];
  if (/X{5}|O{5}/.test(b.join('')+x+z))
  {
     alert('P1 (ORDER) WINS')
     b='\n......'.repeat(6).split('');
     t=0
  }
  else if(t==6*6) {
     alert('P2 (CHAOS) WINS')
     b='\n......'.repeat(6).split('');
     t=0
  }  
  show()

})

th {
  font-size: 12px;
}  
table.C th {
  color: #807;
}
table.O th {
  color: #087;
}

td {
  font-family: monospace;
  font-size: 12px;
  width: 1em;
  height: 1em;
  text-align: center;
}    

table.C td.F:hover {
  background: #f0e;
}
table.O td.F:hover {
  background: #0fe;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id=B></table>
<p id=O></p>

Not using ES6 features, it should run on any moder browser (where you can have a JS console panel)

Not using ES5 features, it should run on any moder browser (where you can have a JS console panel)

Now, some more fun Interactive and graphic version, run snippet to play.

b='\n......'.repeat(6).split('');
t=0
sel='X'

function show() {
  var w,p
  p=t&1
  $('#B').addClass('OC'[p]).removeClass('CO'[p]);
  w=b.map(function(c,i){
    return c>' '?'<td class='+(c=='.'?'F':'X')+' id=C'+i+'>'+c+'</td>':'</tr><tr>'
  }).join('');
  $('#B').html('<tr><th colspan=6>Playing: '+(['Order','Chaos'][p]) + 
  '</th><tr><tr><td colspan=6>' +
  '<input type=radio name=S value=X' + (sel=='X'?' checked':'')+ '>X '+
  '<input type=radio name=S value=O' + (sel=='O'?' checked':'')+ '>O</td>'+
  w +'</tr>');
}

show()

$('#B').on('click','td.F',function(){
  var x,y, p=~~this.id.slice(1)
  x=p%7-1
  y=p/7|0
  sel=b[p]=$('input[type=radio]:checked').val();
  ++t
  for(x=z='',c=0;c++<6;)
      for(x+='_',z+='_',r=0;r<6;r++)
        x+=b[c+r*7],z+=b[c<4?c-1+r*8:c+1+r*6];
  if (/X{5}|O{5}/.test(b.join('')+x+z))
  {
     alert('P1 (ORDER) WINS')
     b='\n......'.repeat(6).split('');
     t=0
  }
  else if(t==6*6) {
     alert('P2 (CHAOS) WINS')
     b='\n......'.repeat(6).split('');
     t=0
  }  
  show()

})

th {
  font-size: 12px;
}  
table.C th {
  color: #807;
}
table.O th {
  color: #087;
}

td {
  font-family: monospace;
  font-size: 12px;
  width: 1em;
  height: 1em;
  text-align: center;
}    

table.C td.F:hover {
  background: #f0e;
}
table.O td.F:hover {
  background: #0fe;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id=B></table>
<p id=O></p>

edited body

Source Link

edited May 16, 2015 at 16:13

edc65

32.2k
3
36
90

Loading

Source Link

created May 16, 2015 at 15:52

edc65

32.2k
3
36
90

Loading

Stack Exchange Network

Return to Answer