前端简易小demo-弹球游戏

实现简易弹球游戏：
有得分项 有速度设置项
先点击速度项再点击开始游戏（若不选择速度则默认为x1.0）

在做这个东西时，有个logo漂浮的遇到边界反弹的小玩意可以让你参考一下了解计时器的用法，也让你对做这个游戏有点小feel。
https://blog.csdn.net/qq_42664066/article/details/108529828

先上效果图：

点击结束游戏：

接不到结束：

涉及主要知识点：计时器的设置、键盘监听
css代码如下：

		#score{
			width: 40%;
			height: 40px;
			margin: 5px auto;
			font-size: 40px;
			position: absolute;
			left: 470px;
		}
		#num{
			width: 15%;
			height: 40px;
			text-align: center;
			line-height: 40px;
			float: left;
			position: absolute;
			left: 150px;
			font-size: 40px;
			top: 5px;
			border: none;
		}
		#container{
			position: absolute;
			width: 1000px;
			height: 480px;
			border:1px solid red;
			top: 80px;
			left: 110px;
		}
		#ball{
			border-radius: 50%;
			width: 100px;
			height: 100px;
			position: absolute;
			left: 0px;
			top: 0px;
			background-color: skyblue;
		}
		#show{
			width: 60%;
			height: 100px;
			position: absolute;
			top: 30%;
			left: 20%;
			font-size: 60px;
			text-align: center;
			line-height: 100px;
		}
		#ban{
			/*border: 1px solid brown;*/
			width: 180px;
			height: 20px;
			background-color: brown;
			position: absolute;
			left: 0px;
			bottom: 0px;
		}
		button,#start,#over{
			width: 120px;
			height: 30px;
			margin: 0px 10px 0 10px;
			position: relative;
			top: 570px;
			left: 220px;
		}

html代码如下：

	<div id="score">Score：<input id="num" value="0" type="text" /></div>
	<div id="container">
		<div id="ball"></div>
		<div id="show">Game Over!</div>
		<div id="ban"></div>
	</div>
	<input type="button" id="start" name="" value="开始游戏" onclick="start();">
	<button value="10">x1.0</button>
	<button value="20">x2.0</button>
	<button value="30">x3.0</button>
	<input type="button" id="over" name="" value="结束游戏" onclick="over();">

jquery代码如下：（jquery3.0）
虽说我用的jquery但对初学javascript的伙伴来说主要理解内部逻辑即可，然后再敲一遍也是一样的。代码这种东西主要是理解想法和借鉴思路。

//相关参数设置
	$("#show").hide();//初始设置gameover隐藏
	var score=0;//设置初始化分数
	var t=0;
	var speed=10;//number

	var ballwidth = $("#ball").width();//获取球的宽度
	var ballheight = $("#ball").height();//获取球的高度
	var ballgox=true;//设置球的行动：true表示沿x正方向走即右走，flase反之
	var ballgoy=true;//y轴同上

	var banx;//板在x轴的起始点
	var bany = $("#ban").offset().top;//板在y轴的起始点
	var banwidth = $("#ban").width();//板的宽度
	var banheight = $("#ban").height();//板的高度
	var bangox=true;//设置板的行动

	var winwidth = $("#container").width();//游戏界面的宽度
	var winheight = $("#container").height();//游戏界面的高度
	var winx = $("#container").offset().left;//游戏界面的左上角x位置
	var winy = $("#container").offset().top;//游戏界面左上角y位置

	//设置得分
	function set_score(score){
		$("#num").val(score);
	}
	//获取游戏速度
	function getspeed(){
		$("button").click(function(){
			speed = $(this).val();//string类型
			speed = parseInt(speed);//转换为numberl类型
		})
		return speed;	
	}
	speed = getspeed();

	//游戏结束函数
	function over(){
		$("#show").show();
		clearTimeout(t);//使得球和板暂停移动
	}
	//游戏开始
	function start(){
		score=0;
		set_score(score);
		//每次开始游戏板和球的初始化位置
		$("#ball").css('left',0);
		$("#ban").css('left',0);
		$("#ball").css('top',0);
		ballx = $("#ball").offset().left;
		bally = $("#ball").offset().top;
		banx = $("#ban").offset().left;

		//球的移动
		$("#show").hide();//设置gameover隐藏
		t=setInterval(function(){
			if(ballgox==true){
				$("#ball").css('left',ballx=ballx+speed);//球向右移动
			}else{
				$("#ball").css('left',ballx=ballx-speed);
			}
			if(ballx>=(winwidth-ballwidth)){//当球撞击游戏右边界
				ballgox=false;
			}if(ballx<=0){//球撞击左边界
				ballgox=true;
			}

			if(ballgoy==true){
				$("#ball").css('top',bally=bally+speed);//球向下移动
			}else{
				$("#ball").css('top',bally=bally-speed);
			}
			
			if((bally+ballheight)>=(winheight-banheight)){//当球到达板的位置
				//没接到
				if(ballx<banx||ballx>(banx+banwidth)){
					over();
				}
				//接到
				else{
					ballgoy=false;//向上弹
					score=score+speed;//计分
					set_score(score);
				}
			}
			if(bally<=0){     //球弹到游戏上边界
				ballgoy=true;
			}
			//
			
		},100)
		controleban();
	}
	//控制板：键盘监听
	function controleban(){
		$(document).keydown(function(event){
			if(event.keyCode == 39){//键盘右键
				if(banx>=(winwidth-banwidth-1)){
		 			banx=winwidth-banwidth-5;
		 			$("#ban").css('left',banx);
		 			//当板到达右边界时，设置位置默认在右边界处避免出边界
		 		}
				$("#ban").css('left',banx=banx+40);
		 	}
		 	if(event.keyCode == 37){//键盘左键
				if(banx<=0){
					banx=0;
					$("#ban").css('left',banx);
					//当板到达左边界时，设置位置默认在左边界处避免出边界		
				}
		 		$("#ban").css('left',banx=banx-40);
		 	}
		});
	}

有建议和指正，欢迎指出~表示感谢！！
此至 互勉~