小さなフロントエンドゲームを書く

今年の冬休みは4ヶ月以上！？そして、私はほぼ5ヶ月間、恋人に会っていません! 私は、彼女を喜ばせるために、小さなフロントエンドゲームを書くことを思いつきました。

I. ゲームの説明

クリック <マーク ゲームを開始する
ボールが下の枠に触れるとゲーム終了です。ページを更新して、ゲームを再開する必要があります。

II. ゲーム表示

III. HTMLページレイアウト

<div id="contain">
  <div id="box">
    <div class="board"></div>
    <div class="ball"></div>
  </div>
  <button>Start game</button><br>
  <span>Score:</span>
  <span class="score">0</span> 
</div>

Note that

IV. CSSスタイル

<style>
  *{
    margin: 0;
    padding: 0;
  }
  #contain {
    width: 500px;
    height: 480px;
    margin: 0 auto;
    margin-top: 100px;
  }
  #box {
    width: 500px;
    height: 400px;
    margin: 0 auto;
    /* child is parent */
    position:relative ;
    border: 1px solid #ccc;
  }
  .board {
    width: 100px;
    height: 10px;
    background-color: black;
    /* child-extinct-father phase */
    position:absolute;
    /* board is horizontally centered */
    left:200px;
    top: 80%;
  }
  .ball {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: coral;
    /* child-extinct-father */
    position: absolute;
    left:242px;
    top:76%;
  }
  button {
    width: 100px;
    background-color: dodgerblue;
    border-radius: 10%;
    color: white;
    padding: 4px 0;
    margin: 5px 0;
  }
</style>

(1) セレクタを含む は、ブラウザ全体のゲーム レイアウトを中央に配置するために使用されます。
(2) ボックスセレクタ 区切られたゲームエリアのスタイリング
(3) クラスセレクターボード、クラスセレクターボール はそれぞれコリジョンボードとボールのスタイリングを表します。

<script src=". /jquery.js"></script> 
<script>
//Get each required element
  var contain = document.getElementById("contain");
  var box = document.getElementById("box");
  var board = document.getElementsByClassName("board")[0];
  var ball = document.getElementsByClassName("ball")[0];
  var btn = document.getElementsByTagName("button")[0];
  var score = document.getElementsByClassName("score")[0];
  // represent board left distance, right distance; ball left distance, right distance respectively
  var board_left,board_top,ball_left,ball_top ;
  var interval,flag=1,sum=0; 
  
  // Set the speed of the ball
  var speedX = -1,speedY = -1;
   
  //listen to the mouse entering the box
   box.onmousemove = function() {
     //event object (compatible)
    var e = event || window.event; 
    //change the board's left and top
    board_left = event.pageX - box.offsetLeft -50;
    board_top = event.pageY - box.offsetTop;  
    //check if the board is outside the border and change the position of the board and ball
    
    if(board_left>=0 && board_left<=400) {
      board.style.left = board_left + "px";
      // The role of the flag is to prevent the position of the ball from changing again after clicking the button and entering the Box again
      if(flag) {
        ball_left = board_left + 45;
        ball.style.left = ball_left + "px";
      }  
    }  
    if(board_top>=0 && board_top<=390){
      board.style.top = board_top + "px";
      if(flag) {
        ball_top = board_top - 15;
        ball.style.top = ball_top + "px";
      }
   } 
   
  }
  
  //Listen to the button click event
  btn.onclick = function() {
    //clear timer, prevent timer overlap
    clearInterval(interval);
    //flag=0 after the ball no longer changes with the board position
    flag=0;
    //set the timer
    interval = setInterval(function(){   
      ball_left += speedX;
      ball_top += speedY;

      if(ball_left>=0 && ball_left<=485){
        ball.style.left = ball_left + "px";
      }
      if(ball_top>=0 && ball_top<=385){
        ball.style.top = ball_top + "px";
      }

      //The ball changes direction
      //bump d to the left-right border
      if(ball_left<0|| ball_left>485 ){
        speedX = -speedX;  
      }else if(ball_top<0){//bump to the top border border
        speedY = -speedY; 
      }  
     
      //detect if the ball hits the board
      if((ball_top+15) >= board_top && ball_left>=board_left && ball_left <= (board_left+50)){
        speedX = -speedX; 
        speedY = -speedY;
        //score change
        sum+=5;
        score.innerHTML = sum;

      }
      //game over
      if(ball_top>385 ){
        alert("Game over, refresh and start again");
        clearInterval(interval);
      }
    },5)    
  }
</script>


Notes.

V. JSコアコード

1. 全てのJSコードが表示される

<ブロッククオート

詳しい説明は後述しますので、ご安心ください！！（笑

To make it more aesthetically pleasing to point to the middle of the *board* when moving the mouse

2. JS コアのコード解析 ---- マウスオーバーをリッスンする

Limit the range that *board* can move

(1)イベントオブジェクトは互換性のある書き方をすること。イベントオブジェクトを使用する理由は、そのオブジェクトから ボード 左の距離、右の距離、そして ボール 左の距離、右の距離。簡単に変更可能 ボード と ボール の位置は、( <マーク イベントオブジェクトを理解していない人のために
JSイベントオブジェクト
)
(2) board_left = event.pageX - box.offsetLeft -50; このコードでは ボード_レフト その理由は -50 は

To prevent a bug that occurs when the mouse re-enters the game area after clicking the start button

(3)2つの if文 の中にネストされています。 ifステートメント を使用し、フラグ 変数フラグ . 外層 if文 の目的は if(board_left>=0 && board_left<=400) { board.style.left = board_left + "px"; ball_left = board_left + 45; ball.style.left = ball_left + "px"; } if(board_top>=0 && board_top<=390){ board.style.top = board_top + "px"; ball_top = board_top - 15; ball.style.top = ball_top + "px"; } The following is a demonstration of the correct code for listening to mouseovers. //Listen for mouse-over box box.onmousemove = function() { //event object (compatible) var e = event || window.event; //change the board's left and top board_left = event.pageX - box.offsetLeft -50; board_top = event.pageY - box.offsetTop; //check if the board is outside the border and change the position of the board and ball if(board_left>=0 && board_left<=400) { board.style.left = board_left + "px"; // The role of the flag is to prevent the position of the ball from changing again after clicking the button and entering the Box again if(flag) { ball_left = board_left + 45; ball.style.left = ball_left + "px"; } } if(board_top>=0 && board_top<=390){ board.style.top = board_top + "px"; if(flag) { ball_top = board_top - 15; ball.style.top = ball_top + "px"; } } } の内層は if文 と 変数フラグ は to prevent timer overlap ( <マーク ご興味のある方は、以下のコードに置き換えてみてください。
)

flag variable to zero

 //clear timer, prevent timer overlap
clearInterval(interval);
 //ball no longer changes with board position after flag=0
flag=0;

3. JSコアのコード解析 ---- ゲーム開始ボタンのクリックイベントをリスンする

(1) まず、タイマーをクリアします。

To consider under what circumstances to change speedX or speedY to the opposite number

(2) 特に、忘れてはいけないのが フラグ変数 を設定し、クリックイベントに入るとすぐに speedX and speedY should both be changed to the opposite number (前のディレクトリと合わせて推奨 <マーク マウスオーバーのリスニング

Game over, clear timer
if(ball_left>=0 && ball_left<=485){
    ball.style.left = ball_left + "px";
 }
if(ball_top>=0 && ball_top<=385){
    ball.style.top = ball_top + "px";
 }
 //The ball changes direction
//hit the left-right border
if(ball_left<0|| ball_left>485 ){
    speedX = -speedX;  
}else if(ball_top<0){//bump to the top border border
   speedY = -speedY; 
 }  
     
//detect if the ball hits the board
if((ball_top+15) >= board_top && ball_left>=board_left && ball_left <= (board_left+50)){
    speedX = -speedX; 
    speedY = -speedY;
//score change
    sum+=5;
    score.innerHTML = sum;

      }
//game over
if(ball_top>385 ){
    alert("Game over, refresh and start again");
    clearInterval(interval);
}

4. JSコアコードの解析 ---- ボールの衝突をリッスンする

(1) ボールが上部境界、左側境界、右側境界に当たったら、進行方向を変えること、すなわち

To consider under what circumstances to change speedX or speedY to the opposite number

(2) ボールが衝突板に衝突した場合 speedX and speedY should both be changed to the opposite number で、対応するゲームスコアを変更する必要があります。
(3) ボールが下境界に当たった時のプロンプト

Game over, clear timer

if(ball_left>=0 && ball_left<=485){
    ball.style.left = ball_left + "px";
 }
if(ball_top>=0 && ball_top<=385){
    ball.style.top = ball_top + "px";
 }
 //The ball changes direction
//hit the left-right border
if(ball_left<0|| ball_left>485 ){
    speedX = -speedX;  
}else if(ball_top<0){//bump to the top border border
   speedY = -speedY; 
 }  
     
//detect if the ball hits the board
if((ball_top+15) >= board_top && ball_left>=board_left && ball_left <= (board_left+50)){
    speedX = -speedX; 
    speedY = -speedY;
//score change
    sum+=5;
    score.innerHTML = sum;

      }
//game over
if(ball_top>385 ){
    alert("Game over, refresh and start again");
    clearInterval(interval);
}

あ、このコード、恋人に持っていってあげてください どういたしまして
皆さん、もっとアイデアを出してくださいね。