当前位置: 萬仟网 > IT编程>网页制作>CSS > 纯CSS3实现的井字棋游戏

纯CSS3实现的井字棋游戏

2020年11月21日  | 萬仟网IT编程  | 我要评论
运行效果:html.tic-tac-toe - for (var turn = 1; turn <= 9; turn++) - for (var row = 1; row <= 3

运行效果:

html

.tic-tac-toe
  - for (var turn = 1; turn <= 9; turn++)
    - for (var row = 1; row <= 3; row++)
      - for (var column = 1; column <= 3; column++)
        - var player = "1"
        - var positionhorizontal = ""
        - var positionvertical = ""
        - var positiondiagonal = ""
        
        if( turn % 2 == 0 )
          - var player = "2"
          
        if( column == 1 )
          - var positionhorizontal = " left first-column"
        else if( column == 2 )
          - var positionhorizontal = " middle second-column"
        else if( column == 3 )
          - var positionhorizontal = " right third-column"
         
        if( row == 1 )
          - var positionvertical = " top first-row"
        else if( row == 2 )
          - var positionvertical = " center second-row"
        else if( row == 3 )
          - var positionvertical = " bottom third-row"
        
        if( row == 1 && column == 1 )
          - var positiondiagonal = " first-diagonal"
        else if( row == 1 && column == 3 )
          - var positiondiagonal = " second-diagonal"
        else if( row == 2 && column == 2 )
          - var positiondiagonal = " first-diagonal second-diagonal"
        else if( row == 3 && column == 1 )
          - var positiondiagonal = " second-diagonal"
        else if( row == 3 && column == 3 )
          - var positiondiagonal = " first-diagonal"
        
        input(id="block" + turn + "-" + row + "-" + column type="radio" class="player-" + player + positionhorizontal + positionvertical + positiondiagonal + " turn-" + turn)
        label(for="block" + turn + "-" + row + "-" + column class="turn-" + turn)

  .end
    h3
    a(href="") restart
    
h5 note: use the full page view for the best experience.

css3

@import "compass/css3";

/* variables
-------------------------------------------------------------- */

$size-sm:        90px;
$size:           140px;
$spacing:        5px;

$player-1-icon:  "\f00d";
$player-2-icon:  "\f10c";

$player-1-color: #dc685a;
$player-2-color: #ecaf4f;
$hover-color:    #3d4250;

/* body and notice styling
-------------------------------------------------------------- */

body {
  color: #b6b5ca;
  font-family: 'arial', sans-serif;
  margin: 0;
  text-align: center;
}

h5 {
  font-weight: 400;
  padding: 0 20px;
}

/* tic-tac-toe game
-------------------------------------------------------------- */

.tic-tac-toe {
  font-family: 'open sans', sans-serif;
  height: ($size-sm + $spacing*2)*3;
  overflow: hidden;
  margin: 50px auto 30px auto;
  position: relative;
  width: ($size-sm + $spacing*2)*3;
  
  @media(min-width: 450px) {
    height: ($size + $spacing*2)*3;
    width: ($size + $spacing*2)*3;
  }
  
  input[type="radio"] {
    // hide radio buttons
    display: none;
    
    // put the label above the rest, when checked
    &:checked + label {
      cursor: default;
      z-index: 10 !important;
    }
    
    // player 1 icon
    &.player-1 + label:after { content: $player-1-icon; }
    
    // player 2 icon
    &.player-2 + label:after { content: $player-2-icon; }
    
    // show icon when checked
    &.player-1:checked + label:after,
    &.player-2:checked + label:after { opacity: 1; }
    
    // player 1 color
    &.player-1:checked + label { background-color: $player-1-color; }
    
    // player 2 color
    &.player-2:checked + label { background-color: $player-2-color; }
    
    // stack each turn on top of another
    @for $i from 1 through 9 {
      &.turn-#{$i} + label {
        z-index: $i;
      }
    }
    
    // display the first turn
    &.turn-1 + label { display: block; }
    
    // show next turn, once the current label has been :checked
    @for $i from 1 through 8 {
      &.turn-#{$i}:checked ~ .turn-#{$i+1} + label { display: block; }
    }
    
    // label positioning
    &.left + label { left: 0; }
    &.top + label { top: 0; }
    
    &.middle + label { left: ($size-sm + $spacing*2); }
    &.right + label { left: ($size-sm + $spacing*2)*2; }
    &.center + label { top: ($size-sm + $spacing*2); }
    &.bottom + label { top: ($size-sm + $spacing*2)*2; }
    
    @media(min-width: 450px) {
      &.middle + label { left: ($size + $spacing*2); }
      &.right + label { left: ($size + $spacing*2)*2; }
      &.center + label { top: ($size + $spacing*2); }
      &.bottom + label { top: ($size + $spacing*2)*2; }
    }
  }
  
  // if all 9 turns have been played, show the end pop-up and set the text to "it is a tie!"
  input[type="radio"]:checked ~ input[type="radio"]:checked ~ input[type="radio"]:checked ~ 
  input[type="radio"]:checked ~ input[type="radio"]:checked ~ input[type="radio"]:checked ~ 
  input[type="radio"]:checked ~ input[type="radio"]:checked ~ input[type="radio"]:checked ~ .end {
    display: block;
    
     > h3:before { content: "it is a tie!"; }
  }
  
  // check for all posibble victories, for both players individually
  @for $i from 1 through 2 {    
    .player-#{$i}.first-column:checked ~ .player-#{$i}.first-column:checked ~ .player-#{$i}.first-column:checked  ~ .end,
    .player-#{$i}.second-column:checked ~ .player-#{$i}.second-column:checked ~ .player-#{$i}.second-column:checked  ~ .end,
    .player-#{$i}.third-column:checked ~ .player-#{$i}.third-column:checked ~ .player-#{$i}.third-column:checked ~ .end,
    .player-#{$i}.first-row:checked ~ .player-#{$i}.first-row:checked ~ .player-#{$i}.first-row:checked  ~ .end,
    .player-#{$i}.second-row:checked ~ .player-#{$i}.second-row:checked ~ .player-#{$i}.second-row:checked  ~ .end,
    .player-#{$i}.third-row:checked ~ .player-#{$i}.third-row:checked ~ .player-#{$i}.third-row:checked ~ .end,
    .player-#{$i}.first-diagonal:checked ~ .player-#{$i}.first-diagonal:checked ~ .player-#{$i}.first-diagonal:checked ~ .end,
    .player-#{$i}.second-diagonal:checked ~ .player-#{$i}.second-diagonal:checked ~ .player-#{$i}.second-diagonal:checked ~ .end {
      display: block;
      
      h3:before { content: "player #{$i} wins!" !important; }
    }
  }
  
  // label style
  label {
    background-color: #78bec5;
    border-radius: 14px;
    cursor: pointer;
    color: #fff;
    display: none;
    height: $size-sm;
    margin: $spacing;
    position: absolute;
    width: $size-sm;
    @include transition(background-color .3s);
    
    @media(min-width: 450px) {
      height: $size;
      width: $size;
    }
    
    // label hover effect
    &:hover {
      background-color: $hover-color;
      
      &:after { opacity: .4; }
    }
    
    // icon style
    &:after {
      left: 0;
      font-family: "fontawesome";
      font-size: $size-sm*0.5;
      margin-top: -($size-sm*0.5)/2;
      opacity: 0;
      position: absolute;
      text-align: center;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, .2);
      top: 50%;
      width: 100%;
      
      @media(min-width: 450px) {
        font-size: $size*0.5;
        margin-top: -($size*0.5)/2;
      }
    }
  }
  
  // end screen style
  .end {
    background: rgba(255, 255, 255, .8);
    bottom: 5px;
    color: #3d4250;
    display: none;
    left: 5px;
    padding-top: 55px;
    position: absolute;
    right: 5px;
    top: 5px;
    text-align: center;
    z-index: 11;
   
    @media(min-width: 450px) {
      padding-top: 110px;
    }
    
    h3 {
      font-size: 30px;
      font-weight: 300;
      
      @media(min-width: 450px) { font-size: 40px; }
    }
    
    a {
      background-color: #3d4250;
      border-radius: 4px;
      color: #fff;
      padding: 14px 45px;
      text-decoration: none;
      @include transition(background-color .2s);
      
      &:hover {
        background-color: #262934;
        cursor: pointer;
      }
    }
  }
}

以上就是纯css3实现的井字棋游戏的详细内容,更多关于css3 井字棋游戏的资料请关注萬仟网其它相关文章!

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

  • CSS 首字母大写代码

    .post-body p:first-letter {color:#444;display:inline;flo... [阅读全文]
  • HTML定位和布局----float浮动

    HTML定位和布局----float浮动

    1、定位体系一共有三种 (1)常规流; (2)浮动定位 (3)绝对定位 2、float属性常用的语法: (1)float:left;左浮动 (2)f... [阅读全文]
  • 初入编程的新世界

    准备跨入程序员的行列了, 今天开课第一天, 算起来之前学习的几天, 第一次真正的了解了网页制作包括什么, html(结构),css(页面美化 层叠样... [阅读全文]
  • 布局神器table之tr,th及td的使用讲解

    布局神器table之tr,th及td的使用讲解

    table是一个布局神器,之前看过很多代码,都是用table布局的。但是,我在学习的过程中,发现table有很迷的三个宝宝,他们是tr,th... [阅读全文]
  • 原生Bootstrap实现动态分页(代码实例)

    原生Bootstrap实现动态分页(代码实例)

    最近开发时需要动态显示分页页数,写了一个动态显示页数的算法。效果为动态显示当前页数以及后的页数,规定自己想要显示的页数x,若总页数小于x,则... [阅读全文]
  • 文章内容页广告浮于左上角的解决办法

    这个是整页代码,你可以看着改了,也可以保存成html文件,完了试试看就知道了,主要用的css+div 上面的东西移到模板中,下面的东... [阅读全文]
  • 在vue中使用[provide/inject]实现页面reload

    在vue中使用[provide/inject]实现页面reload

    在vue中实现页面刷新有不同的方法: 如:this.$router.go(0),location.reload()等,但是或多或少会存在问题,如页面... [阅读全文]
  • 鲜为人知的CSS技巧10则

    本翻译并未得到作者或网站授权。一切权利都归原作者及原网站所有。 如果你得到原作者或原发表网站的授权,可以自由使用本翻译。 1... [阅读全文]
  • 关于ajax跨域问题的三个原因分析

    ajax 跨域 原因 浏览器限制 很多人认为,跨域问题时后台造成的,其实不然,真正造成跨域问题的原因是浏览器,浏览器出于安全的考虑,当... [阅读全文]
  • web前端

    web前端: 是一门客户端语言 客户端:用户上网的那一端 服务端:后端,是建立在一个公司内部的端口 web全栈工程师:node.js web前端的三... [阅读全文]
验证码:
Copyright © 2017-2020  萬仟网 保留所有权利. 粤ICP备17035492号-1