H5 Canvas 打飞机青春版

没事儿写写练习一下，说不准哪天就用到今天所用到的知识点了呢。

在线链接

https://linyisonger.github.io/H5.Examples/?name=./053.%E9%A3%9E%E6%9C%BA%E5%A4%A7%E6%88%98.html

功能清单

• 循环滚动背景
• 矩形碰撞
• 随机生成敌人
• 飞机左右移动
• 苹果屏蔽长按
• 移动端屏幕自适应

效果预览

代码

循环滚动背景

这里仅做了三张图片循环滚动，比较简略，如果出现较长屏幕尺寸会出现bug。
当前滚动高度 % 图片高度 ± 图片高度

// 滚动背景
function scrollingBackgrounds() {
    gameBackgroundScrollingY += gameBackgroundScrollingSpeed;
    let gameBackgroundHeight = gameBackground.height;
    ctx.drawImage(gameBackground, 0, gameBackgroundScrollingY % gameBackgroundHeight - gameBackgroundHeight)
    ctx.drawImage(gameBackground, 0, gameBackgroundScrollingY % gameBackgroundHeight)
    ctx.drawImage(gameBackground, 0, gameBackgroundScrollingY % gameBackgroundHeight + gameBackgroundHeight)
}

矩形碰撞

仅仅做了矩形碰撞而且不带角度的矩形。

// 判断两矩形是否重叠
function isRectOverlap(rect1, rect2) {
    if (!rect1) return false
    if (!rect2) return false
    if (rect1.x + rect1.w < rect2.x) return false
    if (rect1.y + rect1.h < rect2.y) return false;
    if (rect2.x + rect2.w < rect1.x) return false
    if (rect2.y + rect2.h < rect1.y) return false;
    return true
}

苹果屏蔽长按

* {
    -webkit-touch-callout: none;
}

body {
    height: 100vh;
    width: 100vw;

    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

// 禁止长按浮窗
canvas.addEventListener("contextmenu", (e) => {
    e.preventDefault()
})

移动端屏幕自适应

// 引用之前写好的包中的js文件 图片展示长边
import { aspectFit } from "https://unpkg.com/@3r/tool/lib/picture.js";

// 展示长边
let aspectFitRes = aspectFit(gameBackground.width, gameBackground.height, document.body.clientWidth, document.body.clientHeight)
config.width = aspectFitRes.width;
config.height = Math.max(aspectFitRes.height, document.body.clientHeight) 
canvas.setAttribute('width', config.width);
canvas.setAttribute('height', config.height);

剩下的功能点比较依赖上下文内容

源码地址

https://github.com/linyisonger/H5.Examples