Canvas下落钢琴小游戏

最新推荐文章于 2024-07-18 10:24:18 发布

KatyLight

最新推荐文章于 2024-07-18 10:24:18 发布

阅读量2.6k

点赞数

分类专栏：游戏 Canvas 文章标签： javascript 开发语言 ecmascript canvas

本文链接：https://blog.csdn.net/qq_33014695/article/details/122474485

版权

游戏同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

Canvas

12 篇文章 0 订阅

订阅专栏

小圆圈掉落的时候，就会按键消灭圆圈。

DFJK是按键。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    body {
      padding: 0;
      margin: 0;
      background-color: black;
    }

  </style>
  <script>
    let canvas;
    let ctx;
    let score = [];
    let col = [
      {
        d: [
          0, 1
        ],
        c: 0
      },
    ]
    let sco = 0;
    let scoreSpan;
    let scoreSpan2;
    let ccc = 0;
    let sco2 = 0;
    let count=Math.floor(Math.random()*100)+10;
    window.onkeydown = function (e) {
      switch (e.keyCode) {
        case 68:
          drawClick(0);
          break;
        case 70:
          drawClick(1);
          break;
        case 74:
          drawClick(2);
          break;
        case 75:
          drawClick(3);
          break;
      }

    }
    var cm;
    var ctxm;
    let timer = [
      null, null, null, null
    ];

    function drawClick(i) {
      ctxm.beginPath();
      ctxm.arc(i * 50 + 100, 50, 20, 0, Math.PI * 2);
      ctxm.stroke();
      for (let z = 0; z < col.length; z++) {
        if (col[z].c > 720) {
          for (let x = 0; x < col[z].d.length; x++) {
            if (col[z].d[x] === i) {
              col[z].d.splice(x, 1);
              if (col[z].d.length < 1) {
                col.splice(z, 1);
              }
            }
          }
          sco++;
          scoreSpan.innerText = sco;
        }
      }
      if (timer[i] !== null) {
        clearTimeout(timer[i]);
      }
      timer[i] = setTimeout(() => {
        ctxm.clearRect(i * 50 + 78, 28, 44, 44);
      }, 10);

    }

    window.onload = () => {

      scoreSpan = document.getElementById('score')
      scoreSpan2 = document.getElementById('score2')
      canvas = document.getElementById('a');
      cm = document.getElementById('b');
      ctxm = cm.getContext('2d');
      ctx = canvas.getContext('2d');
      ctx.fillStyle = "#00FFFF55";
      ctx.strokeStyle = '#00FFFF';
      ctx.lineWidth = 2;
      ctxm.fillStyle = "#00FFFF";
      ctxm.strokeStyle = '#00FFFF';
      ctxm.lineWidth = 2;
      baseMap();
      giveScore();
      setInterval(() => {
        baseMap();
        drawDot();
        ccc++;
        if (ccc > count) {
          col.push({
            d: giveDot(),
            c: 0
          });
          ccc = 0;
        }
      }, 10);

    }

    function drawDot() {
      for (let i = 0; i < col.length; i++) {
        for (let j = 0; j < col[i].d.length; j++) {
          ctx.beginPath();
          ctx.arc(col[i].d[j] * 50 + 100, col[i].c, 20, 0, Math.PI * 2);
          ctx.fill();
        }
        col[i].c += 2;
        if (col[i].c > 810) {
          sco2 += col[i].d.length;
          scoreSpan2.innerText = sco2;
          delDot(i);
        }
      }
    }

    function delDot(i) {
      col.splice(i, 1);
    }

    function giveScore() {
      for (let i = 0; i < 100; i++) {
        score.push({
          d: giveDot(),
          c: 0
        });
      }
    }

    /**
     *
     */
    function giveDot() {
      let c = Math.floor(Math.random() * 2);
      if (c === 1) {
        let k = Math.floor(Math.random() * 4);
        let z;
        while (true) {
          z = Math.floor(Math.random() * 4);
          if (z !== k) {
            break;
          }
        }
        return [k, z];
      } else {
        let k = Math.floor(Math.random() * 4);
        return [k];
      }
    }

    function baseMap() {
      ctx.clearRect(0, 0, canvas.width, 800);
      for (let i = 0; i < 4; i++) {
        ctx.beginPath();
        ctx.moveTo(100 + i * 50, 0);
        ctx.lineTo(100 + i * 50, 800);
        ctx.stroke();
      }
      ctx.beginPath();
      ctx.moveTo(0 , 740);
      ctx.lineTo(400  , 740);
      ctx.stroke();
    }
  </script>
</head>
<body>
<div style="">
  <div style=" margin: 0 auto;width: 402px;position:relative;">
    <div style="position: absolute;right: 10px;top: 100px;font-size: 40px;color: cyan">
      <span></span><span id="score">0</span>
    </div>
    <div style="position: absolute;right: 10px;top: 150px;font-size: 40px;color: red">
      <span></span><span id="score2">0</span>
    </div>

    <canvas id="a" style=""
            width="400" height="800"></canvas>
    <canvas id="b" style=" border-top: 2px solid cyan;background-color: rgba(0,255,255,0.17) " width="400" height="100"></canvas>

  </div>

</div>
</body>
</html>

KatyLight

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Canvas下落钢琴小游戏

小圆圈掉落的时候，就会按键消灭圆圈。DFJK是按键。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body { padding: 0; margin: 0; background-color: black; }..
复制链接

扫一扫