js
关注
分享
扫一扫
Xlling
这个作者很懒，什么都没留下…
展开
-
坦克大战计划书
游戏场景单人游戏游戏主界面的尺寸我方坦克、电脑坦克、普通砖块、高级砖块图片的初始位置、大小游戏对象我方坦克用户四个方向按键前进，每次移动多大像素用户持续按键，持续时间多长，才能使得坦克连续运动坦克四个方向的转换坦克转换方向后的对齐问题，当无法精确地卡到空白处，无法前进坦克遇到障碍物停止前进电脑坦克数量：3不同的坦克有不同的运动轨迹，初始位置也不同匀速一...原创 2018-10-29 20:06:15 · 685 阅读 · 1 评论 -
练习1
10-31的练习题目描述：在canvas画布中创建一个圆保证圆匀速运动运动时长为10s, 速度是50像素/s（可变）在圆中心显示秒数题目难点平滑移动的动画效果`代码展示：<!DOCTYPE html><html lang="en"><head> <!--原创 2018-11-01 15:39:18 · 236 阅读 · 0 评论 -
坦克大战走过的坑
1、setInterval ——> requestAnimationFrame2、键盘监控事件onkeydownonkeydown事件会在用户按下一个键盘按键时发生。window.onkeydown = function(e){ // 表示键盘监听所触发的事件，同时传入参数e var e = e || window.e; console.log(e.keycode); // 输...原创 2018-11-13 09:42:41 · 322 阅读 · 0 评论 -
JS键盘监听事件：onkeydown、onkeypress、onkeyup
1、都是监听键盘的行为，但是触发的时机不一样onkeydown: 按下任意按键的时候触发的，onkeydown 触发的时候输入流正要进入系统，也就是说onkeydown事件一完，输入流就进入了系统，无法改变。所以通过onkeydown事件可以改变用户是按了哪个键；onkeypress: 按下并放开任何字母数字键时触发的，onkeypress事件是在输入流进入系统后触发的，但输入流暂未被系统处...原创 2018-11-16 19:56:39 · 2751 阅读 · 0 评论 -
requestAnimationFrame
1、requestAnimationFrame 和 setInterval编写动画最关键的步骤是：确定时间间隔。间隔过短，无法保证浏览器的渲染能力；间隔过长，无法保证动画效果平滑流畅；setInterval()方法按照指定的时间间隔（30ms）执行函数；var timer = null; timer = setInterval(function () { autoplay()...原创 2018-11-17 20:43:22 · 4152 阅读 · 0 评论 -
坦克大战的性能优化
1、requestAnimationFramehttps://mp.youkuaiyun.com/mdeditor/84192545#2、rotate网上下载的图片资源(每张4KB，尺寸60*60)： 用键盘上下左右控制坦克时，相对应的炮筒朝向也要发生改变；drawTank()的绘制过程是在raf中持续进行的，相当于每过17ms的时间就要加载一张图片，耗时严重。想到通过将初始图片旋转...原创 2018-12-08 16:03:41 · 503 阅读 · 1 评论 -
坦克大战之碰撞检测
描述问题：图1图2当我们触发onkeydown事件时，长按箭头使得黑色色块（坦克）移动到距离蓝色色块（障碍物）很近的位置，再次触发onkeydown事件时，会出现图2穿墙的现象。图3黑色色块无法继续向前。分析问题、解决问题：问题一：坦克会穿墙的问题，解决一：我们获取到黑色色块按照当前方向下一步的位置数据来判断，若可能会穿墙，就不继续执行，增加了getBox方法；问题二：...原创 2019-03-10 14:34:51 · 2534 阅读 · 0 评论