JS彈球遊戲

1、遊戲介紹

這裡寫圖片描述

小球只能在規定區域內移動。且碰到上、左、右三側時均反彈。而碰到下側則為輸。可以使用擋板使小球反彈。

2、遊戲引數設定

(1)、以小球為物件,有四種行為。

1、基礎運動(X Y)
ball.speedX = 1;
ball.speedY = 1;
2、碰壁轉向
ball.speedX = -ball.speedX;(發生條件為ball.style.left<=0 || ball.style.left>=370)
ball.speedY = -ball.speedY;(發生條件為ball.style.top<=0)
3、碰擋板轉向
ball.speedY = -ball.speedY;
(發生條件為ball.style.left 15 >= board.style.left && ball.style.left 15 <=board.style.left 60 && ball.style.top 30 >=board.style.top)
4、碰到下壁則判斷為輸
alert('您輸了!!!點選確定再來一局!!!');
(發生條件為ball.style.top>=370)

(2)、以擋板為物件,有1種行為

1、隨滑鼠移動而移動
(發生條件為
board.style.left=e.offsetX-30   'px';
board.style.top=e.offsetY-20   'px';
)

3、全部程式碼。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<style>
#main{
width: 400px;
height: 400px;
background: gray;
margin: 0 auto;
position: relative;
}
#ball{
width: 30px;
height: 30px;
background: yellow;
border-radius: 100%;
position: absolute;
}
#board{
width: 60px;
height: 20px;
background: red;
position: absolute;
bottom: 0;
left: 170px;
}
</style> 
</head>
<body>
<div id="main">
<div id="ball" style="left:0;top:0;"></div>
<div id="board"></div>
</div>
</body>
<script>
var main = document.getElementById('main');
var ball = document.getElementById('ball');
var board = document.getElementById('board');
//設定小球運動速度
ball.speedX = 3;
ball.speedY = 4;
//控制小球運動軌跡
ball.run = function(){
var left = parseInt(this.style.left)   this.speedX;
var top = parseInt(this.style.top)   this.speedY;
this.style.left = left   'px';
this.style.top = top   'px';
this.check( left,top);
}
//檢測碰撞實踐
ball.check = function(left,top){
//左右碰撞轉向  之所以用 或等於 符號,防止速度為3時。400/3不能除盡而出界
if(left <= 0 || left >= 370){
this.turnX();
}
//球撞到上邊轉向
if(top <= 0){
this.turnY();
}
//小球碰到下邊時,未用擋板則輸
if(top >= 370){
clearInterval();
alert('您輸了!!!點選確定再來一局!!!');
this.init();
}
//碰撞擋板後Y轉向
var board_left = parseInt(board.style.left);//擋板的左邊距
var board_top  = parseInt(board.style.top);//擋板的上邊距
if(left 15 >= board_left && left 15 <= board_left 60 && top 30 >=board_top){
this.turnY();
}
}
//控制小球轉向
ball.turnX = function(){
this.speedX = -this.speedX;
}
ball.turnY= function(){
this.speedY= -this.speedY;
}
//設定小球移動時間間隔為20ms
var clock = setInterval(function(){
ball.run();
},20);
//移動擋板
main.onmousemove=function(e){
//如果進入非main區,則直接返回,無變化。用於防止滑鼠進入紅色擋板內發生相對於擋板的移動。
if(e.srcElement !== main){
return;
}
//假設位置是長方形擋板的底邊中點。
//距離左邊 offsetX - 1/2L 
//距離頂部 offsetY - 1/2W 
board.style.left=e.offsetX-30 'px';
board.style.top=e.offsetY-20 'px';
}
ball.init = function(){
ball.style.left = 0;
ball.style.top  = 0;
}
</script>
</html>