かつてプログラミングをかじった事がある程度の初心者が、CSSやJavaScriptで色々作ってみたりするブログです。 同じ志を持つ方には何かの参考になれば、かつて初心者だった上級者の方には微笑ましく見守っていただければ幸いです!
当ブログの紹介。 Webページ上で画像ファイルを生成・保存できる「画像生成ツール」カテゴリ、音を作って鳴らす事ができる「WebAudioAPI」カテゴリ、記事内で遊べる「ブラウザゲームそのままプレイ」カテゴリなど、JavaScriptで出来る事が幅広くて面白いですね^^ まったくの初心者向けに書いた「超入門のさわりだけ」カテゴリなんてのもあります。
|
https://twitter.com/LSS0324 |
---|
どうも!LSSです!! 昨日の記事に書いた通り、スマホゲー「ドラゴンクエスト どこでもモンスターパレード」が本日16時をもってサービス終了しました。 サービス終了したゲームの記事…誰得??とは自分でも思いますが、色々思い入れがあり、今日はそんな記事にしたいと思います! 最初はブラウザ版でプレイしていました チーム加入、そしてデータ消滅へw 放浪の旅路 熱血くん現る! 最初はブラウザ版でプレイしていました その頃、ブラウザゲームとして、たしか「どこでも」はつかない「ドラゴンクエスト モンスターパレード」というゲームがあり、それでプレイしていました。 その頃に遠距離で付き合っていた方との通話中に、…
どうも!LSSです!! ある、長らく遊んでいたスマホゲーが明日(7/31)サービス終了します。 「ドラゴンクエスト どこでもモンスターパレード」っていうゲームなんですけどね。 ドラクエ系といえば、「ドラクエウォーク」が始まり、「ドラゴンクエスト タクト」なるゲームがサービスを開始したところで、まぁ、時代の流れって事でしょうか。 遊んでいたスマホゲーがサービス終了を迎えるのは初めての事ではありませんが、長かった事もあってしんみりくるものがありますね。 と、逆に言えば、これでスタミナ消化等の日課(ノルマ?w)に縛られる事が終わり、時間の使い方を見直せるチャンスでもありますw (ちなみに、ウォーク・…
どうも!LSSです!! 今回は例のやつを使って、水玉模様?を4種ほど作ってみました! コードもつけていますので、使いたいものがあったらご自由にコピペしてください^^ 改変も可です! ずっと見ていると不思議な感じになりませんか? 昨日の斜め格子をもうちょっと自然に繋がる感じに くまちゃんが居るなら、うさぎちゃんも居たっていいじゃない 千成瓢箪(せんなりひょうたん)! ずっと見ていると不思議な感じになりませんか? <div style="background-color: lightblue; width: 300px; height: 200px; background-size: 50px 5…
どうも!LSSです!! 先日、公開したツール 試してみたいただいた方、ありがとうございます^^ 色々な模様が作れますが、今回は「使い方の一例」を書いてみます! 最初に普通に模様を作ります 水玉の数を「倍」にします 横位置・縦位置を+50 あくまで「一例」ですが 最初に普通に模様を作ります 作り始める前に、まず、 「水玉の数」をテキトーに決めます。(後から変更もできます) 今回は「最初は5」でいきます。 上部の「水玉個別設定」をクリックして、5つの水玉のサイズ・配置を決めます。 ※ここでちょっとこだわり。今回は「横位置」「縦位置」がそれぞれ「50%を超えないように」するやり方でいきます! ↑例え…
(もしかしたら)iPhoneだと4になるサイコロ!?←ならなかったぽい^^;
どうも!LSSです!! 一昨日の記事、 さじさん(id:conasaji)にご協力いただいて、なんとかiPhoneでも正しく見れるようになったみたいです^^ 解決策が見つかってよかった! ↑この記事のコメント欄にその経緯があります! ところで…水玉デザイナーはiPhoneに対応したものの、他のものでもradial-gradientとtransparentを使ったものは、もしかしたらiPhoneでは違って見えてるのかも知れない?って気がしなくもないですw ここのコメント欄とか^^; ちなみに、7/27現在、PCで見ると こういうデザイン(↑は画像です)になっています。 あと、思ったのは…例えばサ…
どうも!LSSです!! 今回は、CSSの様々な場面で出てくる「色の指定」について、書き方が何通りかあるものをまとめてみます。 1.色名(直感的にもっとも分かりやすい) メリット デメリット 2.RGB形式 #で指定(HSLより短く書ける) メリット デメリット 3.RGB形式 10進数で指定(16進数より分かりやすい?) メリット デメリット 4.RGBA形式 #指定 透過つき メリット デメリット 5.RGBA形式 10進数で指定 透過つき メリット デメリット 6.HSL形式(Hはともかくとして、SとLは分かりやすいw) メリット デメリット 7.HSLA形式 透過つき まとめ 1.色名(…
どうも!LSSです!! 今回はCSSの水玉模様をデザインするツールを作ってみました。 水玉デザイナー 使い方 作成例 制作のきっかけ 7/26追記! 水玉デザイナー // 全体的な設定 水玉個別設定' txt0+='全体の幅:'+wkw+'px ' +(wkw-') +(wkw>999?'+':'+') +(wkw-10') +(wkw>990?' +10':' +10')+''; txt0+='全体の高さ:'+wkh+'px ' +(wkh-') +(wkh>999?'+':'+') +(wkh-10') +(wkh>990?' +10':' +10')+''; txt0+='一枠の幅:'+…
【CSS】テキスト装飾によく使うプロパティ おさらいとサンプル集
どうも!LSSです!! 【CSS】ボックス装飾によく使うプロパティ おさらいとサンプル集に続き、テキスト装飾関連のまとめ記事です! 最初は基本的なところから、後半だんだん特殊なものになっていきます^^ font-size 文字の大きさを指定します コード 書式 color 文字の色を指定します コード 書式 font-weight 文字を太文字にします コード 書式 text-align 文字の表示位置を、右寄せにしたり、中央揃えにしたりできます コード text-decoration 文字に下線などの線を引きます コード 書式 その他アレンジ text-shadow 文字に影をつけます コー…
【CSS】ボックス装飾によく使うプロパティ おさらいとサンプル集
どうも!LSSです!! CSS関連で色々と作ってきましたが、ここでちょっといったん、まとめ記事を書きます! ちょっと量が多かったので、今回は「ボックス装飾」関連のまとめ記事となります^^ border-radius ボックス(枠)の角を角丸にする指定です。 コード 書式 border ボックス(枠)の外周に枠線を表示します。 コード 書式 枠線の種類 その他アレンジ background-image ボックス(枠)の背景に画像をつけます。 コード 画像ファイルの他に代替でグラデーションを使用できます。 コード 直線グラデーションの他に、円形グラデーションも使用できます。 複数のグラデーションを…
どうも!LSSです!! まもなく4連休に突入しますね! LSSも暦通りなもんで、今日出勤したら4連休です^^ (その分、3日間がハードだったりもしますがw) さて、今回はちょっと久々に、20年近く前に書いた小説を晒してみます。 「怪奇!蛙少女!!の巻」 あとがき 「怪奇!蛙少女!!の巻」 あれは小6の時、一学期の初日だった。…三学期に一度も学校に来なかった啓子が登校してきたのだ。 「お!啓子じゃねーか!!」「なんだよ、お前。トーコーキョヒかぁ?」「トーミンしてたんじゃねーの?」 クラスの男子が一斉にひやかす。 啓子はボソッと答えた。 「うん、実はそうなの。」「わー!ヘビ女だー!!楳図かずおだー…
今週のお題「2020年上半期」 どうも!LSSです!! 久々に「お題」記事を書いてみようかな、と思ってみてみると、「2020年上半期」みたいですね。 ん?7月ももう半分過ぎたのに、このタイミングで?と思いましたが、 あれですね。 「20日〆って考えるとちょうど今のタイミングになる」という事なのかな。 というわけで振り返ってみます 2020年1月21日 2020年2月21日 2020年3月21日 2020年4月21日 2020年5月21日 2020年6月21日 こうして振り返ると というわけで振り返ってみます 2020年1月から6月まで、それぞれ21日の記事を振り返ってみる事にします。 毎日書い…
どうも!LSSです!! 今回は「フォントの表示テスト」を行うだけのスクリプトを書いてみました。 fontテスト スクリプトのコード というのを取り急ぎ作ってみたのは fontテスト // '+fts[i]+'abcABC0123あいうえお柿句卦子\n'; } txt='\n'+txts+'.othr{font-size:30px;font-weight:normal;}\n\n'+txt; ftest.innerHTML=txt+''+txt.replace(/'); // ]]> スクリプトのコード <div id="ftest"></div><script>txts='';txt='';f…
どうも!LSSです!! まずはスクショから! めでたく読者数が333人になりました!! ゾロ目来た!! 昨日の夕方の出来事 で、そいつの言う事には そして帰宅後、酔眼朦朧としながら んで、結局… 昨日の夕方の出来事 遠方に住んでいた友人が、神戸に戻ってきているという連絡がありました。 「んじゃ、呑みにいくか!」って事で、突然の二人飲み会! と、その前に散髪に行こうと思ってたんですが、いつもの散髪屋が18時閉店になってて行けず^^; 三宮をブラブラしながら、友人の到着を待ち、合流。 どこの店に行こうか…と迷いつつ、結局いつもその友人が帰って来た時に行くお店に落ち着きましたw 焼鳥 さむらい 東門…
どうも!LSSです!! 昨日の記事、 に続き、さらなる応用編です^^ きんきらきんのきーん 戦慄! コード解説 きんきらきんのきーん 戦慄! 昨日の記事のコメント欄で きんきらきんのきーん Little Strange Software コード <p style="background-color: gray; border-radius: 15px; border: 15px inset #dddddd; text-align: center;"><span style="font-size: 50px; font-weight: bold; color: gold; background-…
どうも!LSSです!! 結構前に、「CSSでグラデーションする文字」を「下書き供養祭」としてネタにしました。 あの時はまだ「どうしてそうなるのか」イマイチ分からないままだったので「下書き供養」としましたが、ちょっと分かった気がしたので、再度ネタにしてみます! ↓こんなのを作ってみました。 Little Strange Software コード コード解説 文字の基本設定部分 グラデーションを「背景として」 指定する部分 大技!「背景を文字の形に繰り抜く」部分 改変例 コード <span style="font-size: 50px; font-weight: bold; color: ligh…
どうも!LSSです!! 最近のアニメはあまり見ていないのですが(TV自体ほとんど見なくなってますw)、昔、古いアニメを再放送などで好んで見ていた時期がありました。 中でも、どこかしらぶっとんだ、個性的なものが好きで(これはアニメに限らずですが)、そういう琴線に引っかかったアニメをみているうちに「ある共通点」に気づいた事があります。 個性的な古いアニメに見出した共通点 ナック制作アニメ(の一部) ダメおやじ まんが水戸黄門 チャージマン研 個性的な古いアニメに見出した共通点 「ダメおやじ」「まんが水戸黄門」などを見ていて、ふと気づいた事があります。 OPやEDに出てくるクレジット 制作 ナック …
どうも!LSSです!! 適当に間をあけながらの「はてなブログで始める!JavaScript超入門!」、今回は第四回となります。 このシリーズは「はてなブログの記事編集画面を使って、プログラムを全くやった事がない人でもプログラミングに触れてみよう」というニッチな趣旨でお送りしておりますw なお、前回までは、 第一回第一章 Hello World第二章 変数を使ってみよう!第三章 計算ぐらいしておこうか 第二回第四章 ifによる分岐第五章 ifのもうひとつのしきたり 第三回第六章 乱数で遊んでみよう! という内容でお送りしました。 第七章 関数を作って、呼び出してみよう さて、早速ですが、この一行…
どうも!LSSです!! もう結構前から、「マインクラフト」というゲームにハマっています。 何度か記事ネタにもしましたが、今回は「マインクラフトってこんなゲーム」という紹介記事になります。 ゲーム開始直後 ゲームの目的 採集 時間の流れ 初心者殺しの夜 デスペナルティ 初心者向け夜対策 開始から13分の間に、安全地帯を作ってそこに籠る ベッドを作る 2つの異世界 ネザー エンド ゲームクリアまでの流れ その他の要素 海底神殿 洋館 様々な環境で遊べます ゲーム開始直後 マインクラフトを起動し、「新しく世界を作る」で世界を生成して開始した直後の様子が↑の画像になります。 マインクラフトの「世界」は…
【JavaScript】落ち物パズル制作 その5【コマ移動を滑らかに】
どうも!LSSです!! あまり大きくは変わっていませんが、落ち物パズルにちょっと手を加えました。 こんな感じ 変更点 ゲームオーバー時に、モード選択画面に戻れるようにしました コマの動きを滑らかにしました あと、消しの演出のためにコードを見直したんですが こんな感じ // '; txt+='スコア:'+scr+' 花:'+fws+''; txt+='モード選択に戻る'; g2.innerHTML=txt; }else{ kminit(); gamen_w(); kmv(); } } } function tms(){//タイマースタート tm=setInterval("tmc()",200);…
どうも!LSSです!! 一応、節目はおさえておこう、と思っていましたが…このブログ、先日「記事数300突破」「ブログ日数300突破!」を達成していましたw 300記事めの投稿 300日めの投稿 セルフお祝い 300記事めの投稿 今で310記事って事は逆算すると…↑これってことになりますね。 いかにもLSSらしいというか、実は汎用性あるけど、それを語り切れていない感じの記事でしたw (例えば落ち物パズルの、赤いコマなら「白→赤」、黄色いコマなら「白→黄色」みたいに個別に用意しなくても、「白→透明色」を背景色と別に指定する事で各色ごとに面倒なグラデ指定を書かなくて済む、って言いたかったのですw) …
どうも!LSSです!! 昔、「連鎖のある落ち物パズルは、連鎖のキマった時の爽快感も重要なウリだなぁ」と、ぼんやり考えていた事を思い出しました。 今、落ち物パズルを作っていますが、かつてそう考えていた事もあって、連鎖を意識した作りになっています。 が、果たして実際に連鎖がキマった時に爽快感はあるのか? それを試すために連鎖を組むのは結構大変なので、試しに最初から連鎖が発生するように積み上げられた状態で始まるイカサマモードを用意してみましたw ※ルール説明 あるコマを中心として、上下左右隣の4マスを「中心とは異なる、4つ同じ色」のコマで囲んだ時にコマが消滅してスコアが加算される、という落ち物パズル…
【JavaScript】落ち物パズル「泡」【さじさんver】
どうも!LSSです!! 落ち物パズルシリーズ、今回は番外編! 大幅に雰囲気の変わったゲームをお楽しみください^^ 落ち物パズル「泡」 ルール Designed by id:conasaji コード 消し判定について解説します 挙動の変更 謝辞 余談 落ち物パズル「泡」 // '; txt+='スコア:'+scr+' 泡:'+fws; g2.innerHTML=txt; }else{ kminit(); gamen_w(); kmv(); } } } function tms(){ tm=setInterval("tmc()",200); } function rakka(){ while(ma…
どうも!LSSです!! 今、立て続けに記事投稿している落ち物パズルにも、まだ腹案はありますが、その他にもぼんやりと考えているゲーム案がいくつかあります。 なんとなく、それらを書き出しておきます。 記憶力に挑戦するゲーム もうちょっとマトモなタイピングゲーム 文明発展系?シミュレーション 読者さんがステージを作れるゲーム そんな感じで 記憶力に挑戦するゲーム 昔々、LSIゲームで遊んだ記憶があるのですが、3×3の光るボタンがある筐体。 そのうちのひとつが発光し、音がなります。(9つのボタンそれぞれで違う音が鳴る) その発光したボタンを押すと、次は1回目のボタンがまた光って音が鳴ったあとに続けて、…
どうも!LSSです!! 昨日はわけの分からない記事を投稿しましたが、今日はどうでもいい話をしますw 最近の昼食事情 ビフォー緊急事態宣言 イン緊急事態宣言 アフター緊急事態宣言 スーパーカップ1.5倍 ブタキムラーメン・100円のサラダ・ドレッシング・チョコクロワッサン! そして、気づいてしまったのです… とはいえ… 最近の昼食事情 土日祝は休み、平日は出勤、という至って平凡なサラリーマンをやっています。 12時から1時間、昼食休憩があるのですが、ごく最近、その内容が大きく変化しました! ビフォー緊急事態宣言 勤めている職場が、なんともビミョーな位置にあり、周辺に飲食店もコンビニもあるものの、…
【JavaScript】落ち物パズル制作? その4.5【コードと部分的な解説】
どうも!LSSです!! 作り始めてから一週間ほどで、ひとまずゲームとして遊べる形になりました^^ 今回はその時に省略したコードの紹介と部分的な解説になります。※つまり、わけわからん事を書きますwww コード全文 functionの役割 このコードで使っている関数とその役割 function tmc() function tms() function rakka() function gamen_i() function gamen_w() function kmv() function kminit() function kensa() 消し判定の一部を書き換えるだけで別ルールが実現 コード全…
どうも!LSSです!! 近頃とりくんでいた落ち物パズル、ひとまずゲームとしての体裁をとるところまでいきました^^ 始めたのはいつだっけ?と見返すと、 ちょうど一週間前でしたね。 現時点での最新版は になります。 体裁はとれたものの、一応まだ未完成扱い。 なので、カテゴリも「HTMLなど」のままで、「もうこれで完成!」って段階になったら「ブラウザゲームそのままプレイ」の方に最終版を入れようと思います^^ 落ち物パズルのプログラミングは初めての試みでしたが、「下限到達判定が面倒くさそう」「ルールに基づく消滅判定が面倒くさそう」「消滅後の落下処理が面倒くさそう」…という、やってみる前から「面倒くさそ…
【JavaScript】落ち物パズル制作? その4【消し実装!】
どうも!LSSです!! こんな感じ 遊び方 スコアについて 落とす 花の完成 花を2つ同時に完成 花完成、消滅後に、落ちてきたコマによって再度花が完成 イージーモードについて コードや解説は後ほど こんな感じ // '; txt+='スコア:'+scr+' 花:'+fws; g2.innerHTML=txt; }else{ kminit(); gamen_w(); kmv(); } } } function tms(){ tm=setInterval("tmc()",200); } function rakka(){ while(masu[mx][Math.floor(my/sz)+1]==0…
どうも!LSSです!! 完成まで作るのかどうだか未定だった「落ち物パズル」制作ですが、どうもここまで来たら完成させたくなってきた今日この頃ですw 第一回 第二回 に続き、今回で3回目となります! 今回もまだ「消し」の部分作成には至っていませんが、それ以外の操作部の追加とデザインの調整を行いました! 今んとこ、こんな感じ 追加変更点 コマ色指定部分のCSS 落とす、の処理 謝辞 コード全文 今んとこ、こんな感じ // ここをクリックしてスタート!'; gamen.innerHTML=txt; } function gamen_w(){ txtn='NEXT→'+mz_n+''; gn.inner…
どうも!LSSです!! ちょっとCSSやゲーム制作の話が続いたので、今回は息抜き記事ですw 「オセロ」ってゲーム、ありますね。 あの8×8の盤面に、片面白・片面黒のコマを交互に置いて、挟む事でひっくり返し、最終的に数が多い方が勝ち、というゲーム。 「オセロ」という名称はツクダオリジナルの商標なので、差支えがある場合「リバーシ」って名前で同ルールのゲームだったりもします。 今回はそのリバーシがちょっとだけ強くなるかも知れない話です^^ とにかく角取り!から一歩前進 角をとるために意識すべき事 角以前に狙うべきマス 避けるべきマス つまり… 本当に強い人、深く研究してる人の世界は知りませんが とに…
どうも!LSSです!! 最近、巷に出回っている「ブロガーバトン」、LSSのとこにも回ってきました! そう、2本目です!! あやのん様、ありがとうございます^^ バトン(前回と同じものです) バトンにかこつけた、紹介したかったブログ紹介記事 あやのん様、ありがとうございます^^ 今回、バトンをくださったのは、あやのんさん(id:seleneselene) 普段は低コストかつ簡単レシピ記事を毎日書いておられる方です^^ …実は以前から、あやのんさんのブログは是非他の方にもオススメしたい!と思っていました!! 料理ブログじゃなくてもたまに料理に挑戦されてその記事を書かれる方(LSSも少し書いてました…
どうも!LSSです!! 今回は、円形グラデーションと、CSSの色指定を組み合わせた小ネタです。 サンプルとコード サンプル コード 今回のネタの趣旨 RGBでの色指定を半透明にする方法 円形グラデーションに話を戻すと そんな効果を、落ち物パズルの背景とコマにかけてみると サンプルとコード サンプル ああああいいいいい コード <div style="background-color: red; background-image: radial-gradient(circle at 70% 30%,#ffffffd0,transparent); width: 200px; height: 150…
「ブログリーダー」を活用して、LSSさんをフォローしませんか?
指定した記事をブログ村の中で非表示にしたり、削除したりできます。非表示の場合は、再度表示に戻せます。
画像が取得されていないときは、ブログ側にOGP(メタタグ)の設置が必要になる場合があります。