Go to Qiita Advent Calendar 2024 Top
LoginSignup
5
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@fazerog02

JavaScriptで雪を降らせてみよう！

Last updated at Posted at 2020-12-11

はじめに

この記事は東京高専プロコンゼミ Advent Calendar①11日目の記事です。
https://adventar.org/calendars/5509

本題

最近，急に寒くなってきましたね．秋は高専プロコンと定期試験でバタバタしていたので，気づいたらもう冬になっていてびっくりです．時間が過ぎるのは早いですね...😢

ところで，冬といえば皆さんは何を連想しますか？色々あると思いますが，僕は雪ですね！
あたり一面を雪でおおわれた白銀の世界や，ふわりと舞い降りる雪はいつ見てもいいものです．

というわけで(?)，今回はJavaScript(以下js)を使ってwebの世界にも雪を降らせて行こうと思います！

jsを書く

準備

とりあえずベースとなるhtml,jsファイルを用意します

|-- snow
|-- |-- index.html
|-- |-- snow.js
index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <script src="./snow.js" type="text/javascript"></script>
</body>
</html>
snow.js
function initSnow(){
    const snow_div = document.createElement("div");
    snow_div.id = "snow_div";
    document.body.appendChild(snow_div);
}

window.onload = initSnow;

See the Pen WNGodqB by fazerog02 (@fazerog02) on CodePen.

現時点では，読み込むとbodyタグの中にsnow_divというidを持ったdiv要素が配置されるだけのページです．
これに色々手を加えて雪を降らせて行きましょう！

雪を生成する

とりあえず何個か雪を作ってみましょう！

index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body style="background-color: #000000">
    <script src="./snow.js" type="text/javascript"></script>
</body>
</html>
snow.js
const SNOW_NUM = 10;
const snow_list = [];

function getRandom(min, max){
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1) + min); 
}

function createSnow(){
    const snow = document.createElement("div");
    
    // 位置の設定(下左右の10px端を除く))
    snow.style.position = "absolute";
    snow.style.top = String(getRandom(0, document.documentElement.clientHeight - 10)) + "px";
    snow.style.left = String(getRandom(10, document.documentElement.clientWidth - 10)) + "px";

    // サイズの設定(今回は直径5px)
    snow.style.width = "5px";
    snow.style.height = "5px";
    
    // 円にする
    snow.style.borderRadius = "50%";

    // 背景を白に
    snow.style.backgroundColor = "#ffffff";

    return snow;
}

function initSnow(){
    const snow_div = document.createElement("div");
    snow_div.id = "snow_div";
    document.body.appendChild(snow_div);

    // 雪を10個生成
    for(let i = 0; i < SNOW_NUM; i++){
        let snow = createSnow();
        snow_div.appendChild(snow);
        snow_list.push(snow);
    }
}

window.onload = initSnow;

See the Pen MWjbQYa by fazerog02 (@fazerog02) on CodePen.

雪として直径5pxの白い円を10個生成するようにjsを変更しました．また，bodyの背景色が白だと雪が見えないので黒に変更しました．

雪を落下させる

次は雪を落下させていきます！

snow.js
const SNOW_NUM = 10;
const snow_list = [];

function getRandom(min, max){
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1) + min); 
}

// "100px"のような文字列から数字部分だけを抜き出す
function getPxNum(px_str){
    var i;
    for(i = 0; i < px_str.length; i++){
        if(isNaN(px_str[i])) break;
    }
    const num_str = px_str.substring(0, i);
    
    return Number(num_str);
}

function moveSnow(){
    for(let i = 0; i < SNOW_NUM; i++){
        // 雪が画面外に出る前に一番上に戻す
        let top_num = getPxNum(snow_list[i].style.top) + 1;
        if(top_num >= document.documentElement.clientHeight - 10) top_num = 0;

        // 各雪を1px下にずらす
        snow_list[i].style.top = String(top_num) + "px";
    }
}

function createSnow(){
    const snow = document.createElement("div");
    
    // 位置の設定(ランダム(下左右の10px端を除く))
    snow.style.position = "absolute";
    snow.style.top = String(getRandom(0, document.documentElement.clientHeight - 10)) + "px";
    snow.style.left = String(getRandom(10, document.documentElement.clientWidth - 10)) + "px";

    // サイズの設定(今回は直径5px)
    snow.style.width = "5px";
    snow.style.height = "5px";
    
    // 円にする
    snow.style.borderRadius = "50%";

    // 背景を白に
    snow.style.backgroundColor = "#ffffff";

    return snow;
}

function initSnow(){
    const snow_div = document.createElement("div");
    snow_div.id = "snow_div";
    document.body.appendChild(snow_div);

    // 雪を10個生成
    for(let i = 0; i < SNOW_NUM; i++){
        let snow = createSnow();
        snow_div.appendChild(snow);
        snow_list.push(snow);
    }

    // moveSnowを10msごとに定期実行
    setInterval(moveSnow, 10);
}

window.onload = initSnow;

See the Pen QWKGQwe by fazerog02 (@fazerog02) on CodePen.

雪が落下し，画面外に出るとまた上に戻るというプログラムができました．
setIntervalを使用して雪を1pxずつ落とす関数を10msごとに定期実行することで実現しています．10msというのは適当に決めた値なので，変更しても大丈夫ですが，大きくしすぎると雪の動きがカクカクするようになるので気を付けてください．

雪の大きさをランダムに変更する

さて雪を落下させたのはいいんですが，このままでは不自然で雪っぽくありませんよね．
これを解消するために，いろいろなランダム要素を加えていきます．

まずは，雪の大きさから始めます！

snow.js
function createSnow(){
    const snow = document.createElement("div");
    
    // 位置の設定(下左右の10px端を除く))
    snow.style.position = "absolute";
    snow.style.top = String(getRandom(0, document.documentElement.clientHeight - 10)) + "px";
    snow.style.left = String(getRandom(10, document.documentElement.clientWidth - 10)) + "px";

    // サイズの設定(ランダムに2～7px)
    const random_size = String(getRandom(2, 7)) + "px";
    snow.style.width = random_size;
    snow.style.height = random_size;
    
    // 円にする
    snow.style.borderRadius = "50%";

    // 背景を白に
    snow.style.backgroundColor = "#ffffff";

    return snow;
}

See the Pen ZEpBrbW by fazerog02 (@fazerog02) on CodePen.

2~7pxぐらいが雪としてちょうどいいサイズだったので，ランダムに2~7pxの雪を生成するようにしました．

雪の落下速度をランダムに変える

全ての雪が同じ速度で落ちると，横並びになってしまって不自然極まりないので，速度にランダム要素を追加します．

snow.js
const SNOW_NUM = 10;
const snow_list = [];

class Snow{
    constructor(snow, speed){
        this.snow = snow;
        this.speed = speed;
    }
}

function getRandom(min, max){
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1) + min); 
}

function getRandomSnowSpeed(){
    return Math.random()*2 + 1;
}

// "100px"のような文字列から数字部分だけを抜き出す
function getPxNum(px_str){
    var i;
    for(i = 0; i < px_str.length; i++){
        if(isNaN(px_str[i]) && px_str[i] != ".") break;
    }
    const num_str = px_str.substring(0, i);
    
    return Number(num_str);
}

function moveSnow(){
    for(let i = 0; i < SNOW_NUM; i++){
        // 雪が画面外に出る前に一番上に戻す
        let top_num = getPxNum(snow_list[i].snow.style.top) + snow_list[i].speed;
        if(top_num >= document.documentElement.clientHeight - 10){
            // 雪を初期化
            top_num = 0;
            const random_size = String(getRandom(2, 7)) + "px";
            snow_list[i].snow.style.width = random_size;
            snow_list[i].snow.style.height = random_size;
            snow_list[i].speed = getRandomSnowSpeed();
        }

        // 各雪を1px下にずらす
        snow_list[i].snow.style.top = String(top_num) + "px";
    }
}

function createSnow(){
    const snow = document.createElement("div");
    
    // 位置の設定(下左右の10px端を除く))
    snow.style.position = "absolute";
    snow.style.top = String(getRandom(0, document.documentElement.clientHeight - 10)) + "px";
    snow.style.left = String(getRandom(10, document.documentElement.clientWidth - 10)) + "px";

    // サイズの設定(ランダムに2～7px)
    const random_size = String(getRandom(2, 7)) + "px";
    snow.style.width = random_size;
    snow.style.height = random_size;
    
    // 円にする
    snow.style.borderRadius = "50%";

    // 背景を白に
    snow.style.backgroundColor = "#ffffff";

    return snow;
}

function initSnow(){
    const snow_div = document.createElement("div");
    snow_div.id = "snow_div";
    document.body.appendChild(snow_div);

    // 雪を10個生成
    for(let i = 0; i < SNOW_NUM; i++){
        let snow = createSnow();
        snow_div.appendChild(snow);
        
        snow_list.push(new Snow(snow, getRandomSnowSpeed()));
    }

    // moveSnowを10msごとに定期実行
    setInterval(moveSnow, 10);
}

window.onload = initSnow;

See the Pen QWKGQEW by fazerog02 (@fazerog02) on CodePen.

雪に速さの情報を持たせるために，新しくSnowクラスを作ってそれで雪を管理することにしました．
雪の速さはMath.random()*2 + 1となっており，Math.random()は0以上1未満の少数を返すので，大体1~3の間になっています．この値は職人芸で調整したものなので，皆さんも自分でいじって調節してみてください．
今回はこれで完成です．最初の方と比べるとだいぶ雪っぽいのではないでしょうか！他にも横方向に動きをつけたり，工夫できる点はあると思うので自分好みにカスタマイズしてみてください！！

おまけ

背景を雪景色の写真にしたらそれっぽくなった

See the Pen gOwLvVO by fazerog02 (@fazerog02) on CodePen.

おわりに

実はこれを書いているのはテスト週間真っただ中で，あまり記事に時間をとられるわけにはいかないので微妙な内容になってしまいました...
本当は自分がやっているValorantというFPSゲームについて熱くオタク語り🤓したかったので，また機会があったらどこかでします．

ここまで拙い文章&コードでしたが，お付き合いいただきありがとうございました！またどこかでお会いしましょう！！

5
0
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
5
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?