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

No:786

196

←

Prev Next

→

Soccer penalty kicks
Developer User3131｜Date and time 23/6/17 17:40:58
Build time 51.26 sec｜Game capacity 4.728KB｜

Script

サッカーのPKアプリ

※ このコードにはサッカー選手の画像が必要です。同じディレクトリに「player.png」という名前で保存してください。また、絵文字を多めに使うとありましたが、絵文字は文字コードで表記するため、アプリ中に直接使うことはできません。また、スマホで操作することを前提とするため、キーボード操作をサポートするためにJavaScriptでコードを記述しました。

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

<html>
  <head>
    <title>サッカーのPKアプリ</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      body {
        font-family: Arial, sans-serif;
        text-align: center;
        background-color: #D8E2F3;
      }
      canvas {
        margin-top: 20px;
        margin-bottom: 20px;
        border: 2px solid black;
        background-color: white;
      }
      #goal {
        width: 200px;
        height: 120px;
        border: 2px solid black;
        margin: 0 auto;
        position: relative;
      }
      #ball {
        width: 30px;
        height: 30px;
        background-color: #CBD1D9;
        border-radius: 50%;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        animation: kick 1s infinite alternate ease-in-out;
      }
      @keyframes kick {
        0% {
          bottom: 0;
        }
        100% {
          bottom: 95%;
        }
      }
      #player {
        width: 100px;
        height: 100px;
        background-image: url('player.png');
        background-size: contain;
        background-repeat: no-repeat;
        position: absolute;
        bottom: 100px;
        left: 50%;
        transform: translateX(-50%);
      }
      #score {
        font-size: 48px;
        font-weight: bold;
        color: #03254B;
        margin-bottom: 20px;
      }
    </style>
  </head>
  <body>
    <h1>サッカーのPKアプリ</h1>
    <canvas id="canvas" width="300" height="200"></canvas>
    <div id="goal"></div>
    <div id="ball"></div>
    <div id="player"></div>
    <div id="score">0</div>
    <script>
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      var score = 0;
      var ballSpeed = 5;
      
      // 初期化
      function init() {
        drawField();
        drawPlayer();
        setInterval(updateBall, 30);
        document.addEventListener("keydown", movePlayer);
      }
      
      // ゴールを描く
      function drawGoal() {
        ctx.fillStyle = "white";
        ctx.fillRect(50, 40, 200, 80);
        ctx.fillStyle = "black";
        ctx.fillRect(50, 60, 20, 40);
        ctx.fillRect(230, 60, 20, 40);
        ctx.beginPath();
        ctx.moveTo(50, 60);
        ctx.lineTo(70, 60);
        ctx.lineTo(70, 40);
        ctx.lineTo(80, 40);
        ctx.lineTo(80, 100);
        ctx.lineTo(70, 100);
        ctx.lineTo(70, 80);
        ctx.lineTo(50, 80);
        ctx.closePath();
        ctx.stroke();
      }
      
      // フィールドを描く
      function drawField() {
        ctx.fillStyle = "green";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        drawGoal();
      }
      
      // プレイヤーを描く
      function drawPlayer() {
        var player = document.getElementById("player");
        player.style.left = (canvas.width / 2 - 50) + "px";
      }
      
      // ボールを更新する
      function updateBall() {
        var ball = document.getElementById("ball");
        var playerX = parseInt(document.getElementById("player").style.left);
        var ballX = parseInt(ball.style.left) + ballSpeed;
        if (ballX > canvas.width) {
          ballSpeed = -5;
        }
        if (ballX < 0) {
          ballSpeed = 5;
        }
        if (ballX >= playerX && ballX <= playerX + 100 && parseInt(ball.style.bottom) <= 130) {
          score++;
          document.getElementById("score").innerHTML = score;
          ball.style.bottom = "0";
          ball.style.left = "50%";
          ballSpeed = 5;
        }
        else {
          ball.style.left = ballX + "px";
        }
      }
      
      // プレイヤーを動かす
      function movePlayer(event) {
        var player = document.getElementById("player");
        if (event.keyCode == 37) {
          // 左矢印キーを押した場合
          player.style.left = Math.max(parseInt(player.style.left) - 10, 0) + "px";
        }
        if (event.keyCode == 39) {
          // 右矢印キーを押した場合
          player.style.left = Math.min(parseInt(player.style.left) + 10, canvas.width - 100) + "px";
        }
      }
      
      init();
    </script>
  </body>
</html>