富贵资源网 Design By www.hznty.com
免责声明
不是打算教 canvas，只是觉得好玩就简单看了一下。
意思就是做得略粗糙，别喷我。。
效果
帧数略低，实际当然流畅得多。
实现 HTML
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style>
* {margin: 0;padding: 0;}
body {background-color: lightblue;}
#canvas {background-color: black;width: 100vw;}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>/* 见下 */</script>
</body>
JS
window.onload = function () {
let
// 画布
ctx = document.getElementById('canvas').getContext('2d'),
// 画布大小
canvas_width = document.getElementById('canvas').width,
canvas_height = document.getElementById('canvas').height,
// DVD 图标的文本颜色、字体、背景色
text_color = ['green', 'blue', 'purple', 'yellow', 'white', 'yellow', 'white'],
text_font = 'italic bold 50px yahei',
background_color = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'],
// 背景矩形的尺寸
background_width = 110,
background_height = 50,
// 向矩形添加文本时，高度有点偏差
fix_height = 7,
// 速度，每次重绘移动 0.5 px
speed_x = 0.5,
speed_y = 0.5,
// 移动方向，初始为 'r-b' 右下
direction = 'r-b',
// 图标 x 和 y 坐标，初始为 0
position_x = 0,
position_y = 0,
// 碰撞次数，用来计算背景和文本颜色
count = 0
dvd()
function dvd() {
// 移动方向
switch (direction) {
// 右下
case 'r-b':
position_x += speed_x
position_y += speed_y
break
// 右上
case 'r-t':
position_x += speed_x
position_y -= speed_y
break
// 左下
case 'l-b':
position_x -= speed_x
position_y += speed_y
break
// 左上
case 'l-t':
position_x -= speed_x
position_y -= speed_y
break
}
// 清空画布
ctx.clearRect(0, 0, canvas_width, canvas_height)
// 重绘
ctx.fillRect(position_x, position_y, background_width, background_height)
// 碰撞检测
// 底
if (position_y + background_height >= canvas_height) {
direction = direction.replace('b', 't')
// 碰撞次数统计
count += 1
}
// 右
if (position_x + background_width >= canvas_width) {
direction = direction.replace('r', 'l')
count += 1
}
// 左
if (position_x < 0) {
direction = direction.replace('l', 'r')
count += 1
}
// 上
if (position_y < 0) {
direction = direction.replace('t', 'b')
count += 1
}
// 文本
ctx.font = text_font
ctx.fillStyle = text_color[count % 7]
ctx.fillText("DVD", position_x, position_y + background_height - fix_height)
// 背景色
ctx.fillStyle = background_color[count % 7]
// 开始动画
window.requestAnimationFrame(dvd)
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
富贵资源网 Design By www.hznty.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
富贵资源网 Design By www.hznty.com
暂无评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。