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

No:2362

3521

←

Prev Next

→

Games that improve the quality of sleep
Developer もちきなこ｜Date and time 23/6/21 2:02:22
Build time 56.331 sec｜Game capacity 4.886KB｜

Script

In the following、HTML for implementing a sleep quality game、CSS、Here is the JavaScript code. This game is、It can be operated with a smartphone and、Emojis are used extensively. HTML code:

Games to improve sleep quality

Tap the screen to start

This game is、In a block-breaker kind of game.、How to operate、Move the paddle left or right.、The object is to bounce the ball. When all the blocks are destroyed, the game is clear, but、If you drop the ball, the game is over. Ball and Paddle、Pictograms are used for blocks. and、This game is、The game is set up so that if you dont get enough sleep, its game over. To improve the quality of your sleep, you should、The content appeals to the need for adequate sleep.

←

Prev　Next

→ 　

Back　

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

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

以下に、睡眠の質を高めるゲームを実装するためのHTML、CSS、JavaScriptのコードをご紹介します。このゲームは、スマートフォンで操作可能であり、絵文字を多用しています。

HTMLコード：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>睡眠の質を高めるゲーム</title>
    <style>
      body {
        font-size: 20px;
        text-align: center;
        background-color: #f5f5f5;
      }
      canvas {
        border: 2px solid #888;
      }
    </style>
  </head>
  <body>
    <h1>睡眠の質を高めるゲーム</h1>
    <p>画面をタップしてスタート</p>
    <canvas id="game-canvas" width="320" height="480"></canvas>

var canvas = document.getElementById("game-canvas");
var context = canvas.getContext("2d");

// ボールを作成
var ball = {
  x: 160,
  y: 200,
  radius: 20,
  speed: 5,
  angle: Math.random() * 2 * Math.PI,
};

// パドルを作成
var paddle = {
  x: 130,
  y: 450,
  width: 60,
  height: 20,
  speed: 10,
};

// ブロックを作成
var blocks = [];
for (var i = 0; i < 8; i++) {
  blocks[i] = {
    x: i * 40,
    y: 50,
    width: 40,
    height: 20,
    visible: true,
    color: "#" + ((1 << 24) * Math.random() | 0).toString(16),
  };
}

// ゲームを初期化
function init() {
  canvas.addEventListener("click", startGame);
}

// ゲームを開始
function startGame() {
  canvas.removeEventListener("click", startGame);
  document.addEventListener("keydown", movePaddle);

// ループ処理を開始
  setInterval(updateGame, 1000 / 60);
}

// ゲームを更新
function updateGame() {
  // ボールの動きを計算
  ball.x += ball.speed * Math.sin(ball.angle);
  ball.y -= ball.speed * Math.cos(ball.angle);

// ボールが左端、右端、上端、パドルに当たった場合の処理
  if (ball.x - ball.radius < 0 || ball.x + ball.radius > canvas.width) {
    ball.angle = Math.PI - ball.angle;
  } else if (ball.y - ball.radius < 0) {
    ball.angle = -ball.angle;
  } else if (
    ball.y + ball.radius > paddle.y &&
    ball.x > paddle.x &&
    ball.x < paddle.x + paddle.width
  ) {
    ball.angle = Math.PI - (ball.x - paddle.x - paddle.width / 2) / (paddle.width / 2) * (Math.PI / 2);
  }

// ブロックとの当たり判定を計算
  for (var i = 0; i < blocks.length; i++) {
    if (
      blocks[i].visible &&
      ball.x + ball.radius > blocks[i].x &&
      ball.x - ball.radius < blocks[i].x + blocks[i].width &&
      ball.y + ball.radius > blocks[i].y &&
      ball.y - ball.radius < blocks[i].y + blocks[i].height
    ) {
      ball.angle = -ball.angle;
      blocks[i].visible = false;
    }
  }

// パドルの動きを計算
  paddle.x += paddle.speed;
  if (paddle.x < 0 || paddle.x + paddle.width > canvas.width) {
    paddle.speed = -paddle.speed;
  }

// ゲーム画面をクリア
  context.clearRect(0, 0, canvas.width, canvas.height);

// ボールを描画
  context.fillStyle = "#f00";
  context.beginPath();
  context.arc(ball.x, ball.y, ball.radius, 0, 2 * Math.PI);
  context.fill();

// パドルを描画
  context.fillStyle = "#00f";
  context.fillRect(paddle.x, paddle.y, paddle.width, paddle.height);

// ブロックを描画
  for (var i = 0; i < blocks.length; i++) {
    if (blocks[i].visible) {
      context.fillStyle = blocks[i].color;
      context.fillRect(blocks[i].x, blocks[i].y, blocks[i].width, blocks[i].height);
    }
  }

// ゲームオーバー判定
  if (ball.y + ball.radius > canvas.height) {
    alert("睡眠が足りていないため、ゲームオーバーです。良い夢を見てください。");
    document.location.reload();
  }

// ゲームクリア判定
  var visibleBlocks = blocks.filter(function(block) {
    return block.visible;
  });
  if (visibleBlocks.length === 0) {
    alert("睡眠の質を高めることができました。おやすみなさい。");
    document.location.reload();
  }
}

// パドルを移動
function movePaddle(event) {
  if (event.keyCode === 37) { // 左
    paddle.speed = -Math.abs(paddle.speed);
  } else if (event.keyCode === 39) { // 右
    paddle.speed = Math.abs(paddle.speed);
  }
}

// ゲームを初期化
init();

</script>

このゲームは、ブロック崩しのようなゲームで、操作方法は、パドルを左右に移動させて、ボールを跳ね返すことです。ブロックを全て破壊するとクリアですが、ボールを落としてしまうとゲームオーバーです。ボールとパドル、ブロックには絵文字を使用しています。

また、このゲームは、睡眠不足になるとゲームオーバーになるように設定しています。睡眠の質を高めるためには、十分な睡眠時間が必要であることを訴求する内容となっています。

</body>
</html>