js实现客厅扫地机器人扫地动画交互效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：js实现客厅扫地机器人扫地动画交互效果代码，点击客厅任意位置，机器人就会一路扫过来。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
:root {
  --r-color: red;
  --r-lightgray: #666;
  --r-darkgray: #333;
  --floor-img: url('//repo.bfw.wiki/bfwrepo/image/6275a311f3cea.png');
}

* {
  box-sizing: border-box;
}

html {
  overflow: hidden;
  background: #222;
  color: gray;
  font-family: monospace;
  font-size: 10px;
  text-align: center;
}

body {
  margin: 0;
  display: grid;
  place-items: center;
  min-height: 100vh;
}

#game_console {
  width: 100%;
  max-width: 1000px;
  aspect-ratio: 16 / 9;
  position: relative;
  font-size: 0;
  overflow: hidden;
  box-shadow: 0 20px 50px black;
}
#game_console:before {
  content: '';
  width: 300%;
  aspect-ratio: 16 / 9;
  position: absolute;
  left: -100%;
  top: -100%;
  background-color: peru;
  --bg-size: 62.5px;
  background-image: 
    linear-gradient(45deg, #B27039 25%, transparent 25%, transparent 75%, #B27039 75%), 
    linear-gradient(45deg, #B27039 25%, transparent 25%, transparent 75%, #B27039 75%);
  background-size:
    var(--bg-size) var(--bg-size), var(--bg-size) var(--bg-size);
  background-position: 
    0 0, calc(var(--bg-size)*.5) calc(var(--bg-size)*.5);
  transform: rotate(45deg);
  z-index: -1;
/*   background-blend-mode: hue; */
}
#game_console:after {
  content: '';
  width: 100%;
  aspect-ratio: 16 / 9;
  position: absolute;
  top: 0;
  left: 0;
  background-image: var(--floor-img);
  background-size: 100% 100%;
  background-position: 50% 50%;
  z-index: 10000;
  pointer-events: none;  
  filter: drop-shadow(0 15px 15px rgba(0,0,0,.75));
}

#roomba {
  width: calc(100% * .0625);
  height: calc((100% * .0625)*1.78);
  background: radial-gradient(circle, var(--r-darkgray) 20%, var(--r-darkgray) 50%, var(--r-color) 52%, var(--r-color) 55%, var(--r-lightgray) 57%);
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px black, 0 0 10px black;
  position: absolute;
  pointer-events: none;
/*   animation: flash 1s linear infinite; */
  z-index: 9999;
  transition: 1s linear;
  font-size: 20px;
  text-align: center;
  display: grid;
  place-items: center;
  text-shadow: -1px -1px black, 1px 1px black;
  color: white;
  font-family: monospace;
}
@keyframes flash {
  50% { background: radial-gradient(circle, var(--r-color) 10%, var(--r-darkgray) 12%, var(--r-darkgray) 50%, var(--r-lightgray) 52%) }
}

.dust {
  width: calc(100% * .0625);
  height: calc((100% * .0625)*1.78);
  background: rgba(125,125,125,.6);
  position: absolute;
  z-index: 1;
  transition: .25s;
  opacity: 1;
  outline: 2px dotted rgba(0,0,0,.1);
  /*   font-size: 24px; */
}

.clean {
  /*   pointer-events: none; */
  animation: clean .5s linear forwards;
}
@keyframes clean {
  99% {
    transform: scale(.5);
    border-radius: 50%;
    opacity: 0;
  }
  100% {
    transform: scale(1);
    border-radius: 100%;
    opacity: 0;
  }
}

.blockage {
  transform: none !important;
  opacity: 0;
  pointer-events: all;
}
</style>


</head>

<body>
  <div id='game_console'>
  <div id='roomba'></div>
</div>
Our robot vacuum us kind of dumb. You have to tell it where to go.<br>
Click a square to move the vacuum.

  
      <script >
const gc = document.querySelector('#game_console')
const gc_loc = gc.getBoundingClientRect()
const tile_size = gc_loc.width*(100/16/100)
const half_tile = tile_size*.5
var moving;
var direction = '';
var clicks = 0

const floor = [22,23,24,25,38,39,40,41,66,67,76,77,82,83,92,93,118,119,120,121,123]

const roomba = document.querySelector('#roomba')
roomba.setAttribute('grid_loc',[1,1])
roomba.style.left = roomba.getAttribute('grid_loc').split(',')[0]*tile_size + 'px'
roomba.style.top = roomba.getAttribute('grid_loc').split(',')[1]*tile_size + 'px'

for(var i=0;i<144;i++) {
  var d = document.createElement('div')
  d.className = 'dust'
  if(floor.includes(i)) {
    d.className = 'dust clean blockage'
  }
  d.setAttribute('grid_loc', [i % 16,Math.floor(i/16)])
  d.innerHTML = i
  d.style.left = (i % 16)*tile_size + 'px'
  d.style.top = Math.floor(i/16)*tile_size + 'px'

  d.onclick = function() {  
    var r_loc_x = Number(roomba.getAttribute('grid_loc').split(',')[0])
    var r_loc_y = Number(roomba.getAttribute('grid_loc').split(',')[1])
    var new_loc_x = Number(this.getAttribute('grid_loc').split(',')[0])
    var new_loc_y = Number(this.getAttribute('grid_loc').split(',')[1])

    if(!roomba.classList.contains('moving')){
      clicks++
      roomba.innerHTML = clicks

      document.documentElement..........完整代码请登录后点击上方下载按钮下载查看