gsap实现点状机器人吃星星游戏代码-html代码-BFW代码库

gsap实现点状机器人吃星星游戏代码

代码语言：html

所属分类：游戏

代码描述：gsap实现点状机器人吃星星游戏代码，按住键盘上下左右键吃掉星星闯关升级。

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


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

<head>

  <meta charset="UTF-8">
  

  
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');

html, body {
  width:100%;
  height:100%;
  overflow:hidden;
  display: flex;
  flex-direction:column;
  align-items: center;
  justify-content: center;
  background:#000;
  font-family: 'Roboto', sans-serif;
  font-weight:900;
  font-size:12px;
}

#game {
  width:80%;
  height:80%;
  overflow:visible;
}
</style>


</head>

<body  >
  <svg id="game" viewBox="0 0 100 100" style="opacity:0">
  <g id="grid" fill="#fff"></g>
  <g id="bot" stroke="#fff">
<!--     <path d="M5,2L5,-2"/>
    <circle cx="5" cy="-2" r="0.7"/> -->
    <rect x="-0.5
" y="4" width="11" height="2" rx="0.5"/>
    <rect x="1
" y="1" width="8" height="8" rx="2"/>
    <circle cx="4" cy="4" r="1" />
    <circle cx="6" cy="4" r="1" />
    <path class="mouth" d="M3,6.8L4,6.8L6,6.8L7,6.8" fill="none" />
  </g>
  <g class="stars" stroke="#fff">
    <defs>
      <path id="star" d="M5,2L6,4L8,4.5L6.5,6L7,8L5,7L3,8L3.5,6L2,4.5L4,4z" />
    </defs>
    <use id="star1" href="#star"/>
    <use id="star2" href="#star"/>
    <use id="star3" href="#star"/>
  </g>
  <text fill="#fff" text-anchor="middle" x="50" y="55">LEVEL 1</text>
</svg>
<svg id="controls" viewBox="0 0 100 30" stroke="#fff" stroke-width="0.5">
  <rect id="up" x="65" y="1" width="12" height="12" rx="3"/>
  <rect id="down" x="65" y="17" width="12" height="12" rx="3"/>
  <rect id="left" x="50" y="9" width="12" height="12" rx="3"/>
  <rect id="right" x="80" y="9" width="12" height="12" rx="3"/>
  <g class="markers">
    <use href="#star" x="10" y="9"/>
    <use href="#star" x="20" y="9"/>
    <use href="#star" x="30" y="9"/>
  </g>
</svg>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.8.0.js"></script>
      <script >
const grid = document.querySelector('#grid')
const up = document.querySelector('#up')
const down = document.querySelector('#down')
const left = document.querySelector('#left')
const right = document.querySelector('#right')
let botPos = {x:0, y:0, i:0}
let starPos1 = {x:0, y:0}
let starPos2 = {x:0, y:0}
let starPos3 = {x:0, y:0}
let nStars = 0
let level = 1

for (let row=0; row<10; row++){
  for (let .........完整代码请登录后点击上方下载按钮下载查看