JavaScriptフルスクラッチでゲーム作る

## 思いついたときに使えるゲームエンジン
JavaScriptフルスクラッチの超簡易ゲームエンジンです。
まぁゲームエンジンなんて次元ではないですが、何かふと作りたくなったときなんかにパッと使えるといいなと思ってます。
<p class="codepen" data-height="300" data-default-tab="js,result" data-slug-hash="GRXNZzQ" data-user="inwan78" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/inwan78/pen/GRXNZzQ">
  JavaScriptで超簡易ゲームエンジン作ったよ</a> by いんわん (<a href="https://codepen.io/inwan78">@inwan78</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## ゲームエンジン部分のプログラム

```javascript
const CORE = {
  setup: function(w, h){
    this.engine = new Engine(w, h);
  }
}

class Engine {
  constructor(w, h){
    const canvas = document.getElementById("canvas");
    canvas.width = w;
    canvas.height = h;
    canvas.style.backgroundColor = "#000000";
    CORE.canvas = canvas;
    CORE.ctx = canvas.getContext("2d");
    
    window.addEventListener('resize', () => {this.resizeCanvas();});
    this.resizeCanvas();  
  }
  _requestFrame(){
    this.update();
    requestAnimationFrame(()=>{this._requestFrame();});
  }
  resizeCanvas(){
    const canvas = CORE.canvas; 
    const canvasHeightRatio = canvas.height / canvas.width;
    const windowHeightRatio = window.innerHeight / window.innerWidth;
    
    let width;
    let height;
    if (windowHeightRatio > canvasHeightRatio) {
      width = window.innerWidth;
      height = window.innerWidth * (canvas.height / canvas.width);
    } else {
      width = window.innerHeight * (canvas.width / canvas.height);
      height = window.innerHeight;
    }
  
    canvas.style.width  = `${width}px`;
    canvas.style.height = `${height}px`;
    CORE.resolutionRatio = height / canvas.height;
  }
  preload(data){
    const length = Object.keys(data).length;
    let count = 0;
    const assets = [];
    for(let key in data) {
      assets[key] = new Image();
      assets[key].src = data[key];
      assets[key].onload = ()=>{
        if(++count == length){
          this.onload();
        }
      }
    }
    CORE.assets = assets;
  }
  clearCanvas(){
    CORE.ctx.clearRect(0, 0, CORE.canvas.width, CORE.canvas.height);
  }
  start(){
    this.init();
    requestAnimationFrame(()=>{this._requestFrame();});
  }
  onload(){}
  init(){}
  update(){}
}
```
## サンプルに作ったゲーム
### 神経衰弱
<p class="codepen" data-height="300" data-default-tab="js,result" data-slug-hash="mdGwBOg" data-user="inwan78" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/inwan78/pen/mdGwBOg">
  神経衰弱作ったよ</a> by inwan (<a href="https://codepen.io/inwan78">@inwan78</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### ライツアウト
<p class="codepen" data-height="300" data-default-tab="js,result" data-slug-hash="QWVpwqy" data-user="inwan78" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/inwan78/pen/QWVpwqy">
  ライツアウトのゲーム作ったよ</a> by inwan (<a href="https://codepen.io/inwan78">@inwan78</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## 他にもあります

サンプルは他にもあります ▷ [JavaScriptでゲーム作ろう！](https://javascript-game.com/)
解説もそっちにあるので気になる方は見てください('ω')ノ