課題のためのチートシート

課題

課題専用のプレイグラウンドを使用して、 300px * 300pxのcanvasに自由に絵を書いてください。

条件:
- アニメーションが含まれること
- 条件分岐(if文)が使われていること
- クリック（タップ）でインタラクションできること
- 再実行しなくても、繰り返し操作しつづけられること
- 画像を使用する場合は権利クリアなこと
- 画像の取得元URLが記述されていること
(自作画像の場合は自作と記述)
1限用プレイグラウンド
2限用プレイグラウンド
C限用プレイグラウンド

基礎

基本的なJavaScriptの書き方は下記を別途参照してください。

配列

沢山の値を連続で入れられる箱

  var arr = [10, 20, 30, 40, 50]
  arr[0] // 1番目の値にアクセス => 10 
  arr[1] // 2番目の値にアクセス => 20
  arr[2] // 3番目の値にアクセス => 30

連想配列(オブジェクト)

沢山の値にラベルをつけてセットで入れられる箱

var obj = {
  apple: 'りんご',
  orange: 'オレンジ'
}

console.log(obj.apple) // => 'りんご'
console.log(obj.orange) // => 'オレンジ'

条件分岐 (if文)

真ん中だけ赤色の四角を書く

  for(var i = 0; i < 30; ++i) {
    if( i === 15) {
      ctx.fillStyle = 'rgb(250,50,50)'
    } else {
      ctx.fillStyle = 'black'
    }
    ctx.fillRect(10 * i, 10 , 5, 5)
  }

一定時間で繰り返し関数を実行する

  var i = 0;
  function loop () {
      console.log(++i)
  }
  setInterval(loop, 100)

アニメーション(第10回)

  var obj = {x: 150, y: 150, speed: 3, size: 10}

  function strokeCircle(x,y,radius) {
    ctx.beginPath()
    ctx.arc(x, y, radius, 0, 2 * Math.PI)
    ctx.stroke()
  }

  function loop() {
    // 下地を白で塗りつぶす
    ctx.fillStyle = 'white'
    ctx.fillRect(0, 0, 300, 300)

    strokeCircle(obj.x, obj.y, obj.size)
    obj.size += obj.speed
    if(obj.size > 100) {
      obj.size = 100
      obj.speed *= -1
    } else if(obj.size <= 0) {
      obj.size = 0
      obj.speed *= -1
    }
  }
  setInterval(loop, 30)

クリックされたことを検知する

function onClick(e) {
  console.log('x: ' + e.offsetX)
  console.log('y: ' + e.offsetY)
}
canvas.addEventListener('click', onClick)

画像をアップロード

- assetsタブを選択
- ファイルを選択から画像をアップロード
- 使用したい画像下のコピーボタンでパスをコピーできます

画像を表示する

- 画像パスには、画像アップロード時にコピーしたパスを貼り付けてください

ctx.drawImage(images.asset1, 10, 10, 50,50)

簡単なゲームのサンプル

canvasの右半分をクリックで右移動、左半分をクリックで左移動

看板に当たったらゲームオーバー

画像をダウンロードして、 playgroundにアップロードしてください

var width = 50
var pos = 2
var objectX = 2
var objectY = -150
var status = 'playing'

function loop () {
  ctx.fillStyle = 'green'
  ctx.fillRect(0,0,300,300)
  ctx.fillStyle = 'gray'
  ctx.fillRect(50,0,200,300)

  ctx.drawImage(images.asset2, width * objectX, objectY,width,50)
  ctx.drawImage(images.asset1, width * pos, 200, width, 70)

  if(status === 'playing') {
    if(objectY > 300) {
      objectY = -150
      objectX = Math.floor(Math.random() * 6)
    }
    objectY += 5
  }


  if(170 <= objectY && objectY <= 270) {
    if(objectX === pos) {
      ctx.fillStyle = 'red'
      ctx.font = '24px sans-serif';
      ctx.fillText('gameover', 90,100)
      status = 'gameover'
    }
  }

}
setInterval(loop, 30)

function onClick(e) {
  if(status === 'playing') {
    if(e.offsetX < 150) {
      --pos
    }else {
      ++pos
    }
  } else if(status === 'gameover') {
    status = 'playing'
    objectY = -150
    objectX = Math.floor(Math.random() * 6)
  }
}
canvas.addEventListener('click', onClick)

参考作品

作品1
作品2
作品3
作品4