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

No:3792

1766

←

Prev Next

→

The brave snake beauty is the world.
Developer もちきなこ｜Date and time 23/6/26 16:58:49
Build time 32.009 sec｜Game capacity 3.184KB｜

Script

はい、了解しました！では、勇者ヘビ美ちゃんの冒険をゲーム化してみましょう。以下は、HTMLファイル内に記述するJavaScriptコードの例です。

勇者ヘビ美ちゃんの冒険

スマホの画面をタッチして、ヘビ美ちゃんを動かしてください。

このコードは、HTMLファイル内にcanvas要素を作成して、そこにヘビ美ちゃんと餌を表示するゲームを作成しています。タッチ操作によってヘビ美ちゃんを移動させ、餌を食べながらスコアを稼いでいくというゲームです。ゲームオーバーになると、アラートが表示されてゲームがリロードされます。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

はい、了解しました！では、勇者ヘビ美ちゃんの冒険をゲーム化してみましょう。

以下は、HTMLファイル内に記述するJavaScriptコードの例です。

```
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>勇者ヘビ美ちゃんの冒険</title>
</head>
<body>
  <h1>勇者ヘビ美ちゃんの冒険</h1>
  <p>スマホの画面をタッチして、ヘビ美ちゃんを動かしてください。</p>
  <canvas id="gameCanvas" width="320" height="480"></canvas>
  <script>
    // ゲームで使用する変数の宣言
    var canvas = document.getElementById("gameCanvas");
    var context = canvas.getContext("2d");
    var snake = [{x:160, y:240}];
    var food = {x:null, y:null, isEaten:true};
    var direction = {x:0, y:-1};
    var intervalID = null;

// ゲームの初期化処理
    function initialize() {
      canvas.addEventListener("touchstart", onTouchStart, false);
      drawSnakeAndFood();
      intervalID = setInterval(moveSnake, 1000/4);
    }

// ゲーム画面を描画する関数
    function drawSnakeAndFood() {
      context.clearRect(0, 0, canvas.width, canvas.height);
      context.fillStyle = "green";
      for(var i=0; i<snake.length; i++) {
        var part = snake[i];
        context.fillRect(part.x, part.y, 20, 20);
      }
      context.fillStyle = "red";
      if(food.isEaten) {
        food.x = Math.floor(Math.random() * 16) * 20;
        food.y = Math.floor(Math.random() * 24) * 20;
        food.isEaten = false;
      }
      context.fillRect(food.x, food.y, 20, 20);
    }

// ヘビ美ちゃんを動かす関数
    function moveSnake() {
      var head = snake[0];
      var newX = head.x + direction.x * 20;
      var newY = head.y + direction.y * 20;
      if(newX < 0 || newX >= canvas.width || newY < 0 || newY >= canvas.height) {
        clearInterval(intervalID);
        alert("ゲームオーバー");
        location.reload();
      }
      snake.unshift({x:newX, y:newY});
      if(newX == food.x && newY == food.y) {
        food.isEaten = true;
      } else {
        snake.pop();
      }
      drawSnakeAndFood();
    }

// タッチ操作のイベント処理関数
    function onTouchStart(event) {
      var touch = event.changedTouches[0];
      var xDiff = touch.pageX - canvas.offsetLeft - snake[0].x;
      var yDiff = touch.pageY - canvas.offsetTop - snake[0].y;
      if(Math.abs(xDiff) > Math.abs(yDiff)) {
        if(xDiff > 0) {
          direction = {x:1, y:0};
        } else {
          direction = {x:-1, y:0};
        }
      } else {
        if(yDiff > 0) {
        direction = {x:0, y:1};
        } else {
          direction = {x:0, y:-1};
        }
      }
    }

initialize();
  </script>
</body>
</html>
```