# 校長ひさじゅのはじめてのプログラミング勉強会資料
## やりかた
- CodePenにアクセスする
https://codepen.io/kenchasonakai/pen/abqBVdy
- 資料に沿ってJSのところにコードを書いていくとイベントの内容をちょっとずつためせます
## にせらんてくんを右に動かしてみる

//moveはどのくらい距離動かすのか
var move = 5;
//leftはにせらんてくんが画面の左端からどの位置にいるのか
var left = 0;

function moveRantekun() {
  var rantekun = document.getElementById('rantekun');
  left = left + move;
  rantekun.style.left = left + 'px';
}

setInterval(moveRantekun, 10);

## にせらんてくんが画面の右端に行ったら左側に動くようにする

var move = 5;
var left = 0;

function moveRantekun() {
  var rantekun = document.getElementById('rantekun');
  //にせらんてくんが画面の左端からどの位置にいるのか + にせらんてくんの幅を足すとにせらんてくんの画像の右端の位置がわかる
  var right = parseInt(rantekun.style.left) + parseInt(rantekun.width);
  //にせらんてくんの画像の右端が800(CSSで画面幅を800pxにしていしているので)の位置にいたらにせらんてくんを動かす距離を-5(さっきと逆方向方向に5)に設定する
  if (right > 800) {
    move = -5;
  }
  left = left + move;
  rantekun.style.left = left + 'px';
}

setInterval(moveRantekun, 10);

## にせらんてくんが画面の左端に行ったら右側に動くようにする

var move = 5;
var left = 0;

function moveRantekun() {
  var rantekun = document.getElementById('rantekun');
  var right = parseInt(rantekun.style.left) + parseInt(rantekun.width);
  if (right > 800) {
    move = -5;
  }
  //にせらんてくんの画像の左端の位置が0より小さい時(左に行きすぎてる時)にせらんてくんを動かす距離を5(右方向方向に5)に設定する
  if (left < 0) {
    move = 5;
  }
  left = left + move;
  rantekun.style.left = left + 'px';
}

setInterval(moveRantekun, 10);

## にせらんてくんをクリックしたら動くようにする

var move = 5;
var left = 0;

function moveRantekun() {
  var rantekun = document.getElementById('rantekun');
  var right = parseInt(rantekun.style.left) + parseInt(rantekun.width);
  if (right > 800) {
    move = -5;
  }
  if (left < 0) {
    move = 5;
  }
  left = left + move;
  rantekun.style.left = left + 'px';
}

rantekun.onclick = function (event) {
  setInterval(moveRantekun, 10);
};

## にせらんてくんを自分で動かせるようにする
### その1: ボタンを押したらどんな情報が返ってくるのかを確認する

var move = 5;
var left = 0;

function moveRantekun() {
  var rantekun = document.getElementById('rantekun');
  var right = parseInt(rantekun.style.left) + parseInt(rantekun.width);
  if (right > 800) {
    move = -5;
  }
  if (left < 0) {
    move = 5;
  }
  left = left + move;
  rantekun.style.left = left + 'px';
}

rantekun.onclick = function (event) {
  setInterval(moveRantekun, 10);
};

document.onkeydown = function (event) {
  //ブラウザの検証ツールを開いて確認する
  // event.keyでは右矢印を押すとArrowRight、左矢印をを押すとArrowLeftが取得できることを確認する
  console.log(event.key)
}

### その2: にせらんてくんを右矢印を押したときに右方向左矢印を押したときに左方向に動くようにする

var move = 5;
var left = 0;

function moveRantekun() {
  var rantekun = document.getElementById('rantekun');
  var right = parseInt(rantekun.style.left) + parseInt(rantekun.width);
  if (right > 800) {
    move = -5;
  }
  if (left < 0) {
    move = 5;
  }
  left = left + move;
  rantekun.style.left = left + 'px';
}

rantekun.onclick = function (event) {
  setInterval(moveRantekun, 10);
};

document.onkeydown = function (event) {
  if (event.key == 'ArrowRight') {
    move = 5;
  }
  if (event.key == 'ArrowLeft') {
    move = -5;
  }
}