原生JS+canvas跑马灯

样式：

		div {box-sizing:border-box;}
		.container {width:300px;height:300px;margin:50px auto;border:1px solid #eee;position:relative;}
		.inside {width: 200px;height: 200px; border:1px solid #eee;position: absolute;top:50px;left: 50px;}
		.item {width:50px;height: 50px;border:1px solid #eee;text-align: center;line-height: 50px;font-size:20px;position:absolute;}
		.item1  {left:0px;  top:0px;  }
		.item2  {left:50px; top:0px;  }
		.item3  {left:100px;top:0px;  }
		.item4  {left:150px;top:0px;  }
		.item5  {left:200px;top:0px;  }
		.item6  {left:250px;top:0px;  }
		.item7  {left:250px;top:50px; }
		.item8  {left:250px;top:100px;}
		.item9  {left:250px;top:150px;}
		.item10 {left:250px;top:200px;}
		.item11 {left:250px;top:250px;}
		.item12 {left:200px;top:250px;}
		.item13 {left:150px;top:250px;}
		.item14 {left:100px;top:250px;}
		.item15 {left:50px; top:250px;}
		.item16 {left:0px;  top:250px;}
		.item17 {left:0px;  top:200px;}
		.item18 {left:0px;  top:150px;}
		.item19 {left:0px;  top:100px;}
		.item20 {left:0px;  top:50px; }
		.control {width:300px;text-align:center;margin:30px auto;}
		#score {text-align: center;color:#f00;}

 

页面结构：

<div id="container" class="container">
		<canvas id="mycanvas" width="300" height="300"></canvas>
		<div class="inside"></div>
	</div>
	<div class="control">
		<button onClick="start()">开始</button><button onClick="location.reload()">重置</button>
		<div id="score">得分：0</div>
	</div>

 

JS：

let canvas  = document.getElementById('mycanvas');
	let ctx 	= canvas.getContext('2d');
	let cHeight = canvas.height;//画布高度
	let cWidth  = canvas.width;//画布宽度
	let speedX 	= 50;//X轴移动速度
	let speedY 	= 50;//Y轴移动速度
	let x 		= 0;//x坐标
	let y 		= 0;//y坐标
	let limit 	= 0;//移动次数
	let score 	= 0;//得分
	let lock 	= 0;//轴向锁(X:0，Y:1轴独立运动)
	let arr 	= [0, 4, 1, 3, 4, 1, 3, 4, 2, 3, 2, 4, 2, 3, 4, 3, 4, 3, 4];//概率数组
	let scoreArr= [100,40,25,10,5];//分数集合
	let container = document.getElementById('container');

	ctx.fillStyle = "red";
	ctx.fillRect(x, y, 50, 50);

	//x轴移动
	const draw = () => {

		if(limit <= 0){
			showScore();
			return;
		}

		ctx.clearRect(0,0,300,300);//清空画布

		//如果X轴移动时，坐标在画布右上角或左下角，换Y轴移动
		if(!lock && ((x + 50 >= cWidth && y == 0) || (x == 0 && y + 50 >= cHeight))){
			speedX *= -1;
			lock = 1;
		}

		//如果y轴移动时，坐标在画布右下角或左上角，换X轴移动
		if(lock && ((y + 50 >= cHeight && x + 50 >= cWidth) || (y == 0 && x == 0))){
			speedY *= -1;
			lock = 0;
		}

		if(lock) {
			y += speedY;
		} else {
			x += speedX;
		}

		ctx.fillRect(x, y, 50, 50);
		limit--;

		requestAnimationFrame(draw);//绘制
	}

	//开始
	function start(){
		//运行中禁止操作
		if(limit > 0)
			return;

		x = 0;
		y = 0;
		speedX = 50;
		speedY = 50;
		limit  = 0;
		lock   = 0;
		ctx.clearRect(0, 0, 300, 300);//清空画布
		ctx.fillRect(0, 0, 50, 50);//绘制
		let num 	= Math.floor(Math.random() * 20);//1-20 概率随机
		let group 	= Math.floor(Math.random() * 4) + 1; //1-4 随机组
		limit 		= 20 + arr[num] + group * 5;//设置移动次数
		score 		+= scoreArr[arr[num]];//此次增加得分
		requestAnimationFrame(draw);
	}

	//更新得分
	function showScore(){
		document.getElementById('score').innerHTML = '得分：' + score;
	}

	//界面初始化
	function init() {
		let k = 1;
		for (var j = 0; j < 20; j++) {
			if(k > 5)
				k = 1;

			var div = document.createElement('div');
			div.innerHTML = k;
			k++;
			div.setAttribute('class','item item' + (j + 1));
			container.appendChild(div);
		}
	}

	init();