Canvas游戏下百层

最新推荐文章于 2024-05-16 02:28:14 发布

KatyLight

最新推荐文章于 2024-05-16 02:28:14 发布

阅读量2.7k

点赞数

分类专栏： Canvas 游戏文章标签： javascript canvas 游戏

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

版权

Canvas 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

游戏

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    body {
      background-color: black;
      padding: 0;
      margin: 0;
    }
  </style>
  <script>
    let c, ctx, ctx2
    var hero = {
      p: {
        x: 500,
        y: 10
      }

    }
    var land = []
    var enemy = []
    let getEn
    var game
    let las = false
    var lasT = null
    var score=0;
    var scoreSpan
    window.onload = () => {
      c = document.getElementById('c')
      ctx = c.getContext('2d')
      ctx.strokeStyle = '#00FFFF'
      scoreSpan=document.getElementById('score');
      ctx.lineWidth=3
      let ccc=getLands();
      game = setInterval(() => {
        ctx.clearRect(0, 0, c.width, c.height);
        drawHero();
        ccc();
        drawLand();
      }, 1)
    }
    function getLands() {
      let j = 0
      let k = Math.floor(Math.random() * 100 + 100)
      return function() {
        j++
        if (j === k) {
          j = 0
          k = Math.floor(Math.random() * 100 + 50)
          randomLand();
        }
      }
    }

    function scoreAdd(){
      score++;
      scoreSpan.innerText=score;
    }
    function randomLand(){
      land.push({
        p:{
          x:Math.floor(Math.random()*700),
          y:900
        },
        d:Math.random()*3<1
      })
    }
    function drawHero() {

      if(hero.p.y<-30){
        clearInterval(game);
        alert('你被天花板弄死了')
        return;
      }
      let down=true;
      for(let i=0;i<land.length;i++){
        if(Math.abs(land[i].p.y-hero.p.y)<10&&(hero.p.x>land[i].p.x?hero.p.x-land[i].p.x<200:land[i].p.x-hero.p.x<20)){
          hero.p.y=land[i].p.y;

          if(land[i].d){
            clearInterval(game);
            alert('你被扎死了')
          }
          down=false;
          break;
        }
      }
      if(down){
         hero.p.y+=1;
         if(hero.p.y>950){
           clearInterval(game);
           alert('你摔死了')
         }

      }
      ctx.beginPath();
      ctx.arc(hero.p.x, hero.p.y, 20, 0, Math.PI * 2);
      ctx.stroke();
      ctx.closePath();
    }
    function drawLand(){
      for(let i=0;i<land.length;i++){
        if(land[i].d){
          ctx.fillStyle = '#FF0000';
        }else{
          ctx.fillStyle = '#00FFFF';
        }

        ctx.beginPath();
        ctx.rect(land[i].p.x,land[i].p.y,200,10);
        ctx.fill();
        ctx.closePath();
        land[i].p.y-=1;
        if(land[i].p.y<-40){
          land.splice(i,1);
          scoreAdd();
        }
      }


    }



    let upTimer = null
    let leftTimer = null
    let rightTimer = null
    let downTimer = null
    let attackTimer = null
    window.onkeydown = function(e) {
       switch (e.keyCode) {
/*        case 38:
          if (upTimer !== null) {
            return
          }
          if (hero.p.y > -10) {
            hero.p.y -= 10
          }

          upTimer = setInterval(() => {
            if (hero.p.y > -10) {
              hero.p.y -= 10
            }
          }, 10)
          break*/
        case 39:

          if (rightTimer !== null) {
            return
          }
          if (hero.p.x < 910) {
            hero.p.x += 10
          }

          rightTimer = setInterval(() => {
            if (hero.p.x < 910) {
              hero.p.x += 10
            }
          }, 10)
          break
/*        case 40:

          if (downTimer !== null) {
            return
          }
          if (hero.p.y < 910) {
            hero.p.y += 10
          }
          downTimer = setInterval(() => {
            if (hero.p.y < 910) {
              hero.p.y += 10
            }
          }, 10)
          break*/
        case 37:

          if (leftTimer !== null) {
            return
          }
          if (hero.p.x > -10) {
            hero.p.x -= 10
          }

          leftTimer = setInterval(() => {
            if (hero.p.x > -10) {
              hero.p.x -= 10
            }
          }, 10)
          break

      }

    }
    window.onkeyup = function(e) {
      switch (e.keyCode) {
      /*  case 38:
          clearInterval(upTimer)
          upTimer = null
          break*/
        case 39:
          clearInterval(rightTimer)
          rightTimer = null
          break
       /* case 40:
          clearInterval(downTimer)
          downTimer = null

          break*/
        case 37:
          clearInterval(leftTimer)
          leftTimer = null
          break

      }

    }
  </script>

</head>
<body>
<div style="position: relative;margin: 20px auto;width: 1000px;">
  <div style="position: absolute;right: 10px;top: 100px;font-size: 40px;color: cyan">
    <span></span><span id="score">0</span>
  </div>
  <canvas id="c" width="900" height="900" style="border: 1px solid white;"></canvas>
</div>
</body>
</html>

代码

KatyLight

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Canvas游戏下百层

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

扫一扫