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

課題

課題専用のプレイグラウンドを使用して、アプリケーションを作成してください
条件:
- マウスorキーボードでインタラクションできること
- 再実行しなくても、繰り返し操作しつづけられること
- キャプションにコンセプトと操作説明、
- 画像を使用する場合は権利クリアなこと
- 画像の取得元URLが記述されていること
(自作画像の場合は自作と記述)

1限用プレイグラウンド
2限用プレイグラウンド
C限用プレイグラウンド

基礎

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

乱数

Math.random()

0~100未満のランダムな値を取る

  Math.random() * 100

小数点の切り捨て

  Math.floor(1.2)

おみくじアプリ

HTML

<button id="btn">おみくじをひく</button>
<div id="result"></div>

JavaScript

var btn = document.getElementById("btn")
var result = document.getElementById("result")
function onClickBtn() {
  var omikuji = ['大吉','中吉','小吉','吉','末吉','凶','大凶']
  var rand = Math.random() * 7
  var index = Math.floor(rand)
  result.innerHTML = omikuji[index]
}

btn.addEventListener('click', onClickBtn)

○×ゲーム

html

  <button id="btn0" value="0">□</button>
  <button id="btn1" value="1">□</button>
  <button id="btn2" value="2">□</button>
  <br/>
  <button id="btn3" value="3">□</button>
  <button id="btn4" value="4">□</button>
  <button id="btn5" value="5">□</button>
  <br />
  <button id="btn6" value="6">□</button>
  <button id="btn7" value="7">□</button>
  <button id="btn8" value="8">□</button>
  <br />
  <div id="info">○の番</div>
  <br/>
  <button id="reset">リセット</button>
  <style>
    [id^="btn"] {
      width: 100px;
      height: 100px;
      font-size: 80px;
    }
  </style>

JavaScript

var maruSelected = []
var batsuSelected = []
var currentTurn　= '○'
var winner = ''
var info = document.getElementById('info')

for(var i = 0; i < 9; i++) {
  var btn = document.getElementById('btn' + i)
  btn.addEventListener('click', onSelect)
}

function onSelect(e) {
  if(winner) return
  var btn = e.currentTarget
  var val = btn.value //解説
  var selected = parseInt(val) // 解説

  if(btn.innerHTML !== '□'){
    return
  }

  if(currentTurn === '○')　{
    btn.innerHTML = '○'
    currentTurn = '×'
    info.innerHTML = '×の番'
    maruSelected.push(selected)
  } else {
    btn.innerHTML = '×'
    currentTurn = '○'
    info.innerHTML = '○の番'
    batsuSelected.push(selected)
  }

  // 勝敗判定
  var patterns = [
    [0,1,2],
    [3,4,5],
    [6,7,8],
    [0,3,6],
    [1,4,7],
    [2,5,8],
    [0,4,8],
    [2,4,6],
  ]

  for(var i = 0; i < patterns.length; ++i) {
    var pattern = patterns[i]
    var counter = 0
    for(var j = 0; j < pattern.length; ++j) {
      var num = pattern[j]
      if(maruSelected.includes(num)) {
        ++counter
      }
    }
    if(counter >= 3) {
      winner = '○'
    }
  }

  for(var i = 0; i < patterns.length; ++i) {
    var pattern = patterns[i]
    var counter = 0
    for(var j = 0; j < pattern.length; ++j) {
      var num = pattern[j]
      if(batsuSelected.includes(num)) {
        ++counter
      }
    }
    if(counter >= 3) {
      winner = '×'
    }
  }
  if(winner) {
    info.innerHTML = winner + 'の勝ち！'
  }
}

var resetBtn = document.getElementById('reset')

function reset() {
  for(var i = 0; i < 9; i++) {
    var btn = document.getElementById('btn' + i)
    btn.innerHTML = '□'
  }
  winner = ''
  info.innerHTML = '○の番'
  maruSelected = []　
  batsuSelected = []
  currentTurn　= '○'
}

resetBtn.addEventListener('click',reset)

ジャンプゲーム

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

HTML

<button id="btn">start</button>

JavaScript

// 変数
var myY = 197
var me = { x:30, y:myY, jumpSpeed: 0 }
var isJumping = false

var enemySize = 30
var enemies = []
var jumpHeight = 10
var score = 0
var status = 'wait'

// アニメーション
function loop() {
  ctx.fillStyle = 'skyblue'
  ctx.fillRect(0,0,300,300)

  ctx.fillStyle = 'rgb(200,100,0)'
  ctx.fillRect(0,265,300,300)

  // 自機の描画
  if(status === 'gameover')  {
    ctx.drawImage(images.asset2, me.x, me.y, 55, 70)
  } else if(isJumping) {
    ctx.drawImage(images.asset2, me.x, me.y, 55, 70)
  } else {
    ctx.drawImage(images.asset1, me.x, me.y, 55, 70)
  }
  
  // ジャンプさせる
  me.y += me.jumpSpeed
  if(isJumping === true && me.jumpSpeed >= jumpHeight){
   me.jumpSpeed = 0
   isJumping = false
  } else if(isJumping) {
    me.jumpSpeed += 1
  }

  // スコアの描画
  ctx.fillStyle = 'black'
  ctx.font = "16px sanserif"
  ctx.fillText('score: ' + score, 10, 25)
  
  // ゲームステータス毎の描画
  if(status === 'wait') { // スタート画面
    ctx.font = "20px sanserif"
    ctx.fillText('click start button', 65, 100)

  } else if(status === 'gameover') {  // ゲームオーバー画面
    ctx.font = "30px sanserif"
    ctx.fillStyle = 'red'
    ctx.fillText('gameover', 80, 100)
    for(var i = 0; i < enemies.length; ++i) {
      var enemy = enemies[i]

      if(enemy.status === 'alive') {
        ctx.drawImage(enemy.image, enemy.x, enemy.y, 20, 20)
      } else if(enemy.status === 'dead') {
        ctx.drawImage(enemy.image,enemy.x, enemy.y + 10, 20, 10)
      }
    }
  } else if(status === 'palying') { // ゲーム中の画面
    var per = Math.random() * 100
    if(per <= 2){
      enemies.push({
        y: 250,
        x: 300,
        speed: Math.random() * 2 + 1,
        status: 'alive',
        image: images.asset3
      })
    }

    for(var i = 0; i < enemies.length; ++i) {
      var enemy = enemies[i]
      if(enemy.status === 'alive') {
        enemy.x -= enemy.speed

        ctx.drawImage(enemy.image,enemy.x, enemy.y, 20, 20)
        if(isJumping && 0 < me.jumpSpeed) {
          if(me.x < enemy.x && enemy.x < me.x + 40 && myY - 20 <= me.y) {
            enemy.status = 'dead'
            ++score
          }
        } else {
          if(me.x < enemy.x && enemy.x < me.x + 30 && myY - 20 <= me.y) {
            status = 'gameover'
            btn.innerHTML = 'start'
          }
        }
      } else if(enemy.status === 'dead') {
        ctx.drawImage(enemy.image,enemy.x, enemy.y + 10, 20, 10)
      }
    }
  }
}
setInterval(loop, 30)

var btn = document.getElementById("btn")

function onBtnClick(){
  if(status === 'wait' || status === 'gameover') {
    status = 'palying'
    enemies = []
    score = 0
    btn.innerHTML = 'jump'
    return
  }
  if(isJumping === true) return
  me.jumpSpeed = -jumpHeight
  isJumping = true
}

btn.addEventListener('mousedown', onBtnClick)
    

参考作品

作品1
作品2
作品3