Canvas打飞机游戏

于 2022-01-14 10:36:57 发布
阅读量105 收藏
点赞数
分类专栏： Canvas 游戏 文章标签： 游戏 html5 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33014695/article/details/122489005
版权

 打飞机.html

<!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 ship = {
      p: {
        x: 500,
        y: 800
      }

    }
    var balls = []
    var enemy = []
    let getEn
    var game
    let las = false
    var lasT = null
    window.onload = () => {
      c = document.getElementById('c')
      ctx = c.getContext('2d')

      ctx.strokeStyle = '#00FFFF'
      ctx.fillStyle = '#00FFFF'

      let getEn = getEnemy()
      game = setInterval(() => {
        ctx.clearRect(0, 0, c.width, c.height)
        drawShip()
        drawAttack()
        getEn()
        drawEnemy()
        killEnemy()
        killYou()
        if (las) {
          laser()
        }
      }, 1)
    }

    function drawShip() {
      ctx.fillStyle = '#00FFFF'
      ctx.beginPath()
      ctx.arc(ship.p.x, ship.p.y, 20, 0, Math.PI * 2)
      ctx.stroke()
      ctx.closePath()
    }

    function laser() {
      ctx.fillStyle = '#00FFFF55'
      ctx.beginPath()
      ctx.rect(ship.p.x - 10, 0, 20, ship.p.y - 10)
      ctx.fill()
      ctx.fillStyle = '#00FFFF'
      ctx.beginPath()
      ctx.rect(ship.p.x - 3, 0, 6, ship.p.y - 3)
      ctx.fill()
      ctx.closePath()
    }

    function attack() {
      ballAttack();

    }

    function ballAttack() {
      balls.push({
        p: {
          x: ship.p.x,
          y: ship.p.y
        }
      })
      balls.push({
        p: {
          x: ship.p.x - 20,
          y: ship.p.y + 20
        }
      })
      balls.push({
        p: {
          x: ship.p.x + 20,
          y: ship.p.y + 20
        }
      })
    }

    function getEnemy() {
      let j = 0
      let k = Math.floor(Math.random() * 50 + 10)
      return function() {
        j++
        if (j === k) {
          j = 0
          k = Math.floor(Math.random() * 50 + 10)
          enemy.push({
            p: {
              x: Math.floor(Math.random() * 900),
              y: 0
            },
            heal: Math.floor(Math.random() * 20 + 5),
            size: Math.floor(Math.random() * 50 + 10),
            boss:Math.random()>0.5
          })
        }
      }
    }

    function killEnemy() {
      for (let i = 0; i < enemy.length; i++) {
        for (let j = 0; j < balls.length; j++) {
          let a = Math.abs(enemy[i].p.x - balls[j].p.x)
          let b = Math.abs(enemy[i].p.y - balls[j].p.y)
          let c = enemy[i].size / 2 + 5
          if (a < c && b < c) {
            enemy[i].heal--
            balls.splice(j, 1)
            if (enemy[i].heal < 0) {
              enemy.splice(i, 1)
            }
            break
          }

        }

      }
      if (las&&!lasT) {
        lasT = setTimeout(() => {
          clearTimeout(lasT)
          lasT = null
        }, 10)
        for (let i = 0; i < enemy.length; i++) {
          let a = Math.abs(enemy[i].p.x - ship.p.x)
          let b = Math.abs(enemy[i].p.y - ship.p.y)
          let c = enemy[i].size / 2 + 10
          if (a < c && enemy[i].p.y < ship.p.y) {
            enemy[i].heal--
            if (enemy[i].heal < 0) {
              enemy.splice(i, 1)
            }
          }

        }

      }
    }

    function killYou() {
      for (let i = 0; i < enemy.length; i++) {
        let a = Math.abs(enemy[i].p.x - ship.p.x)
        let b = Math.abs(enemy[i].p.y - ship.p.y)
        let c = enemy[i].size / 2
        if (a < c && b < c) {
          alert('you died!!!')
          clearInterval(game)
          break
        }
      }
    }

    //enemy
    function drawAttack() {
      ctx.fillStyle = '#00FFFF'
      for (let i = 0; i < balls.length; i++) {
        ctx.beginPath()
        ctx.arc(balls[i].p.x, balls[i].p.y, 2, 0, Math.PI * 2)
        ctx.fill()
        ctx.closePath()
        balls[i].p.y -= 10
        if (balls[i].p.y < -10) {
          balls.splice(i, 1)
        }
      }
    }

    function drawEnemy() {

      for (let i = 0; i < enemy.length; i++) {
        if(enemy[i].boss){
          ctx.fillStyle = '#FF000099'
        }else{
          ctx.fillStyle = '#00FFFF99'
        }
        ctx.beginPath();
        ctx.rect(enemy[i].p.x - enemy[i].size / 2, enemy[i].p.y - enemy[i].size / 2, enemy[i].size, enemy[i].size);
        ctx.fill();
        ctx.closePath();
        enemy[i].p.y += 1;
 
        if (enemy[i].p.y > 900+ enemy[i].size / 2) {
          enemy.splice(i, 1)
        }
      }
    }
    function openLaser(){
      las = true;
    }
    function closeLaser(){
      las = false;
    }
    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 (ship.p.y > -10) {
            ship.p.y -= 10
          }

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

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

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

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

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

          leftTimer = setInterval(() => {
            if (ship.p.x > -10) {
              ship.p.x -= 10
            }
          }, 10)
          break
        case 90:

          if (attackTimer !== null) {
            return
          }
          attack()
           attackTimer = setInterval(() => {
            attack()
          }, 10)

          break
        case 88:

          openLaser();

          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
        case 90:
          clearInterval(attackTimer)
          attackTimer = null

          break
        case 88:

          closeLaser();

          break
      }

    }
  </script>

</head>
<body>
<canvas id="c" width="900" height="900" style="border: 1px solid white;"></canvas>
</body>
</html>

KatyLight
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
打飞机html + js + canvas
Vivian_shuang的博客
08-09 2700
loading.js文件 // 三个参数： // 1. 所有要加载的图片对象 // 2.加载进度函数 // 3.加载完成函数 function loading(imgsObj, handleObj) { // 遍历对象，得到对象中属性的个数，即有多少张图片 var count = 0; var currentIndex = 0; for(prop in imgsObj)
利用HTML5 Canvas制作一个简单的打飞机游戏
12-13
之前在当耐特的DEMO里看到个打飞机的游戏，然后就把他的图片和音频扒了了下来。。。。自己凭着玩的心情重新写了一个。仅供娱乐哈。。。。。。我没有用框架，所有js都是自己写的。。。。。。所以就可以来当个简单的教程，对那些刚玩canvas的，或许能有些帮助，楼主玩canvas也不是很久，技术不是很好，请见谅哈。 　　闲话不多说，先上DEMO撒：飞机游戏   楼主写这个人纯碎娱乐，没想着写成多正式的游戏哈。 　　步入主题啦：打飞机游戏文件有index.html入口文件，allSprite.js精灵的逻辑处理文件，loading.js加载处理文件以及data.js（初始化的一些数据）。 　　首先，正常的
用canvas整个打飞机游戏
wubaohu1314的博客
09-10 253
　之前在当耐特的DEMO里看到个打飞机的游戏，然后就把他的图片和音频扒了了下来。。。。自己凭着玩的心情重新写了一个。仅供娱乐哈。。。。。。我没有用框架，所有js都是自己写的。。。。。。所以就可以来当个简单的教程，对那些刚玩canvas的，或许能有些帮助，楼主玩canvas也不是很久，技术不是很好，请见谅哈。 　　闲话不多说，先上DEMO撒：飞机游戏 楼主写这个人纯碎娱乐，没想着写成多正式的游戏哈。 　　步入主题啦：打飞机游戏文件有index.html入口文件，allSprite.js精灵的逻辑...
canvas 打飞机游戏
06-29
《canvas技术在“打飞机”游戏中的应用》 在当今的网页开发中，HTML5的canvas元素成为了一项重要的技术，它为开发者提供了一个在浏览器上进行2D绘图的平台，无需借助任何插件。"打飞机"游戏，这款经典的休闲游戏，...
canvas打飞机游戏_打飞机_
10-02
【标题】"canvas打飞机游戏" 是一个基于JavaScript和HTML5 Canvas API开发的简单小游戏，它利用了Web技术来实现经典的“打飞机”玩法。在Web浏览器中运行，无需额外的插件或软件，用户可以直接在网页上体验游戏的...
canvas 飞机大战小游戏
01-19
在“飞机大战”游戏中，飞机、子弹、敌机以及背景等元素都需要借助Canvas API来绘制和更新。 JavaScript作为客户端脚本语言，是实现游戏逻辑的核心。在“飞机大战”中，JavaScript负责处理游戏状态的更新、碰撞检测...
canvas实现飞机打怪兽射击小游戏的示例代码
09-22
在这个示例中，我们将会了解到如何使用HTML5的Canvas元素来实现一个简单的飞机打怪兽射击游戏。Canvas是一个HTML5元素，它允许我们在网页上直接绘制图形。这个技术被广泛用于创建动画效果和游戏。 首先，游戏的主要...
HTML5 Canvas射箭小游戏
06-24
7. **响应式设计**：考虑到游戏可能在不同尺寸的设备上运行，良好的响应式设计能确保游戏在手机和平板电脑上也能正常运行。这可能需要利用CSS媒体查询来调整布局。 8. **性能优化**：由于Canvas的实时渲染特性，...
使用canvas画布制作的飞机大战
07-28
使用canvas画布制作的飞机大战，比较简单的小游戏，适合用来了解画布,文件夹内包含项目的所有源码。 canvas 最早由Apple引入WebKit,用于Mac OS X 的 Dashboard,后来又在Safari和Google Chrome被实现。 基于 Gecko 1.8的浏览器,比如 Firefox 1.5, 同样支持这个元素。 <canvas> 元素是WhatWG Web applications 1.0规范的一部分,也包含于HTML 5中。
html5 canvas技术实现飞机大战小游戏
02-26
html5 canvas技术实现飞机大战小游戏
基于jquery和canvas的网页打飞机小游戏
09-02
基于jquery和canvas的网页打飞机小游戏，需要用鼠标进行操作，游戏难度有点大，从来没有超过50分。。。
H5 打飞机小游戏 webpack+html+css+ES6+canvas
05-04
飞机大作战，打飞机。 H5 打飞机小游戏，相关技术webpack+html+css+ES6+canvas。 涉及了面向对象、继承的概念 移动端兼容（如ios音频问题） 资源预加载和HTML5标签 audio 的使用
canvas飞机大战，代码有详细注释
weixin_50813125的博客
10-02 490
先上代码，详解之后补上，欢迎评论指正交流 图片资源已上传 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sca
web 基于jquery和canvas的打飞机小游戏
lakebobo的博客
09-02 1583
简易的 利用canvas 实现打飞机 h5里的canvas应该是很强大的，能做的东西很多，因为也是刚接触，所以，尝试用canvas实现了一个简易的网页打飞机小游戏。本来想用一下worker工作线程，但是一下也没想到很好的方案，而且，本来js也没有多线程的概念，因为js是单线程的。 canvas基本的api我前面的博客也介绍了，有这些基本api方法已经可以做很多事情了。 今天我们就来实...
【猪猪-前端】微信打飞机高质量Demo，学习HTML5+Canvas技术编写，下载即可使用，注释齐全。
springmvc_springdata的专栏
06-15 2485
【猪猪-前端】微信打飞机高质量Demo，学习HTML5+Canvas技术编写，下载即可使用，注释齐全。 源代码下载地址：http://www.zuidaima.com/share/1553027668610048.htm
飞机大作战，打飞机。 H5 打飞机小游戏，相关技术webpack+html+css+ES6+canvas。
05-09
飞机大作战，打飞机。 H5 打飞机小游戏，相关技术webpack+html+css+ES6+canvas。 涉及了面向对象、继承的概念 移动端兼容（如ios音频问题） 资源预加载和HTML5标签 audio 的使用
HTML5游戏开发：Canvas技术深度解析
"本文主要探讨HTML5在游戏开发中的应用，作者魏子钧分享了从HTML4简单动画到HTML5 Canvas的转变，阐述了Canvas如何为游戏开发带来更丰富的可能性。" HTML5作为现代网页技术的重要组成部分，尤其在游戏开发领域展现...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值