# [程式筆記] 太鼓達人-1.極簡遊戲畫面

想設計第一個最簡單的遊戲訓練AI學會玩，一開始想到的是像 google 小恐龍的跳躍遊戲，但想到從起跳的動作到分數的回饋還有一段時間差，學習起來還有一點難度，想到類似像太鼓達人的節奏遊戲，打下去的瞬間就有即時的加減分，重要的狀態資訊也只有鼓點跟終點的距離，其他更遠的鼓點也不重要可以進一步簡化。

### 靜態畫面

整個太鼓達人的畫面簡化到極致，就只剩代表鼓點的紅圓，一條線表示軌道、空心的圈表示終點。


<script src="https://unpkg.com/konva@8.3.11/konva.min.js"></script>

<div id="container"></div>
<script>
    var stage = new Konva.Stage({
    container: 'container',
    width: window.innerWidth,
    height: window.innerHeight,
    });

    var layer = new Konva.Layer();

    var line = new Konva.Line({
        points: [120, 100, 300, 100],
        stroke: 'black',
    });

    var end = new Konva.Circle({
    x: 100,
    y: 100,
    radius: 20,
    stroke: 'black'
    });

    var red = new Konva.Circle({
    x: 300,
    y: 100,
    radius: 20,
    fill: 'red',
    stroke: 'black'
    });

    layer.add(line)
    layer.add(red);
    layer.add(end);
    stage.add(layer);

### 動態效果

遊戲運行的方式鼓點會不斷向左移動靠近終點，超過終點之後又會隨機出現在軌道上，按下a按鍵進行打擊終點圓環會發亮，當鼓點與終點接觸時打擊會得分0~10分，重和度越高得分越多，反之沒接觸時打擊會被-1分，鼓點超過終點都沒被打-10分，分數直接在console中顯示。


    function run(){
        red.x(red.x()-1)
        if( red.x()<100 ){
            console.log(-10)
            red.x(150+Math.random()*150)
        }
    }

    setInterval('run()',10)

    function beat(){
        end.strokeWidth(5)
        end.stroke('yellow')
        setTimeout(() => {
            end.strokeWidth(2)
            end.stroke('black')
        }, 100);

        if( red.x()<150 ){
            console.log(10-(red.x()-100)/5)
            red.x(150+Math.random()*150)
        }else{
            console.log(-1)
        }
    }

    document.addEventListener("keydown", (event) => {
        if(event.key=='a'){
            beat()
        }
    });    
</script>