JavaScript でオセロを実装する(本格AI作成編) | Webシステム開発／教育ソリューションのタイムインターメディア
これまでのあらすじ 一人二役の寂しいオセロから脱却すべく、オセロの対戦が務まるAIの作成を始めた。 しかし、一通り動きはするものの、このAIは形勢判断を全くせずにテキトーに手を選んでいるだけなので非常に弱い。 なので少しは歯ごたえのあるまともなAIを作ろうと思うのであった。 どうすればまともなAIになるのか 前回作成したAIは 取り得る手のうち最も上の行に石が置ける手を選ぶ。同一行に指せる手が複数あるなら最も左の列に石が置ける手を選ぶ。 という単純な実装でした。これには 二つ問題 があります。 各手の価値を全く考慮していません。 本来ならばどの手が最も勝利に近付くものなのかを判断すべきです (「左上に置ける手ほど価値が高い」という誤った判断基準で動いているとも言えます)。現在指せる手しか調べていません。 本来ならば先の先を読むべきです。 オセロは最終的に石の数が最も多いプレイヤーが勝利する
JavaScript でオセロを実装する(原始モンテカルロAI編) | Webシステム開発／教育ソリューションのタイムインターメディア
以前、オセロの対戦AIの作成しましたが、そこでは実装を簡略化する為に盤面の価値を 盤面の価値 = 自分の石の数 – 相手の石の数 という単純な方法で決めていました。 でも、これには問題があります。 同じ石でも配置場所によって価値は異なるはずです(例: 角は最強)。それが考慮されていません。ゲーム終盤になってくると石の数が重要になってきます。でも序盤から石の数を重視するのは方向性としておかしいです。 という訳で、 序盤から中盤では石の配置場所を重視する終盤では石の数を重視する 形で盤面の価値を算出すれば、結構良さそうなAIになりそうです。 しかし、今度は 「序盤」「中盤」「終盤」をどのように区別するのか?石の配置場所の強弱はどう決めるのか?同じ配置場所でも周囲の状況次第で強弱が異なるのでは? という問題が出てきます。これは作るのが面倒臭そうです。 どうにかしてお手軽かつそこそこ強そうなAIを
Anime.js | JavaScript Animation Engine
All-in-one animation engine. A fast and versatile JavaScript library to animate the web.
「HTML5による物理シミュレーション【拡散・波動編】」出版決定（発売日：2013年5月25日）
特定非営利活動法人natural science は、知的好奇心がもたらす心豊かな社会の創造にむけて、 現代社会では実感する機会の少ない科学や技術のプロセスを可視化・共有化する場づくりを通じて、 科学を切り口とした地域づくりを目指す、若手主体の団体です。 | More ≫ HTML5による物理シミュレーション【拡散・波動編】 JavaScriptライブラリとCanvas 2D Context/Web Workersを使う 著者 遠藤 理平 出版社 株式会社カットシステム 発売日 2013年5月25日 判型 B5変型判、456頁 税込価格 4,410円（本体4,200円） ISBN 978-4-87783-312-1 最新のthree.jsで利用するために必要な変更点をまとめました：three.js仕様変更による変更点（PDF） フジテレビ月９ドラマ【ガリレオ】HTML5による物理シミュレー
HTML5による物理シミュレーション環境の構築 ～WebGLライブラリThree.js 入門（３／３）～
本稿では新しいWEBページ用の言語であるHTML5＋WebGLを利用して、 ウェブブラウザ上で、物理シミュレーションの計算と描画をリアルタイムに実行する「物理シミュレータ」の作成までの手順を記述します。 本稿では、物理シミュレータの例として、任意の初期条件に対する２重振り子の時間発展を４次のルンゲクッタ法を計算する「２重振子シミュレータ」を構築します。また、本稿では WebGL を簡単に利用することができるWebGLライブラリとして著名な Three.js を用いています。 物理や工学とは無関係に、初めて Three.js を利用する人がチュートリアルとしても利用できることも意図しております。 パート１では、主に Three.js の使い方について触れました。 パート２では、拘束力のある運動の代表例である単振子を取り上げ、物理演算結果のリアルタイム描画＋物理量の時間発展の様子をグラフ化しま
HTML5による物理シミュレーション環境の構築 ～WebGLライブラリThree.js 入門（２／３）～
本稿では新しいWEBページ用の言語であるHTML5＋WebGLを利用して、 ウェブブラウザ上で、物理シミュレーションの計算と描画をリアルタイムに実行する「物理シミュレータ」の作成までの手順を記述します。 本稿では、物理シミュレータの例として、任意の初期条件に対する２重振り子の時間発展を４次のルンゲクッタ法を計算する「２重振子シミュレータ」を構築します。また、本稿では WebGL を簡単に利用することができるWebGLライブラリとして著名な Three.js を用いています。 物理や工学とは無関係に、初めて Three.js を利用する人がチュートリアルとしても利用できることも意図しております。 パート１では、主に Three.js の使い方について触れました。 パート２では、拘束力のある運動の代表例である単振子を取り上げ、物理演算結果のリアルタイム描画＋物理量の時間発展の様子をグラフ化しま
HTML5による物理シミュレーション環境の構築 ～WebGLライブラリThree.js 入門（１／３）～
HTML5とWebGL 初めにHTML5の位置づけについて簡単に触れます。HTML5とはこれまでのWebページ作成言語で主流だったHTML4やXHTMLの後継言語のことで、 2008年に草案がまとめられ、2014年までにウェブブラウザ各社への正式勧告を目指して策定が進められています。 HTML5は 2012年1月でもまだ「草案」段階で、仕様も流動的な準備段階であるが、開発側からもユーザ側からも非常に注目が集められています。 その大きな理由の一つに挙げられているのが、iPhoneやAndroidなどのスマートフォンの台頭による情報端末の多様化への対応のためです。つまり、様々なWEBコンテンツのクロスプラットフォーム化への重要な貢献が期待されているからです。 というのもスマートフォンの登場までは、Adobe社が提供する FLASH が動画やオーディオなどが組み合わされたマルチメディアコンテンツ
Webサイトからプッシュ通知を送ろう！ JavaScriptでのプッシュ通知の実装方法 - ICS MEDIA
スマートフォンアプリではおなじみのプッシュ通知ですが、ウェブサイトからもプッシュ通知できることをご存知でしょうか？ JavaScriptのServiceWorkerとPush APIを使用することで、ウェブサイトからでもスマートフォンアプリと同様にユーザーにプッシュ通知を送ることができます。また、モバイルだけでなくデスクトップでも通知を行うことができるため、ユーザーエンゲージメントの向上の手法として有効です。 プッシュ通知のデモ プッシュ通知を行う簡単なサンプルを用意しました。Chrome 42以降のブラウザで確認してください（2018年3月現在のChrome 65で動作することを確認しています）。 「プッシュ通知の配信設定」のトグルを選択すると、「cURLコマンド」のボックスにコマンドが生成されます。このコマンドをMacをお使いの方はTerminal上から実行してください。Windows
jQuery Rippleria
jQuery Rippleria A lightweight yet customizable jQuery plugin for implementing Material Design inspired ripple click / tap effects. Download .zip Download .tar.gz View on Github Installation bower i -S rippleria <head> ... <link rel="stylesheet" href="/bower_components/rippleria/css/jquery.rippleria.min.css"> </head> <body> ... <script src="//code.jquery.com/jquery-2.1.4.min.js"></script> <script
Web Audio APIを恐ろしく簡単にする「Tone.js」で音楽プログラミングを試してみた！ : うえぶはっく
「Web Audio API」を使うと音声の「再生」だけでなく、音の「生成」や「加工」などもJavaScriptだけで手軽にプログラミングすることが出来るようになります。 ただ、ちょっとクセがあるので「扱いにくい…」と感じる人も少なくないでしょう。 そこで、誰でも簡単に「Web Audio API」を活用できるJavaScriptライブラリ「Tone.js」について、今回は簡単なサンプルと共にご紹介しようと思います！ ファイルを準備しよう！ まずは、「Tone.js」を使ったサンプルを作るのに必要な「index.html」と「app.js」を用意しましょう。 「Tone.js」自体は、GitHubからダウンロードするか、以下のURLから利用可能です。 https://tonejs.github.io/build/Tone.min.js ひとまず、「index.html」はこんな感じでOKで
Google Calendar APIをJavaScriptで使う - Qiita
var clientId = '準備したClientID'; var apiKey = '準備したAPI key'; // とりあえず、怖いので、カレンダーを読むだけの設定 // https://www.googleapis.com/auth/plus.meは不要かも。。 var scopes = ['https://www.googleapis.com/auth/plus.me', 'https://www.googleapis.com/auth/calendar.readonly']; function handleClientLoad() { // 予めAPI Consoleで設定したAPIキーを設定 gapi.client.setApiKey(apiKey); // すでに認証済みかの確認をする。 window.setTimeout(checkAuth,1); } function
Cannon.js
A physics engine, written in JavaScript For your browser-based game.
three.jsの三次元物理演算プラグインPhysijsを使ってみた。 | KnockKnock
今回はthree.jsの三次元物理演算プラグインのPhysijsを使用して、ジャンプ台や、デコボコ道を通る、オフロードレースゲームサンプルを作成しました。 PhysijsはChandlerPrall氏による作成されたthree.jsの物理演算用のプラグインです。内部でammo.jsという物理演算ライブラリを使用していて、ammo.jsとthree.jsを簡単に連携させることができるようになっています。ammo.jsはBulletという有名なオープンソースの物理演算エンジンをJavaScriptに移植したものです。 Physijs このPhysijsを利用して、オフロードレースゲームのサンプルを作成しました。まずはサンプルをご覧ください。 ソースコード ※操作方法 : 前進「↑」キー、後退「↓」キー、旋回「←→」キー、カメラアングル切り替え「スペース」キー ※WebGLを使用したデモなのでC
Record audio and video with MediaRecorder | Blog | Chrome for Developers
Break out the champagne and doughnuts! The most starred Chrome feature EVER has now been implemented. Imagine a ski-run recorder that synchronizes video with GeoLocation data, or a super-simple voice memo app, or a widget that enables you to record a video and upload it to YouTube — all without plugins. The MediaRecorder API enables you to record audio and video from a web app. It's available now
大型フロントエンド開発におけるTypeScriptとDDD // Speaker Deck
All slide content and descriptions are owned by their creators.
君はHTML5の contentEditable 属性を知っているか ｜ Tips Note by TAM
知っている方には、すみません。 HTML5 には contentEditable という属性がありまして、この値が true だと、その要素はブラウザ内で編集可能となります。 ちょっと試してみましょう。 <div contentEditable="true">ここは編集できる</div> ↑ ここは編集できるのです。(ただの <div> 要素なのですが！) 編集内容はどこかに保存されるわけではないので、ブラウザをリロードすれば元に戻ります。 body要素に contentEditable 属性をつけてみる さきほどのボタンでは、クリックすると JavaScript が実行され、<body> 要素の contentEditable 属性を変更しています。結果、ブラウザで表示されるすべてが編集可能になるのです。 JavaScript コードはこんなかんじ。 javascript:(functi
Spirit - The animation tool for the web
SpiritThe ultimate tool to create high-quality animations directly in the browser. Important Notice: I want to extend my deepest gratitude to everyone who has supported Spirit over the years. After careful consideration, I have made the difficult decision to discontinue Spirit as a service. Read more ...
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryで設定されたクリックイベントなどを定義している場所を調べる方法 - Qiita
MediaStream Recording
nifty.com [17]![nifty.com [17]](https://cdn-ak-scissors.b.st-hatena.com/image/square/deab586eec9ceca8c1925abdba4f907206b839e7/height=288;version=1;width=512/http%3A%2F%2Fblog.mb.cloud.nifty.com%2Fwp-content%2Fuploads%2F2015%2F02%2F26_chandlerprall_github_io.jpg)
