ゲーム制作記 ~キャラクター動かしてみようぜ~

2021-05-17

概要

JavaScriptを学んでいると、自分でゲーム制作したくなりました。
せっかくなので、ゲーム制作に必須のテクニックを残していこうと考えています。

今回はCanvasを用いてキャラクター配置、移動までしていきます。

仕上がり

こんな感じです。上、右、左、下キーで動きます。
壁の衝突判定はまた今度。

コード

解説はコメントにて。

const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
// iwtの画像、動きの情報を格納
let iwt = {
  img: new Image(),
  x: 0,
  y: 0,
  move: 0
}
let key = {
  up: false,
  down: false,
  left: false,
  right: false,
  push: ''
}
iwt.img.src = 'iwt.png'

// canvasサイズは640x640
canvas.width = 640
canvas.height = 640
document.body.append(canvas)

function main() {
  // たえず描画するため以下の塗りつぶしがないと残像が生まれる
  // ctx.clearRectでもいいですが、今回はわかりやすいように黒で塗りつぶす
  ctx.fillStyle = 'rgb(0,0,0)'
  ctx.fillRect(0, 0, 640, 640)
  
  // keydownでiwtの動く距離(move)とキーの情報をセット
  if ( iwt.move === 0 ) {
    if (key.left) {
      iwt.move = 32
      key.push = 'left'
    }
    if (key.up) {
      iwt.move = 32
      key.push = 'up'
    }
    if (key.right) {
      iwt.move = 32
      key.push = 'right'
    }
    if (key.down) {
      iwt.move = 32
      key.push = 'down'
    }
  }
  // moveが0より上の限り移動する
  if (iwt.move > 0) {
    // 毎描画でmoveから-4ずつ
    iwt.move -= 4
    // iwtは押したキーによりx, yを移動する
    if ( key.push === 'left' ) iwt.x -= 4
    if ( key.push === 'up' ) iwt.y -= 4
    if ( key.push === 'right' ) iwt.x += 4
    if ( key.push === 'down' ) iwt.y += 4
  }
  // iwtを描画
  ctx.drawImage(iwt.img, iwt.x, iwt.y)
  // 最適のタイミングでmain関数を実行する
  requestAnimationFrame(main)
}

// keyを押した時に発火
function handleKeyDown( event ) {
  event.preventDefault();

  const key_code = event.keyCode;
  if( key_code === 37 ) key.left = true;
  if( key_code === 38 ) key.up = true;
  if( key_code === 39 ) key.right = true;
  if( key_code === 40 ) key.down = true;
}
// keyをはなした時に発火
function handleKeyUp( event ) {
  const key_code = event.keyCode;
  if( key_code === 37 ) key.left = false;
  if( key_code === 38 ) key.up = false;
  if( key_code === 39 ) key.right = false;
  if( key_code === 40 ) key.down = false;
}

addEventListener('keydown', handleKeyDown, false)
addEventListener('keyup', handleKeyUp, false)
// main関数の実行
main()

基本ゲームの挙動は描画して消して描画して消して、を高速で行っていることで動きを再現しています。

感想

簡単に移動処理はできますが、衝突判定が加わると多分難しくなるんだろうなぁ。
楽しんで学んでいきましょう。

参考

https://original-game.com/introduction-to-javascript-how-to-use-html5-and-canvas/

運営について

Natural Tearoomはシステム開発会社フロントエンドエンジニアがんちゃんが運営するメディアです。
フロントエンド技術を中心に発信しています。

· プライバシーポリシー

SNS

© 2021 天然珈琲店