[JavaScript] 不思議なダンジョン迷路をHTML+JavaScriptで作る - YoheiM .NET
こんにちは、@yoheiMuneです。 今日は、生成するたびに変化する迷路をJavaScriptで作ってみたいと思います。 完成版はこちらです 今回作成した迷路は、以下のGithubにアップしています。気になった方はご参照いただけたら幸いです。 ソースコード - maze.html - maze1.js サンプルアプリケーション http://yoheim.net/work/01_maze/maze.php 迷路の作り方 迷路の作り方はいろいろとあるみたいですが、今回は比較的簡単な「棒倒し」というアルゴリズムでの迷路作成を行いました。 棒倒しの考え方については以下のサイトがわかりやすかったので、そちらをご参照ください。 - 迷路自動生成アルゴリズム 迷路の作り方（JavaScript編） 上記の内容をHTMLとJSで表現したいと思います。JavaScriptについては150行もないくらいで
![[JavaScript] 不思議なダンジョン迷路をHTML+JavaScriptで作る - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/d2db3c452c75bf2563596e363c4cb9e8394a7ee1/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F385.jpg)
phiary
phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python 備忘録. スペニット的に使ってもらえれば幸いです. DOM 要素の絶値座標を取得する element.scrollTop とかだと親からの相対値になっちゃいます. getBoundingClientRect() を使えば絶対座標を取得できます. window.onload = function() { var element = document.getElementById('hoge'); // hoge というIDがついたやつを取得する var rect = element.getBoundingC
ゲームの会話シーンを簡単実装できる JavaScript ライブラリ「MessageViewJS」を公開しました！
どもです。 先日、MacBookPro15インチ上位モデルを購入しまして、ウキウキで今回もそれについて書こうかと思いましたが、やっぱりやめました。w と。なんとなく、オープンソースってやつ、やってないなと思って作ってみました。 （なんかモテると噂で聞いたのでw あ。嘘です。） iPhoneアプリとかのゲーム内でもよくある会話シーン。 こんな感じの会話シーンがあるかと思うのですが、これをhtml、JavaScriptで簡単実装できる、JavaScriptライブラリです。 その名も「MessageViewJS」 Github https://github.com/webcyou/MessageViewJS デモページ http://webcyou.com/message_view_js/demo/ 会社でも色々と作らさせていただいておりまして、公開したいなーと思っているのが、特許を取ってしまっ
JavaScript書けない人間が1年間でフロントエンドエンジニアになった話 - DMM.comラボ デザイナーズブログ
こんにちは、デザイン部所属の石橋です。 今はデザイナーをやりつつフロントエンドエンジニアをさせてもらってます。 そんな自分は2014年の5月にDMM.comラボへ来たんですが、入社時のスペックを以下に記します。 入社時のぼく HTML出来ます！（ただし<section>の使い方はぼんやり） CSS出来ます！（ただしスタイリングだけで設計は出来ない） jQuery出来ます！（ただし既存プラグイン実装に限る） おや…？ 「（フロントエンドってなんだろう…）」 「（JavaScriptとjQueryって何が違うんだろう…）」 やばい。 当時はいわゆる「コーディングがちょっとだけ得意なWebデザイナー」でした。 シンデレラストーリー プロローグ 弊社では一部のデザイナーも結構ガリガリとコーディングをするのですが、 入社時にまわりの能力の高さにちょっと本気で「ヤベェ所に来てしまった…」感がありました
Google Analytics API と JavaScript クライアントを使って人気記事ランキングを作る Web サービスを作ってみた - しばやん雑記
2014 年も終わりなので Google Analytics API を使ってアクセス数の多いページを取得してみた - しばやん雑記 を今年最後にしようと思ったんですが、アクセス数の多い記事の情報を JavaScript と OAuth 2 でも取れるのではないかと思ったので、実際にサービス化してみました。 2017 年の人気記事ランキング生成 使い方は単純で、OAuth 2 でログインしてドロップダウンから取得したい Web プロパティを選択し、生成ボタンをクリックするだけで終わりです。 数秒後には実行結果がはてな記法、HTML、Markdown で出力されるので、適当に再利用してください。 実装の話 Google API を JavaScript から使う場合にはライブラリを読み込みます。API キーにだけ注意。 <script> var apiKey = '公開 API へのアクセス
非実在小学4年生の謝罪ページのJSを読む - そんな今日この頃でして、、、
方々で話題の非実在小学4年生が作ったサイト。 どうして解散するんですか？ 【顛末追記】小4『どうして解散するの？サイトつくったからおしえて』民主くん『天才少年現る！』→仕込みっぽすぎて炎上 ➡結果NPO運営でした - Togetterまとめ 稚拙な手法であえなく炎上→謝罪と相成ったわけですが、謝罪文がまた上から目線で再炎上してるあたりが様式美ですね。 しかも、それだけじゃまだ燃え足りないのかJavascriptに本文を消す細工があった模様。 某小 4 のアレ、なんかカウントダウンに変わっていたので JS 眺めてみたけど、明日の 0:00 になったら謝罪文も消す、って仕組みか。 pic.twitter.com/bHTcTmUxbe— KOMIYA Atsushi (@komiya_atsushi) November 22, 2014 そんなわけで0時を回り、ワクワクしながらサイトを開くと・・
Fetch as Google でページをレンダリングできるようになりました
+1 ボタン 2 AMP 11 API 3 App Indexing 8 CAPTCHA 1 Chrome 2 First Click Free 1 Google アシスタント 1 Google ニュース 1 Google プレイス 2 Javascript 1 Lighthouse 4 Merchant Center 8 NoHacked 4 PageSpeed Insights 1 reCAPTCHA v3 1 Search Console 101 speed 1 イベント 25 ウェブマスターガイドライン 57 ウェブマスタークイズ 2 ウェブマスターツール 83 ウェブマスターフォーラム 10 オートコンプリート 1 お知らせ 69 クロールとインデックス 75 サイトクリニック 4 サイトマップ 15 しごと検索 1 スマートフォン 11 セーフブラウジング 5 セキュリティ 1
PhantomJS でログインが必要なページでも自由自在にスクレイピング - 凹みTips
はじめに PhantomJS - Scriptable Headless Browser PhantomJS はヘッドレスな（ブラウザ画面のない）QtWebKit ベースのブラウザで、JavaScript の API を通じて、そのブラウザを自由自在にあやつることが出来ます。使用シーンとしては、Jenkins などの CI ツールとの組み合わせによる Web ページの GUI の自動テストや、Web ページのスクリーンキャプチャ、スクレイピングなどが挙げられます。 今回は、ログインが必要なページの情報をパースして自分専用に RSS 化したいなと思い、３つ目のスクレイピング用途をベースに調べてみました。その内容を備忘録として残しておきます。 出来るようになること ログインが必要なページの HTML を取ってくる ログインが必要なページのスクリーンキャプチャを撮る PhantomJS の導入
初心者のコーダーでも簡単に実装出来るJavaScript/jQuery Tips
こんにちは、鴨田です。 今更感はすごくあるとは思いますが、 コーダー初心者でも簡単なJavaScript/jQueryのコードで、 ちょっとした運用を楽に出来るTipsを紹介したいと思います。 １．現在見ているページのナビゲーションをアクティブにする JS if (document.URL.indexOf("001.html") != -1) { $("nav a.top").toggleClass("on"); } else if (document.URL.indexOf("002.html") != -1){ $("nav a.list").toggleClass("on"); }
実際のサイト上で動作するチュートリアルが簡単に作れるIntro.jsが便利すぎる件 - (ﾟ∀ﾟ)o彡 sasata299's blog
2013年05月08日18:21 JavaScript 実際のサイト上で動作するチュートリアルが簡単に作れるIntro.jsが便利すぎる件 さて、先日簡単なチュートリアル作ろうと思ったんですが、どうやるのが良いのかなーと思って悩んでました。キャプチャ取ってそこに説明文を書いて…ってしてもいいんですけど、キャプチャだと一部分なのでサイト上のどの辺なのかわかりにくかったり、サイト側は変更したのにキャプチャが古いままとかになったりしちゃいますよね＞＜ とか思って探してみたらこちらの Intro.js が便利だったので紹介してみます。 さて、この Intro.js を使うとですね、サイト上で動作するチュートリアルを簡単に作れるんですよ。使い方も簡単で、動作させたい要素に対して data-intro (表示する説明文) と data-step (チュートリアルの何番目に表示するか) を指定します。チ
これは凄い。JavaScriptで作られたPHP VM·php.js MOONGIFT
php.jsはJavaScriptで作られたPHP VMです。PHPコードをJavaScriptに変換して実行します。 世の中には色々変わったことを考える人がいます。Webブラウザでデフォルトで実行できるプログラミング言語がJavaScriptだけなんて許しがたい、そう考えたPHPプログラマーが生み出したのがphp.jsです。その名の通り、PHPの実行エンジンをJavaScriptに実装したというとんでもないソフトウェアになります。 確かに実行できています。PHPのコードからJavaScriptに変換を行っているようです。 配列、クラスさらにvar_dumpまで実装されているのが興味深いです。 かなり突っ込んだPHPの処理もできている模様です。これは面白い。 ダブルクオートの中に変数を入れて普通に出力できているのが興味深いです。 php.jsではPHPのコードがそのまま実行できます（もちろ
JavaScript 言語概要 - JavaScript | MDN
JavaScript チュートリアル 初級編 JavaScript の基礎 JavaScript の第一歩 JavaScript の構成要素 JavaScript オブジェクト入門 JavaScript ガイド 入門編 文法とデータ型 制御フローとエラー処理 ループとイテレーター 関数 式と演算子 数と日付 テキスト処理 正規表現 インデックス付きコレクション キー付きコレクション オブジェクトを利用する Using classes プロミスの使用 JavaScript 型付き配列 イテレーターとジェネレーター メタプログラミング JavaScript モジュール 中級編 クライアントサイド JavaScript フレームワーク クライアントサイド Web API Language overview JavaScript のデータ構造 等値比較と同一性 プロパティの列挙可能性と所有権 クロ
定型メールの送信を自動化する〜GmailとJavaScriptの華麗な連携技（第13回）：クジラ飛行机「仕事に役立つJavaScript入門」（情報元のブックマーク数） - ripjyr's blog
jseで保存して実行したら、自動的にメールを出せるのか？！ ここで紹介するのは、Gmail経由でメールを送信するプログラムです。ですから、Gmailのアカウントを持っていれば、誰でも利用することができます。36行と比較的短いですので、ここで全プログラムを紹介します。 以下のプログラムをテキストエディターに貼り付け「sendmail.jse」という名前で保存してください。そして、プログラム冒頭にあるGmailアカウントとパスワード、送り先メールアドレスの情報を書き換えたら準備完了です（詳しくはこの次の項にある設定のカスタマイズを参照してください）。「sendmail.jse」をダブルクリックするとメールが送信できます。 定型メールの送信を自動化する～GmailとJavaScriptの華麗な連携技（第13回） | 日経 xTECH（クロステック） JavascriptでCDO.Messageコ
[FAQ] include.cgi get.cgi?jsにアクセスするとソースが表示される
visionさん (2011-11-30 12:26:17) https://www.mydomain.co.jp/cgi-bin/mailform-cgi/mailformpro/include.cgi 和田様 すばらしいメールフォームありがとうございます。 表題の件なのですが 「include.cgi」と「get.cgi?js」のパスをブラウザで開くと ソースが見えてしまいます。 こちらを見えないようにする方法はないでしょうか？ サーバー会社：webarena cgiは「cgi-bin」のディレクトリに設置しています。 パーミッション：700（サーバ会社の設定に従い） ▼表示される内容 ●include.cgi document.write(unescape("%3Cinput type=’hidden’ name=’javascript_flag’ value=’1’ /%3E"))
![[FAQ] include.cgi get.cgi?jsにアクセスするとソースが表示される](https://cdn-ak-scissors.b.st-hatena.com/image/square/fc4bf2c72d2cd206957f2c2adf3ab192a1a7ed68/height=288;version=1;width=512/https%3A%2F%2Fwww.synck.com%2Fdocuments%2Fsiteimage.jpg)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Using the command line
長文日記
長文日記
TEST CORDING » Sassの@functionの使い方まとめ – プログラマブルな処理は@function
PC