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

No:4553

319

←

Prev Next

→

Amusement park coffee cup
Developer User3694｜Date and time 23/6/28 4:13:22
Build time 35.402 sec｜Game capacity 3.543KB｜

Script

ご注文に応じて、遊園地のコーヒーカップに入ったコーヒーを配達するゲームを作成しました。プレイヤーはスマホを傾けて、自分がコーヒーを配達するために座っているコーヒーカップを回転させます。障害物を避け、できるだけ多くのコーヒーを配達して、高得点を目指してください。絵文字を使用して、ゲーム画面に対するインタラクションを楽しめます。以下は、ゲームの実際のコードです。

遊園地のコーヒーカップ

←

Prev　Next

→ 　

Back　

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

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

<html>
  <head>
    <title>遊園地のコーヒーカップゲーム</title>
  </head>
  <body>
    <h1>遊園地のコーヒーカップ</h1>
    <canvas id="gameCanvas" width="320" height="480"></canvas>
    <script>
      var canvas = document.getElementById("gameCanvas");
      var context = canvas.getContext("2d");

var cupWidth = 50;
      var cupHeight = 80;
      var cupX = canvas.width / 2 - cupWidth / 2;
      var cupY = canvas.height - cupHeight;
      var cupSpeed = 5;

var coffeeWidth = 20;
      var coffeeHeight = 40;
      var coffeeX = canvas.width / 2 - coffeeWidth / 2;
      var coffeeY = 20;
      var coffeeSpeed = 3;

var obstacles = [];

var score = 0;

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
        canvas.addEventListener("devicemotion", handleMotion, true);
        gameLoop();
      }

function handleMotion(event) {
        var x = event.accelerationIncludingGravity.x;
        cupX += x;
        cupX = Math.max(cupX, 0);
        cupX = Math.min(cupX, canvas.width - cupWidth);
      }

function gameLoop() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        update();
        draw();
        requestAnimationFrame(gameLoop);
      }

function update() {
        coffeeY += coffeeSpeed;
        if (coffeeY >= canvas.height) {
          coffeeY = 20;
          coffeeX = Math.random() * (canvas.width - coffeeWidth);
          score++;
        }

for (var i = 0; i < obstacles.length; i++) {
          obstacles[i].y += obstacles[i].speed;
          if (obstacles[i].y >= canvas.height) {
            obstacles.splice(i, 1);
            i--;
          } else if (
            coffeeX + coffeeWidth >= obstacles[i].x &&
            coffeeX <= obstacles[i].x + cupWidth &&
            coffeeY + coffeeHeight >= obstacles[i].y &&
            coffeeY <= obstacles[i].y + cupHeight
          ) {
            obstacles.splice(i, 1);
            i--;
            score--;
          }
        }

if (Math.random() < 0.05) {
          var obstacleX = Math.random() * (canvas.width - cupWidth);
          var obstacleSpeed = Math.random() * 2 + 1;
          obstacles.push({
            x: obstacleX,
            y: 0,
            speed: obstacleSpeed
          });
        }
      }

function draw() {
        context.fillStyle = "#F9DA83";
        context.fillRect(cupX, cupY, cupWidth, cupHeight);

context.fillStyle = "#A64C27";
        context.fillRect(coffeeX, coffeeY, coffeeWidth, coffeeHeight);

context.fillStyle = "#000000";
        context.font = "24px Arial";
        context.fillText("Score: " + score, 10, 30);

context.fillStyle = "#FF0000";
        for (var i = 0; i < obstacles.length; i++) {
          context.fillRect(
            obstacles[i].x,
            obstacles[i].y,
            cupWidth,
            cupHeight
          );
        }
      }
    </script>
  </body>
</html>