AI game creator

Click here for free DL of the app version that can save data.

No:856

335

←

Prev Next

→

baseball
Developer User3161｜Date and time 23/6/17 20:32:08
Build time 32.2 sec｜Game capacity 2.644KB｜

Script

この野球ゲームは、フィールドに表示される黄色いボールをバットで打ち返して得点を稼ぐゲームです。バットの位置を左右に移動させ、アウトにならないようにボールを打ち返すことが目的です。ボールがフィールドから出るとゲームオーバーになります。得点は画面右上に表示されます。

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

Click here for free DL of the app version that can save data.

<html>
<head>
<title>野球ゲーム</title>
<style>
  #field{
    width: 100%;
    height: 50%;
    background: green;
    position: relative;
  }
  #ball{
    width: 30px;
    height: 30px;
    background: yellow;
    border: 1px solid black;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
  }
  #bat{
    width: 150px;
    height: 20px;
    background: brown;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translate(-50%);
  }
  #score {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 30px;
  }
</style>
</head>
<body onload="init()">

function init() {
    ball.style.left = "50%";
    ball.style.top = "50%";
    bat.style.left = bat_pos + "%";
    setInterval(moveBall, 50);
  }

function moveBall() {
    var ball_x = parseInt(ball.style.left) + ball_dx;
    var ball_y = parseInt(ball.style.top) + ball_dy;

//ボールがフィールドから出た時にゲームオーバー
    if(ball_x < 0 || ball_x > window.innerWidth || ball_y < 0 || ball_y > window.innerHeight) {
      alert("ゲームオーバー！得点：" + points);
      location.reload();
    }

//ボールがバットに当たった時に得点を加算
    if(ball_y + 30 > window.innerHeight - 20 && ball_x > bat_pos*window.innerWidth/100 - 30 && ball_x < bat_pos*window.innerWidth/100 + 150) {
      ball_dy = -speed;
      points ++;
      score.innerHTML = points;
    }

ball.style.left = ball_x + "px";
    ball.style.top = ball_y + "px";
  }

//バットを移動
  document.addEventListener("keydown", function(event) {
    if(event.code === "ArrowLeft" && bat_pos > 0) {
      bat_pos -= bat_dx;
      bat.style.left = bat_pos + "%";
    }
    if(event.code === "ArrowRight" && bat_pos < 100) {
      bat_pos += bat_dx;
      bat.style.left = bat_pos + "%";
    }
  });
</script>
</body>
</html>