を作りましょう。

以下は、JavaScriptで書かれた世界の果てを破壊する簡単なゲームです。

＜HTMLファイル＞

 

 
   

     
     
   
   
     
        
      
 
      スタート 
      
 
      
スコア：
        0 
      
 
     

   



＜JavaScriptファイル＞

var myGamePiece; 
var myObstacles = []; 
var myScore; 

function startGame() { 
  myGamePiece = new component(30, 30, "🌟", 10, 120); 
  myScore = new component("30px", "Consolas", "black", 280, 40, "text"); 
  myGameArea.start(); 
} 

var myGameArea = { 
  canvas: document.getElementById("gameCanvas"), 
  start: function() { 
    this.canvas.width = window.innerWidth; 
    this.canvas.height = window.innerHeight; 
    this.context = this.canvas.getContext("2d"); 
    this.frameNo = 0; 
    updateGameArea(); 
  }, 
  clear: function() { 
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); 
  } 
} 

function component(width, height, color, x, y, type) { 
  this.type = type; 
  if (type == "text") { 
    this.text = color; 
  } 
  this.width = width; 
  this.height = height; 
  this.speedX = 0; 
  this.speedY = 0; 
  this.x = x; 
  this.y = y; 
  this.update = function() { 
    ctx = myGameArea.context; 
    if (type == "text") { 
      ctx.font = this.width + " " + this.height; 
      ctx.fillStyle = color; 
      ctx.fillText(this.text, this.x, this.y); 
    } else { 
      ctx.fillStyle = color; 
      ctx.fillRect(this.x, this.y, this.width, this.height); 
    } 
  }; 
  this.newPos = function() { 
    this.x += this.speedX; 
    this.y += this.speedY; 
  }; 
} 

function updateGameArea() { 
  var x, height, gap, minHeight, maxHeight, minGap, maxGap; 
  for (i = 0; i < myObstacles.length; i += 1) { 
    if (myGamePiece.crashWith(myObstacles[i])) { 
      return; 
    } 
  } 
  myGameArea.clear(); 
  myGameArea.frameNo += 1; 
  if (myGameArea.frameNo == 1 || everyinterval(150)) { 
    x = myGameArea.canvas.width; 
    minHeight = 50; 
    maxHeight = 200; 
    height = Math.floor(Math.random() * (maxHeight - minHeight + 1) + minHeight); 
    minGap = 50; 
    maxGap = 200; 
    gap = Math.floor(Math.random() * (maxGap - minGap + 1) + minGap); 
    myObstacles.push(new component(10, height, "black", x, 0)); 
    myObstacles.push(new component(10, x - height - gap, "black", x, height + gap)); 
  } 
  for (i = 0; i < myObstacles.length; i += 1) { 
    myObstacles[i].x += -2; 
    myObstacles[i].update(); 
  } 
  myScore.text="スコア: " + myGameArea.frameNo; 
  myScore.update(); 
  myGamePiece.newPos(); 
  myGamePiece.update(); 
  window.requestAnimationFrame(updateGameArea); 
} 

function everyinterval(n) { 
  if ((myGameArea.frameNo / n) % 1 == 0) { 
    return true; 
  } 
  return false; 
} 

function accelerate(n) { 
  myGamePiece.speedY += n; 
} 

function stopMove() { 
  myGamePiece.speedX = 0; 
  myGamePiece.speedY = 0; 
} 

function moveUp() { 
  myGamePiece.speedY -= 1; 
} 

function moveDown() { 
  myGamePiece.speedY += 1; 
} 

function moveLeft() { 
  myGamePiece.speedX -= 1; 
} 

function moveRight() { 
  myGamePiece.speedX += 1; 
} 

document.addEventListener("keydown", function(event) { 
  switch (event.code) { 
    case "KeyW": 
      moveUp(); 
      break; 
    case "KeyS": 
      moveDown(); 
      break; 
    case "KeyA": 
      moveLeft(); 
      break; 
    case "KeyD": 
      moveRight(); 
      break; 
  } 
}); 

document.addEventListener("keyup", function(event) { 
  stopMove(); 
}); 

component.prototype.crashWith = function(otherobj) { 
  var myleft = this.x; 
  var myright = this.x + (this.width); 
  var mytop = this.y; 
  var mybottom = this.y + (this.height); 
  var otherleft = otherobj.x; 
  var otherright = otherobj.x + (otherobj.width); 
  var othertop = otherobj.y; 
  var otherbottom = otherobj.y + (otherobj.height); 
  var crash = true; 
  if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) { 
    crash = false; 
  } 
  return crash; 
} 

＜解説＞

このゲームは、自分自身を「🌟」として、世界を破壊しながら進むゲームです。プレイヤーは矢印キーを使用して動かすことができます。目的は、障害物を避けながらできるだけ多くの距離を進むことです。プレイヤーが障害物にぶつかると、ゲームが終了します。スコアは、ゲームのフレーム数に基づいて計算されます。このゲームは、JavaScriptを使用して作成されており、canvas要素を使用して描画されます。プレイヤーが移動するときにcanvas要素がクリアされ、新しいフレームが描画されます。障害物は、ランダムに生成され、こちらもcanvas要素を使用して描画されます。 また、スマートフォンやタブレットなどのタッチ操作にも対応しています。