svg 点击事件_原生JS + SVG 小游戏

84 阅读 0 评论 56 点赞

我是靠谱客的博主俊秀鲜花，最近开发中收集的这篇文章主要介绍svg 点击事件_原生JS + SVG 小游戏，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

游戏在线地址

https://oreillymedia.github.io/Using_SVG/ch18-interaction-files/circle-click-game.svg

基本的HTML文件结构

<html>
  <body>
    <svg id="gameboard" />

    <div>
      剩余时间: <span id="timer" /> 秒
    </div>
    <div>
        得分: <span id="scoreboard"/>
    </div>

  </body>

  <script type="text/javascript">
  </script>

</html>

然后开始写javascript

1 打开页面的时候要显示50个随机颜色的小球

(function(){
    
  const width = 400,height = 300, nShapes = 50,
    gameboard = document.getElementById('gameboard'),
    svgNS = gameboard.namespaceURI;

  for(let i = 0; i < nShapes; i++){
    
    const circle = document.createElementNS(svgNS, 'circle');
    circle.setAttribu