[Summer Vacation Memories] El artefacto para refrescarse del calor, utilicé CSS para recrear una videoconsola

Language 2022-05-26 21:39:54 views: null

"Estoy participando en el "Concurso creativo de principios de verano" Para obtener más información, consulte: Concurso creativo de principios de verano "

recuerdos de verano

Cuando era niño, había un árbol frondoso en el patio de mi casa. En ese momento, no había aire acondicionado en la casa. En verano, acostaba una colchoneta a la sombra del árbol, tomaba una siesta, o leer un libro. Más tarde, mi familia me compró una videoconsola portátil, que en aquella época era todo un lujo. Por lo tanto, la mayor parte de las vacaciones de verano se dedican a la rotación y el movimiento de Tetris.

Bifurqué una consola de juegos con CSS

Mi recuerdo de la consola era borroso, así que busqué imágenes de la consola. Especialmente las imágenes de dibujos animados, redondas y realmente lindas. El cuerpo principal y la pantalla de la consola de juegos son rectangulares, y los botones son rectángulos circulares o redondeados. Divertido y más fácil de implementar.

Así que bifurqué una consola de juegos con CSS.

Código en los Nuggets

"Nuggets on Code" puede obtener una vista previa instantánea y demostrar los efectos del código en línea, lo cual es muy conveniente. A continuación se muestra una vista previa de la consola.

visualización de la interfaz de usuario

cuerpo

  • El cuerpo principal de la consola de juegos es un rectángulo con bordes y arcos;
  • Para presentar un efecto tridimensional, se establece una sombra hacia el exterior a través del cuerpo principal de la consola de juegos box-shadow;

CSS

.player {
  width: 280px;
  height: 460px;
  background: #ffc600;
  border: 6px solid #5a1f12;
  border-radius: 15px 15px 45px 15px;
  position: relative;
  box-shadow: 30px 20px 10px 10px #9e988b;
}
复制代码

html

<div class="player"></div>
复制代码

auricular

Cuando la consola de juegos portátil esté jugando, habrá efectos de sonido, así que diseñé un auricular.

  • El receptor es un rectángulo plano y redondeado, y las esquinas redondeadas en ambos lados se pueden lograr configurando el valor de border-radius;

CSS

.head {
  width: 100%;
  height: 26px;
  position: absolute;
  top: 0;
  left: 0;
  border-bottom: 5px solid #5a1f12;
}
.head::before {
  content: '';
  width: 6px;
  height: 26px;
  background: #5a1f12;
  position: absolute;
  top: 0;
  left: 20px;
}
.head::after {
  content: '';
  width: 6px;
  height: 26px;
  background: #5a1f12;
  position: absolute;
  top: 0;
  right: 20px;
}
.receiver {
  width: 50px;
  height: 8px;
  background: #eba260;
  border: 4px solid #5a1f12;
  border-radius: 8px;
  position: absolute;
  top: 5px;
  left: 35px;
}
复制代码

html

<div class="head">
  <div class="receiver"></div>
</div>
复制代码

Pantalla

Además del marco, la parte de visualización de la pantalla se compone de dos contenidos, que no coexisten antes y después del arranque.

antes del arranque

  • La pantalla verde y el efecto reflectante se muestran antes del arranque.La pantalla de la consola de juegos cuando era joven era verde claro, y todavía estoy un poco impresionado;
  • El efecto reflectante es principalmente para aumentar la diversión y mostrar el brillo de la pantalla. Diseñé el efecto de reflejo como una barra blanca que se movía desde la parte superior de la pantalla hacia abajo, y este efecto se logró a través de la animación;

CSS

.screen {
  width: 220px;
  height: 170px;
  background: #9c6766;
  border: 5px solid #5a1f12;
  border-radius: 10px 10px 30px 10px;
  position: absolute;
  top: 40px;
  left: 50%;
  margin-left: -115px;
}
.monitor {
  width: 180px;
  height: 120px;
  background: #d5eabd;
  border: 5px solid #5a1f12;
  margin: 20px auto;
  position: relative;
  overflow: hidden;
}
.monitor .light {
  width: 20px;
  height: 220px;
  background: #e2f0d8;
  position: absolute;
  top: -33px;
  left: -23px;
  transform: rotate(44deg);
  animation: monitorlight 3s infinite;
}
@keyframes monitorlight {
  50% {
    left: 80%;
  }
  51% {
    left: 80%;
    opacity: 1;
  }
  61% {
    left: 80%;
    opacity: 0.3;
  }
  71% {
    left: 80%;
    opacity: 1;
  }
  81% {
    left: 80%;
    opacity: 0.3;
  }
  91% {
    left: 80%;
    opacity: 1;
  }
  100% {
    left: 80%;
    opacity: 1;
  }
}
复制代码

html

<div class="screen">
  <div class="monitor" id="monitor">
    <div class="light"></div>
  </div>
</div>
复制代码

después del arranque

  • Después de iniciar, se muestra la interfaz de Tetris, incluida el área de juego a la izquierda y el registro del juego a la derecha;
  • El área de juego actualmente solo implementa la función de mostrar el nombre del juego;

CSS

.screen .game {
  width: 190px;
  height: 150px;
  background: #d5eabd;
  border-radius: 10px 10px 30px 10px;
  margin: 10px auto;
  display: none;
}
.game .left {
  float: left;
  width: 52%;
  height: 128px;
  border: 1px solid #333;
  margin: 10px 0 0 10px;
  position: relative;
}
.game .game-name {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  color: #000;
  line-height: 1;
  background: rgba(158, 174, 134, 0.8);
  justify-content: center;
  display: none;
}
.game .game-name .name-box {
  animation: 1.5s linear gamename forwards;
  font-size: 15px;
  padding: 54px 0 0 10px;
}
@keyframes gamename {
  30% {
    opacity: 0.3;
  }
  60% {
    opacity: 1;
  }
  90% {
    opacity: 0.3;
  }
  91% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
.game .left-content {
  position: absolute;
  top: 10px;
  left: 8px;
}
.game .left-box .integral-block.b {
  border: 2px solid #333;
}
.game .left-box .integral-block.b::after {
  background: #333;
}
.game .right {
  float: right;
  width: 30%;
  font-size: 12px;
  font-weight: 300;
  text-align: left;
  line-height: 1.5;
  padding: 10px;
  color: #000;
}
.game .integral-num {
  font-size: 13px;
  font-weight: 500;
  text-align: right;
}
.game .integral-graph {
  position: relative;
}
.game .integral-box {
  position: relative;
  height: 14px;
  width: 40px;
}
.game .integral-box .integral-block {
  border: 2px solid #333;
}
.game .integral-box .integral-block::after {
  background: #333;
}
.game .integral-block {
  display: block;
  width: 6px;
  height: 6px;
  padding: 1px;
  border: 2px solid #9eae86;
  margin: 0 2px 2px 0;
  float: left;
}
.game .integral-block::after {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  background: #9eae86;
  overflow: hidden;
}
.game .integral-box1 {
  top: 4px;
  left: 13px;
}
.game .integral-box2 {
  top: 7px;
  left: 27px;
}
复制代码

html

<div class='screen'>
  <div class='game' id='game'>
    <div class='left'>
      <div class='left-content'>
        <div class='left-box'>
          <span class='integral-block'></span>
          <span class='integral-block'></span>
          <span class='integral-block'></span>
          <span class='integral-block'></span>
          <span class='integral-block'></span>
          <span class='integral-block'></span>
        </div>
        <div class='left-box'>
          <span class='integral-block'></span>
          <span class='integral-block'></span>
          <span class='integral-block'></span>
          <span class='integral-block'></span>
          <span class='integral-block'></span>
          <span class='integral-block'></span>
        </div>
        <div class='left-box'>
          <span class='integral-block'></span>
          <span class='integral-block'></span>
          <span class='integral-block'></span>
          <span class='integral-block'></span>
          <span class='integral-block'></span>
          <span class='integral-block'></span>
        </div>
        <div class='left-box'>
          <span class='integral-block'></span>
          <span class='integral-block'></span>
          <span class='integral-block'></span>
          <span class='integral-block'></span>
          <span class='integral-block'></span>
          <span class='integral-block'></span>
        </div>
        <div class='left-box'>
          <span class='integral-block'></span>
          <span class='integral-block'></span>
          <span class='integral-block'></span>
          <span class='integral-block'></span>
          <span class='integral-block'></span>
          <span class='integral-block'></span>
        </div>
        <div class='left-box'>
          <span class='integral-block'></span>
          <span class='integral-block'></span>
          <span class='integral-block'></span>
          <span class='integral-block'></span>
          <span class='integral-block'></span>
          <span class='integral-block'></span>
        </div>
        <div class='left-box'>
          <span class='integral-block'></span>
          <span class='integral-block'></span>
          <span class='integral-block'></span>
          <span class='integral-block'></span>
          <span class='integral-block'></span>
          <span class='integral-block'></span>
        </div>
        <div class='left-box'>
          <span class='integral-block'></span>
          <span class='integral-block'></span>
          <span class='integral-block'></span>
          <span class='integral-block'></span>
          <span class='integral-block'></span>
          <span class='integral-block'></span>
        </div>
      </div>
      <div class='game-name' id='gameName'>
        <div class='name-box'>游戏开始</div>
      </div>
    </div>
    <div class='right'>
      <div class='integral-title'>最高分</div>
      <div class='integral-num'>10</div>
      <div class='integral-title'>起始行</div>
      <div class='integral-num'>0</div>
      <div class='integral-title'>下一个</div>
      <div class='integral-graph'>
        <div class='integral-box integral-box1'>
          <span class='integral-block'></span>
          <span class='integral-block'></span>
        </div>
        <div class='integral-box integral-box2'>
          <span class='integral-block'></span>
          <span class='integral-block'></span>
        </div>
      </div>
    </div>
  </div>
</div>;
复制代码

Línea divisoria

  • La línea divisoria es para distinguir mejor las dos áreas de la pantalla y los botones;
  • Incluyendo dos horizontales izquierda y derecha y seis puntos en el medio;

CSS

.dividing {
  width: 100%;
  height: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  top: 220px;
  left: 0;
}
.dleft {
  width: 50px;
  height: 5px;
  background: #5a1f12;
  margin-left: 30px;
  border-radius: 5px;
}
.dcenter {
  display: flex;
}
.dspot {
  width: 3px;
  height: 5px;
  background: #5a1f12;
  margin-right: 3px;
  border-radius: 3px;
}
.dright {
  width: 80px;
  height: 5px;
  background: #5a1f12;
  margin-right: 30px;
  border-radius: 5px;
}
复制代码

html

<div class='dividing'>
  <div class='dleft'></div>
  <div class='dcenter'>
    <div class='dspot'></div>
    <div class='dspot'></div>
    <div class='dspot'></div>
    <div class='dspot'></div>
    <div class='dspot'></div>
    <div class='dspot'></div>
  </div>
  <div class='dright'></div>
</div>;
复制代码

botón

  • Los botones de operación arriba, abajo, izquierda y derecha se componen de un círculo y una cruz. La cruz se compone de rectángulos horizontales y verticales. Para aumentar el efecto tridimensional, la sombra exterior se agrega al rectángulo de la cruz;
  • Botón de inicio, el punto rojo en la parte superior del rectángulo redondeado inclinado a la derecha es el botón de inicio. Después de hacer clic, la pantalla se ilumina y muestra el contenido. Al mismo tiempo, no se puede hacer clic repetidamente en el botón de inicio, y el se puede hacer clic en el botón de parada;
  • El punto rojo en el lado inferior del rectángulo redondeado inclinado en el lado derecho del botón de parada es el botón de inicio. Después de hacer clic, la pantalla se apagará para mostrar una pantalla verde. Al mismo tiempo, no se puede hacer clic en el botón de parada repetidamente, y se puede hacer clic en el botón de inicio;
  • Botón de sonido, los dos rectángulos redondeados inferiores son botones de sonido;

CSS

.push-direction {
  width: 80px;
  height: 80px;
  background: #ee9731;
  border: 4px solid #5a1f12;
  border-radius: 50%;
  position: absolute;
  top: 260px;
  left: 15px;
}
.push-direction::before {
  content: '';
  width: 54px;
  height: 20px;
  background: #7b4a45;
  position: absolute;
  top: 30px;
  left: 13px;
  box-shadow: 0 -3px 0 0 #fff;
  border-radius: 5px;
}
.push-direction::after {
  content: '';
  width: 20px;
  height: 54px;
  background: #7b4a45;
  position: absolute;
  top: 13px;
  right: 30px;
  box-shadow: 0 -3px 0 0 #fff;
  border-radius: 5px;
}
.push-control {
  width: 36px;
  height: 80px;
  background: #eb9430;
  border: 4px solid #5a1f12;
  border-radius: 40px;
  position: absolute;
  top: 260px;
  right: 35px;
  transform: rotate(55deg);
}
.push-control .begin,
.push-control .stop {
  width: 26px;
  height: 26px;
  line-height: 26px;
  text-align: center;
  color: #fff;
  background: #ff4822;
  position: absolute;
  left: 6px;
  box-shadow: inset 0 3px 0 0 #fff;
  border-radius: 50%;
  font-size: 13px;
  cursor: pointer;
}
.push-control .begin {
  top: 10px;
}
.push-control .stop {
  top: 45px;
}
.push-sound {
  width: 16px;
  height: 50px;
  background: #864949;
  position: absolute;
  top: 350px;
  border: 2px solid #5a1f12;
  border-radius: 16px;
  box-shadow: inset 3px 0 0 0 #fff;
  transform: rotate(60deg);
}
.push-sound::before {
  content: '';
  width: 24px;
  height: 4px;
  background: #5a1f12;
  position: absolute;
  bottom: 21px;
  left: 12px;
  border-radius: 4px;
  transform: rotate(-90deg);
}
.push-sound-top {
  left: 80px;
}
.push-sound-bottom {
  left: 140px;
}
复制代码

html

<div class="push-direction"></div>
<div class="push-control">
  <div class="begin" id="pushBegin">B</div>
  <div class="stop" id="pushStop">S</div>
</div>
<div class="push-sound push-sound-top"></div>
<div class="push-sound push-sound-bottom"></div>
复制代码

js

var leftBox = document.getElementsByClassName('left-box');
var pushBegin = document.getElementById('pushBegin');
var pushStop = document.getElementById('pushStop');
var monitor = document.getElementById('monitor');
var game = document.getElementById('game');
var gameName = document.getElementById('gameName');

// 屏幕展示方法
function show() {
  monitor.style.display = 'none';
  game.style.display = 'block';
  // 设置开始按钮不可以点击
  pushBegin.disabled = false;
  // 设置关闭按钮可以点击
  pushStop.disabled = true;
  setTimeout(function () {
    for (var i = 0; i < leftBox.length; i++) {
      var block = leftBox[i].getElementsByClassName('integral-block');
      for (var j = 0; j < block.length; j++) {
        block[j].classList.add('b');
      }
    }
  }, 800);
  setTimeout(function () {
    gameName.style.display = 'block';
  }, 1500);
}

// 屏幕停止方法
function stop() {
  monitor.style.display = 'block';
  game.style.display = 'none';
  // 设置开始按钮可以点击
  pushBegin.disabled = true;
  // 设置关闭按钮不可以点击
  pushStop.disabled = false;
  for (var i = 0; i < leftBox.length; i++) {
    var block = leftBox[i].getElementsByClassName('integral-block');
    for (var j = 0; j < block.length; j++) {
      block[j].classList.remove('b');
    }
  }
}
pushBegin.onclick = show;
pushStop.onclick = stop;
复制代码

Resumir

Esta vez, el uso de CSS para crear la consola de juegos de mi infancia me ha traído mucha inspiración. Se ha acumulado una gran cantidad de imágenes de dibujos animados en mi cerebro, y poco a poco me daré cuenta cuando tenga tiempo.

El proceso creativo es realmente interesante. El código se ha convertido en mi pincel. Como una persona que no es buena pintando pero le gustan los dibujos animados, el código me ayuda a darme cuenta de la pintura que quiero lograr. ( ^▽^ )

Sin embargo, todavía quedan dos funciones por implementar. El primero es la capacidad de iluminar bloques por fila y el otro es el desarrollo del juego Tetris. El anterior está en exploración recientemente. Las siguientes funciones y algoritmos son mis defectos, y espero compensarlos en el futuro.

Supongo que te gusta

Origin juejin.im/post/7101841842768986125
Recomendado
Clasificación
Diario
Más
2024-05-17(4)
2024-05-16(22)
2024-05-15(5)
2024-05-14(10)
2024-05-13(7)
2024-05-12(22)
2024-05-11(31)
2024-05-10(32)
2024-05-09(31)
2024-05-08(18)

Code World

© 2018 codetd.com