JSFiddle

  • Caluclation and Visualization of Horizontally launched projectile

    No-Library (pure JS), HTML, CSS, JavaScript

    class Graph {
      constructor(el, rate) {
        this.parent = document.querySelector(el);
        this.rate = rate || 1;  // 指数関数の場合すぐに上限に達してしまうため調整
        this.width = 500;
        this.height ...
  • Caluclation and Visualization of Free-Fall motion

    No-Library (pure JS), HTML, CSS, JavaScript

    class Graph {
      constructor(el, rate) {
        this.parent = document.querySelector(el);
        this.rate = rate || 1;  // 指数関数の場合すぐに上限に達してしまうため調整
        this.width = 640;
        this.height ...
  • Gravity with Canvas

    No-Library (pure JS), HTML, CSS, JavaScript

    class Game {
      constructor(el) {
        this.canvas = document.querySelector(el);
        this.items = [];
      }
      
      add(item) {
        this.items.push(item);
      }
      
      remove(item) {
        const ...
  • WIP - T-Rex Runner

    No-Library (pure JS), HTML, CSS, JavaScript

    class TRexRunner {
      constructor(el) {
        this.init(el);
      }
      
      init(el) {
        this.canvas = document.createElement('canvas');
        this.canvasCtx = this.canvas.getContext('2d ...
  • N square calculations with Vue.js

    No-Library (pure JS), HTML, CSS, JavaScript

    new Vue({
      el: '#game',
      data() {
        return {
          boxes: 10,
          rows: [],
          cols: [],
          result: []
        }
      },
      created() {
        this.rows = this.randomNumbers();
        this.cols = this.randomNumbers ...
  • Calculation of change

    No-Library (pure JS), HTML, CSS, JavaScript

    class StrongBox {
      constructor() {
        this.money = [
          { yen: 10000, count: 10 },
          { yen: 5000,  count: 10 },
          { yen: 2000,  count: 10 },
          { yen: 1000,  count ...
  • Barcode Scaner with Quagga.js

    No-Library (pure JS), HTML, SCSS, JavaScript

    // import Quagga.js
    
    class BarcodeReader {
      constructor() {
        Quagga.onProcessed(this._onProcessed.bind(this));
        Quagga.onDetected(this._onDetected.bind(this));
      }
    
      get config ...
  • Calculation of the payment method

    No-Library (pure JS), HTML, CSS, JavaScript

    const money = [
      1,
      5,
      10,
      100,
      500,
      1000,
      2000,
      5000,
      10000
    ];
    
    const reload = document.getElementById('reload');
    const payment = document.getElementById ...
  • Pitch bend with Web Audio API + Vue.js

    No-Library (pure JS), HTML, CSS, JavaScript

    new Vue({
      el: '#app',
      data() {
        return {
          keyA: 440,
          ctx: new AudioContext(),
          osc: null,
          pitch: this.keyA,
          lfo: {
            enabled: false,
            frequency ...
  • Mixer with With Web Audio API + Vue.js

    No-Library (pure JS), HTML, CSS, JavaScript

    new Vue({
      el: '#app',
      data() {
        return {
          waveForms: ['sine', 'square', 'sawtooth', 'triangle'],
          ctx: new AudioContext(),
          osc: [
            // osc1
            {
              node: null,
              gain: null ...