最新消息:欢迎访问Android开发中文站!商务联系微信:loading_in

favicon摸鱼工具开发0.2版本

热点资讯 loading 168浏览 0评论

前几天没啥事,写了一个favicon看视频的工具,挺多小老弟喜欢, 我就又更新了几个功能,写个完整版教程把,代码放github了 github.com/shengxinjin…

新增功能

  1. 视频进度条,上下左右控制视频音量和前进后退
  2. 摄像头直播,新增了简单的怀旧滤镜
  3. 贪食蛇小游戏
    先看效果把



原理很简单,favicon上可放一个32*32的图片,我们动态修改这个图,就可以实现放视频,看摄像头和小游戏的功能,直接看下完整版代码把

放视频

视频功能见上个文章 juejin.im/post/5e8605…

音量和视频控制

document监听键盘事件,针对上下左右做不同的处理

const DIRECTION = {
    37:'left',
    // 上
    38:'up',
    // 右
    39:'right',
    // 下
    40:'down',
}
复制代码
const directions = {
  left: ()=> this.video.currentTime-=5,
  right: ()=> this.video.currentTime+=5,
  up: ()=> this.video.volume+=0.1,
  down: ()=> this.video.volume-=0.1,
}
document.onkeydown = (event)=> {
  // 左上右下 37 38 39 40
  let key = event.keyCode
  if(key in DIRECTION){
    directions[DIRECTION[key]]()
  }
}
复制代码

搞定

视频进度条

根据currentTime和duration 可以得到视频的播放事件和总时长

再根据这边文章Animating URLs with Javascript and Emojis的启发,用emoji做个图形进度条

    formatTime(second){
        const m = Math.floor(second/60) + ''
        const s = parseInt(second%60) + ''
        return m.padStart(2,'0')+":"+s.padStart(2,'0')
    }
    showProgress(){
        const current = this.video.currentTime
        const total = this.video.duration
        const per = Math.floor((current/total)*4)
        console.log((current/total).toFixed(2))
        const p = ['', '', '', '', ''][per]
        document.title = `${p}${this.formatTime(current)}/${this.formatTime(total)}`
    }
复制代码

效果

 


 

摄像头

用webrtc实现很简单,好像没啥鸟用的功能,纯属娱乐 可以监控身后有没有老板 后续考虑看看加个人脸识别,识别老板 或者自己笑得过于开心,都发个提醒

let video = document.createElement('video')
video.width=this.width
video.autoplay="autoplay"
document.body.appendChild(video)
this.video = video
const mediaStream =  await navigator.mediaDevices.getUserMedia({video:true}) // webrtc
this.video.srcObject = mediaStream

this.video.addEventListener('timeupdate',()=>{
  this.videoToImageByFilter()
},false)
复制代码

 


 

滤镜

如果你用这个来直播,虽然小了点,但是也可以考虑加一个滤镜,原理也很简单,canvas获取图片像素颜色值,对需要的滤镜,找到公式设置一下就行,比如灰色滤镜,计算获取单位元素的RBG然后取平均值 然后复制给自身得到灰色的图像

const context = this.canvas.getContext('2d')
context.clearRect(0, 0, this.SIDE, this.SIDE)
context.drawImage(this.video, 0, 0, this.SIDE, this.SIDE)

//获取ImageData的属性:width,height,data(包含 R G B A 四个值);
var imgdata = context.getImageData(0,0,this.SIDE,this.SIDE)

for(var i=0;i<imgdata.data.length;i += 4){
  // 灰色滤镜
  // 计算获取单位元素的RBG然后取平均值 然后复制给自身得到灰色的图像
  var avg =  (imgdata.data[i]+ imgdata.data[i+1]+ imgdata.data[i+2])/3
  imgdata.data[i] = imgdata.data[i+1] =imgdata.data[i+2] =avg   
}

this.canvasFilter.getContext('2d').putImageData(imgdata,0,0);
setFavico(this.canvasFilter)
复制代码

 


 

怀旧滤镜公式

 

img

 

代码呼之欲出,不要问逻辑,问就是抄公式,很多滤镜的公式baidu都可以搜到,比如卡通,熔炉,黑白等等

// 怀旧滤镜
const context = this.canvas.getContext('2d')
context.clearRect(0, 0, this.SIDE, this.SIDE)
context.drawImage(this.video, 0, 0, this.SIDE, this.SIDE)

//获取ImageData的属性:width,height,data(包含 R G B A 四个值);
var imgdata = context.getImageData(0,0,this.SIDE,this.SIDE)
for(var i = 0; i < imgdata.height * imgdata.width; i++) {
  var r = imgdata.data[i*4],
      g = imgdata.data[i*4+1],
      b = imgdata.data[i*4+2];

  var newR = (0.393 * r + 0.769 * g + 0.189 * b);
  var newG = (0.349 * r + 0.686 * g + 0.168 * b);
  var newB = (0.272 * r + 0.534 * g + 0.131 * b);
  var rgbArr = [newR, newG, newB].map((e) => {
    return e < 0 ? 0 : e > 255 ? 255 : e;
  });
  [imgdata.data[i*4], imgdata.data[i*4+1], imgdata.data[i*4+2]] = rgbArr;
}
this.canvasFilter.getContext('2d').putImageData(imgdata,0,0);
setFavico(this.canvasFilter)
复制代码

 


 

看到favicon中略显忧郁的我,感觉回到了杀马特的青春岁月,可惜现在发量不行了

贪食蛇

其实32*32像素,还是可以实现很多有意思的功能,1px变量后,还有30px可以发挥,基本边长是2和3像素的点课件, 我们最多可以有15的边长可以发挥,比如贪食蛇,俄罗斯方块,有兴趣的可以挑战坦克大战,推箱子

话不多说,先写代码,贪食蛇原理就是canvas里坐游戏,然后渲染favicon,新建一个类

class Snake {
	constructor(){
        // 15*15
        this.SIDE = 32 // favcion边长32px
        this.LINE_WIDTH = 1 // 1px
        this.SIZE = 3 // 一个数据点的像素值
        this.WIDTH =10 // 游戏空间是10个  (32-2)/3

        this.initCanvas()
    }
	initCanvas(){
		this.canvas = document.createElement('canvas')
        this.canvas.width = this.canvas.height = this.SIDE
    }
	initGrid(){
		this.grid = []
		while(this.grid.length<this.WIDTH){
			this.grid.push(new Array(this.WIDTH).fill(0))
		}
	}
}
复制代码

初始化

新建好网格后,我们规定0是初始值,小蛇占的位置,就是1,食物是2

小蛇初始长度是3,在左侧居中,

// 初始化小蛇蛇
initSnake(){
  this.snake = []

  // 初始值长度是3 处置位置在左侧中间
  let y = 4
  let x = 0
  let snakeLength = 3
  while(snakeLength>0){
    this.snake.push({x:x,y:y})
    this.grid[y][x] = '1'
    snakeLength--
    x++
  }
  // 小蛇的初始方向是右边
  this.current = this.directions.right
}
复制代码

我们console.table一下this.grid

 


bingo 

渲染网格

我们需要把网格渲染到canvas里 先把canvas放在body里,方便调试 方法和很粗暴,只是个玩具,就不考虑渲染的优化了,直接遍历网格,每次都重新渲染即可


initCanvas(){
	this.canvas = document.createElement('canvas')
    this.canvas.width = this.canvas.height = this.SIDE
    document.body.appendChild(this.canvas)
}

drawCanvas(){
	// 32*32 四周变量1px,所以中间是30*30, 用15*15的格子,每个格子2px
    var context = this.canvas.getContext('2d')  //getContext() 方法可返回一个对象  
    context.clearRect(0,0,this.SIDE,this.SIDE)
    context.strokeStyle = 'green'
    context.lineWidth = this.LINE_WIDTH
  	context.fillStyle = "red"  // 设置或返回用于填充绘画的颜色、渐变或模式              
	context.strokeRect(0, 0, this.SIDE, this.SIDE)

	this.grid.forEach((row,y)=>{
		row.forEach((g,x)=>{
			if(g!==0){
				// 食物或者是蛇
				context.fillRect(this.LINE_WIDTH+x*this.SIZE,this.LINE_WIDTH+y*this.SIZE,this.SIZE,this.SIZE)  // x轴 y轴 宽 和 高 ,绘制“被填充”的矩形  

			}
		})
    })
    setFavico(this.canvas)
}
复制代码

看下效果

 


 

小蛇出来了 yeah

放食物

这个没啥说的,随机一个坐标,然后位置落在小蛇上,就重新随机,否则就设置成2 画出来也用红色 然后直接把canvas截个图,放在favicon上就可以

// 放吃的
setFood(){
	while(true){
		const x = Math.floor(Math.random()* this.WIDTH)
		const y = Math.floor(Math.random()* this.WIDTH)
		if(this.grid[y][x]=='1'){
			continue
		}else{
			//食物是2
			this.grid[y][x]='2'
			break
		}
	}
}

复制代码

 


 

移动

有上下左右四个方向可以移动,这里偷个懒 单纯的根据方向和蛇头的位置,判断下一个蛇头在的点,然后根据是否吃掉食物,决定尾巴是不是掐掉一个尖即可,比较简单

  1. 下一个蛇头在的位置,如果超出网格,或者是小蛇自己,游戏结束,统计分数放在localstorage里
  2. setInterval定时移动就可以,根据方向
this.directions = {
	// 左
	'left':{x:-1,y:0},
	// 上
	'up':{x:0,y:-1},
	// 右
	'right':{x:1,y:0},
	// 下
	'down':{x:0,y:1},
}

复制代码
move(){	
	// 1. 根据方向,计算出下一个蛇头所在位置
	// 蛇头设为
	const head = this.snake[this.snake.length-1]
	const tail = this.snake[0]
	const nextX = head.x+this.current.x
	const nextY = head.y+this.current.y

	// 2. 判断蛇头是不是出界  是不是碰见自己个了 如果是屁股尖就碰不到
    const isOut = nextX<0||nextX>=this.WIDTH||nextY<0||nextY>=this.WIDTH
    if(isOut){
        this.initGame()
		return 
    }

	const isSelf = (this.grid[nextY][nextX]) =='1' && !(nextX === tail.x && nextY === tail.y)

	if(isSelf){
        this.initGame()
		return 
	}

    const isFood = this.grid[nextY][nextX]=='2' // 食物是2
    if(!isFood){
        // 所谓蛇向前走,就是把尾巴去掉, 新增nextX和Y
        // 去尾巴 有食物的时候不用去尾
        this.snake.shift()
        this.grid[tail.y][tail.x] = 0
    }else{
        // 食物吃掉了,在放一个
        this.setFood()
        // 加一份
        this.score++
        this.setTitle()
    }

	// 新增头部
	this.snake.push({x:nextX,y:nextY})
    this.grid[nextY][nextX] = '1'
    this.drawCanvas()
}

复制代码

 


 

后续

包括这些代码也是摸鱼写的,做了这个一个没啥鸟用的功能,囧,欢迎关注,一起开发更多摸鱼项目 基本功能也就这些了,自己摸鱼够用了,这样就可以开3个tab

  • 1号tab看小视频
  • 2号tab开摄像头,防止后面班主任
  • 3号tab玩贪食蛇 其实30 * 30像素可以做的东西还挺多,比如俄罗斯方块,魔塔,坦克大战,都是能放下的,有兴趣的可以试试

代码地址: github.com/shengxinjin… 过两天把0.2的代码也录个视频放B站把,0.1版本视频欢迎三连

转载请注明:Android开发中文站 » favicon摸鱼工具开发0.2版本

您必须 登录 才能发表评论!