挤痘痘游戏

by ApexPirate74

113 lines2.1 KB

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>挤痘痘游戏</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{margin:0;padding:0;box-sizing:border-box;}
body{
  background:#ffd6e0;
  font-family:Arial;
  user-select:none;
}
#game{
  width:100vw;
  height:100vh;
  position:relative;
  overflow:hidden;
}
.skin{
  width:300px;
  height:400px;
  background:#f2c4b4;
  border-radius:12px;
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  box-shadow:0 10px 30px #0003;
}
.pimple{
  width:30px;
  height:30px;
  background:#ff4466;
  border-radius:50%;
  position:absolute;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  color:#fff;
  font-weight:bold;
}
.pop{
  animation:pop 0.3s ease-out forwards;
}
@keyframes pop{
  0%{transform:scale(1);opacity:1;}
  50%{transform:scale(1.3);}
  100%{transform:scale(0);opacity:0;}
}
#score{
  position:absolute;
  top:20px; left:20px;
  font-size:24px;
  color:#333;
}
#tip{
  position:absolute;
  bottom:20px; left:50%;
  transform:translateX(-50%);
  font-size:16px;
  color:#666;
}
</style>
</head>
<body>
<div id="game">
  <div id="score">分数：0</div>
  <div class="skin" id="skin"></div>
  <div id="tip">点痘痘挤掉，全部挤完过关</div>
</div>

<script>
let score=0;
let count=0;
const skin=document.getElementById('skin');
const total=8;

function makePimple(){
  for(let i=0;i<total;i++){
    let p=document.createElement('div');
    p.className='pimple';
    p.style.left=Math.random()*260+'px';
    p.style.top=Math.random()*360+'px';
    p.textContent='●';
    p.addEventListener('click',popPimple);
    skin.appendChild(p);
    count++;
  }
}

function popPimple(e){
  let p=e.target;
  if(p.classList.contains('pop'))return;
  p.classList.add('pop');
  score++;
  document.getElementById('score').textContent='分数：'+score;
  count--;
  if(navigator.vibrate)navigator.vibrate(50);
  if(count<=0){
    setTimeout(()=>{
      alert('恭喜过关！');
      skin.innerHTML='';
      makePimple();
    },500);
  }
}

makePimple();
</script>
</body>
</html>

Game Source: 挤痘痘游戏

Creator: ApexPirate74

Libraries: none

Complexity: moderate (113 lines, 2.1 KB)

The full source code is displayed above on this page.

Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: game-apexpirate74" to link back to the original. Then publish at arcadelab.ai/publish.