php おみくじ

phpで配列の数はcount、ランダムはmt_rand()、ページのURLは$_SERVER[“SCRIPT_NAME”];で取得します。

<?php

$omikuji = array('小吉','大吉','中吉','凶');

$result = $omikuji&#91;mt_rand(0, count($omikuji)-1)&#93;;
?>
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>おみくじ</title>
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
  <h1>おみくじ</h1>
  <p>今日の運勢は「<?php echo $result; ?>」です!</p>
  <p><a href="<?php echo $_SERVER&#91;"SCRIPT_NAME"&#93;; ?>">もう一度</a></p>
</body>
</html>

PHPのcountに関するドキュメントです。
PHP; count-Manual

jQuery LocalStorage メモ帳

localStorage.getItemでデータを取得、localStorage.setItemでローカル保存、localStorage.removeItemでデータを削除します。保存した場合は、ブラウザを更新しても、データが残っております。 $(‘#memo’).bind(‘keyup’, function() のbind ‘keyup’は、キーボード入力時に、キーボードが上がった場合に呼び出されます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>メモ帳</title>
    <style>
    body {

    }
    </style>
  </head>
  <body>
    <h1>メモ帳</h1>
    <textarea id="memo" rows="10" cols="40" name="40"></textarea>
    <p><input type="button" id="clear" value="消去"></p>
    <script>
    $(function(){
      if (localStorage.getItem('memo')){
        $('#memo').val(localStorage.getItem('memo'));
      }

      $('#clear').click(function(){
        $('#memo').val('');
        localStorage.removeItem('memo');

      });

      $('#memo').bind('keyup', function(){
        localStorage.setItem('memo', $('#memo').val());
      });

    });
    </script>
  </body>
</html>

local storageのドキュメントはjqueryの公式サイトなどを参照ください。
https://plugins.jquery.com/tag/localstorage/

JavaScript 王様ゲーム

任意で一致しない複数の乱数を取得する場合は、Math.floor(Math.random()* (n+1))をdo whileで一致しない限りループさせて取得します。htmlに値を返すのは、document.getElementById(”).innerHTMLです。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>王様ゲーム</title>
    <style>
    body {

    }
    </style>
  </head>
  <body>
    <h1>王様ゲーム</h1>
    <p>人数: <input type="text" id="num"></p>
    <p><input type="button" value="王様曰く!" onclick="kingSaid();"></p>
    <p id="result"></p>    
    <script>
      function kingSaid(){
        var orders = [
        'デコピンしなさい',
        'クイズを出しなさい',
        'ほめちぎりなさい',
        'ドリンクを注ぎなさい'
        ];
        var order = orders[Math.floor(Math.random()* orders.length)]; 

        var num = document.getElementById('num').value;
        var p1 = Math.floor(Math.random()* (num)) + 1;
        var p2;

        if (num < 2){
          p2 = 1;
        } else {
          do {
            p2 = Math.floor(Math.random()* (num)) + 1;
          } while (p1 == p2);

        }

        

        document.getElementById('result').innerHTML = 
          '#' + p1 + 'の人が#' + p2 + 'の人に' + order;
      }
    </script>
  </body>
</html>

JavaScript getTimeによる日付計算

date(year, month, day)をgetTime()で取得し、1000(ミリ秒) * 60(秒) * 60(分) * 24(時間)で割ります。 

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <title>日付計算の練習</title>
    <style>
    body {

    }
    </style>
  </head>
  <body>
    <h1>日付計算の練習</h1>
    <p>誕生日: <input type="text" name="birthday" id="birthday" value="1990-04-01"></p>
    <p><input type="button" value="計算!" onclick="getAge();"></p>
    <p>生まれてから<span id="daysPast">???</span>日経過していて、およそ<span id="age">???</span>歳です!</p>
    <script>
      function getAge(){
          var birthday = document.getElementById('birthday').value.split("-");

          var d1 = new Date(birthday[0], birthday[1]-1, birthday[2])
          var d2 = new Date();
          var diff = d2.getTime() - d1.getTime();
          var daysPast = Math.floor(diff / (1000 * 60 * 60 * 24));
          var age = Math.floor(daysPast / 365.25);

          document.getElementById('daysPast').innerHTML = daysPast;
          document.getElementById('age').innerHTML = age;
      }
    </script>
  </body>
</html>

jQuery マウスの座標軸の取得


マウスの座標軸を$(‘#container’).mousemove(function(e){ console.log(e.clientX, e.clientY); で取得し、中心からの距離に合わせてオブジェクトの形状を変える処理です。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <title>パララックスサイト</title>
    <style>
    body {
      margin: 0;
      padding: 0;
    }
    #container {
      width: 600px;
      height: 280px;
      background: #eee;
    }
    .box {
      position: fixed;
      opacity: 0.6;
      left: 300px;
    }
    #box1 {
      width: 40px;
      height: 40px;
      top: 140px;
      background: red;
    }
    #box2 {
      width: 50px;
      height: 50px;
      top: 155px;
      background: blue;
    }
    #box3 {
      width: 60px;
      height: 60px;
      top: 165px;
      background: yellow;
    }
    </style>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div id="container">
    <div id="box1" class="box"></div>
    <div id="box2" class="box"></div>
    <div id="box3" class="box"></div>
    </div>
    <script>
    $(function(){
      $('#container').mousemove(function(e){
          console.log(e.clientX, e.clientY);
          var cx = $(this).width() / 2;
          var cy = $(this).height() / 2;
          var dx = e.clientX - cx;
          var dy = e.clientY - cy;
          $('#box1').css('left', cx + dx * 1.1);   
          $('#box2').css('left', cx + dx * 1.3); 
          $('#box3').css('left', cx + dx * 1.5);
          $('#box1').css('top', cy + dy * 1.0);   
          $('#box2').css('top', cy + dy * 1.1); 
          $('#box3').css('top', cy + dy * 1.2);        
      });
    });
    </script>
  </body>
</html>

jQuery パララックス2

cssのbackground-positionを$(window).scroll(function(){ var dy = $(this).scrollTop(); で操作します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <title>パララックスサイト</title>
    <style>
    body {
      margin: 0;
      padding: 0;
      height: 3000px;
    }
    .box {
      padding: 0;
      margin:0;
      height: 340px;
    }
    #bg1 { background: url('p1.jpg') no-repeat; }
    #bg2 { background: url('p2.jpg') no-repeat; }
    #bg3 { background: url('p3.jpg') no-repeat; }
    #msg {
      font-size: 48px;
      font-weight: bold;
      font-family: Verdana, Arial, sans-serif;
      color: orange;
      opacity: 0;
      position: fixed;
    }
    </style>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div id="bg1" class="box"></div>
    <div id="bg2" class="box"></div>
    <div id="bg3" class="box"></div>
    <div id="msg" class="box">The End</div>
    <script>
    $(function(){
      $(window).scroll(function(){
        var dy = $(this).scrollTop();
        console.log(dy);

        $('#bg1').css('background-position', '0 '+dy+'px');

        if (dy > 340) {
          $('#bg2').css('background-position', (dy-340)+'px '+(dy-340)+'px');
        } else {
          $('#bg2').css('background-position', '0 0');
        }

        if (dy > 680) {
          $('#bg3').css('background-position', '0 '+(dy-680)*2+'px');
        } else {
          $('#bg3').css('background-position', '0 0');
        }
        if (dy > 680) {
          $('#msg').css('opacity', (dy-680)/340);
          $('#msg').css('top', 200);
          var dx = (dy -680) > 400 ? 400: (dy-680);
          $('#msg').css('left', dx);
        } else {
          $('#msg').css('opacity', 0);
        }

      });
    });
    </script>
  </body>
</html>

%e7%84%a1%e9%a1%8c

jQuery パララックス1

scrollTop();でスクロール位置を取得し、それに合わせてオブジェクトを変形します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <title>パララックスサイト</title>
    <style>
    body {
      margin: 0;
      padding: 0;
      height: 3000px;
    }
    .box {
      height: 40px;
      width: 40px;
      position: fixed;
      top: 10px;
    }
    #box1 { left: 10px; background: red; }
    #box2 { left: 60px; background: blue; }
    #box3 { left: 110px; background: green; }
    </style>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div id="box1" class="box"></div>
    <div id="box2" class="box"></div>
    <div id="box3" class="box"></div>
    <script>
    $(function(){
      var pos1 = $('#box1').offset();
      var pos2 = $('#box2').offset();
      var pos3 = $('#box3').offset();
      $(window).scroll(function(){
        var dy = $(this).scrollTop();
        console.log(dy);

        $('#box1').css('top', pos1.top +dy / 2);
        $('#box1').css('left', pos1.left +dy / 8);
        $('#box2').css('top', pos2.top +dy / 5);
        $('#box2').css('left', pos2.left +dy / 2);
        $('#box3').css('top', pos3.top +dy / 7);
        $('#box3').css('left', pos3.left +dy / 4);
      });
    });
    </script>
  </body>
</html>

%e7%84%a1%e9%a1%8c

enchant.js 熊を探せ

x軸y軸をランダムに表示させて、touchstartで、位置とスコアを変えていくゲームスクリプトです。

enchant();

window.onload = function(){
    var core = new Core(320, 320);
    core.preload('chara1.png');
    core.fps = 15;

    var score = 0;
    var timeLeft = 5 * core.fps;

    core.onload = function(){
        var bear = new Sprite(32, 32);
        bear.x = rand(320);
        bear.y = rand(320);
        bear.frame = 0;
        bear.image = core.assets['chara1.png'];

        bear.on('touchstart', function(){
            score++;
            scoreLabel.text = 'Score: ' + score;
            this.x = rand(320);
            this.y = rand(320);
        });

        var scoreLabel = new Label('Score: 0');
        scoreLabel.x = 200;
        scoreLabel.y = 5;

        var timeLabel = new Label('Time: 0');
        timeLabel.x = 5;
        timeLabel.y = 5;

        core.on('enterframe', function(){
            timeLeft--;
            timeLabel.text = 'Time: ' + timeLeft;
            if (timeLeft <= 0){
                alert('Your score: ' + score);
                this.stop();
            }
        });

        core.rootScene.addChild(scoreLabel);
        core.rootScene.addChild(timeLabel);
        core.rootScene.addChild(bear);


        core.rootScene.addChild(bear);
    }
    core.start();
}

function rand(n){
    return Math.floor(Math.random() * (n+1));
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <script type="text/javascript" src="enchant.js"></script>
    <script type="text/javascript" src="main.js"></script>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
</body>
</html>

%e7%84%a1%e9%a1%8c

Unity Game作成

他のシーンを呼び出すには、build settingで設定します。
%e7%84%a1%e9%a1%8c

呼び出しのスクリプトです。

#pragma strict

var ball : Transform;
var n : int = 0;

function Update () {
	if (Input.GetButtonUp("Jump")){
	Instantiate(ball, transform.position, transform.rotation);
	n++;
	}

	if (n > 10){
	Application.LoadLevel("gameover");
	}
}

Gameの書き出しは、build and settingでbuidl and rundで行います。

player

#pragma strict

function Update () {
	var x: float = Input.GetAxis("Horizontal");
	transform.Translate(x * 0.2, 0, 0);

}

function OnCollisionEnter(obj: Collision) {
	if (obj.gameObject.name == "Enemy(Clone)"){
	 transform.localScale.x -= Random.Range(0.1, 0.5);
	 if (transform.localScale.x < 1.0) transform.localScale.x = 1.0;
	} 

}

enemy

#pragma strict


function Update () {
	transform.position.z -= 0.1;
	transform.Rotate(1, 1, 1);
	if (transform.position.z < -12.0){
	Application.LoadLevel("GameOver");
	}

}

function OnCollisionEnter(){
	Destroy(gameObject);
}
#pragma strict

var enemy: Transform;
function Update () {
	if(Time.frameCount % 60 == 0){
	Instantiate(enemy, Vector3(Random.Range(-5.0,5.0),1,8), transform.rotation);
	}
}
#pragma strict

var style: GUIStyle;

function OnGUI(){
	GUI.Label(Rect(10, 10, 100, 30), "GameOver", style);
}

unity JavaScript

Unityのスクリプトリファレンスです。
https://docs.unity3d.com/ScriptReference/index.html

objectに対するスクリプトを記述していきます。

#pragma strict

function Start () {
 Debug.Log("hello world");
}

function Update () {

}

unityのJSは変数の宣言など書き方が少し異なります。

#pragma strict

var x : int = 5;

function Start () {
 Debug.Log("hello world ->" + x);
}

function Update () {

}

オブジェクトを動かす際には、transformのポジションを動かします。

function Update () {
	transform.position.z += 0.1;
}

vector3でオブジェクトを移動させることもできます。

function Update () {
	transform.position += Vector3(0, 0, 0.1);
}

ユーザの入力受付

function Update () {
	if (Input.GetButtonUp("Jump")){
	Debug.Log("Jumped!");
	}
}

%e7%84%a1%e9%a1%8c

Edit->ProjectSetting->Inspectorで値を参照できます。

左右キーでオブジェクトを移動させます。

function Update () {
	if (Input.GetButtonUp("Jump")){
	Debug.Log("Jumped!");
	}

	var x : float = Input.GetAxis("Horizontal");
	transform.Translate(x * 0.2, 0, 0);
}

Digitbodyを設定して、以下のように記載すると、衝突判定ができます。

#pragma strict

function Start () {
 
}

function Update () {
	if (Input.GetButtonUp("Jump")){
	Debug.Log("Jumped!");
	}

	var x : float = Input.GetAxis("Horizontal");
	transform.Translate(x * 0.2, 0, 0);
}

function OnCollisionEnter(){
	Debug.Log("Hit!");
}

%e7%84%a1%e9%a1%8c

#pragma strict

var ball : Transform;

function Update () {
	if (Input.GetButtonUp("Jump")){
	Instantiate(ball, transform.position, transform.rotation);
	}
}