ブラウザゲームを作ってみよう(その10:サンプルゲーム作成その3)

# はじめに
[その9](https://qiita.com/noji505/items/edb878521df9df0902da)ではゲームのメイン部分の作成を行いました。
今回は前回作成したメイン部分を改善してみたいと思います。

# 改善ポイントについて
色々あると思うのですが、現状のゲームのルールを変えないという前提で改善するとなると、以下のようなものが考えられると思います。

■プレイヤー(雲)の動きが一定速度にしか動かない
■コインの出現タイミングが常に一定
■コインの出現枚数が1枚ずつしか出てこない

上記を改善することで、ゲームにメリハリが生まれると思います。

# 改善してみよう

まずは雲の移動処理を変更します。
ソースコードは以下となります。

“`javascript:雲の移動処理変更

// 変数宣言
var kumoX;
var kumoY;
var spd; // 移動速度
var spdCount; // 移動カウント
var KUMO_WIDTH = 32;
var KUMO_HEIGHT = 16;

// 雲の移動、表示処理

wikiを読むのが憂鬱だったのでヒソカに読んでもらった

# はじめに
wikipedia、読んでますか？

どうも。
最近資格試験にフォーカスしているのですが、wikiを含め難しい記事を参照する機会が増えてきました。

wikiの文って読んでればわかるんですが、
* 長い
* 難しい
* 息苦しい（見やすさのための改行とかない）

って感じでバカほど読みづらいんですよね。
斜め読みマスターの私から申し上げれば非常にめんどくさいです。

ということで、ヒソカさんに読んでいただきました。

# 完成物

なんでこんな忙しいのにおれは「wikiの語尾をヒソカみたいにする拡張機能」を作ってるんだ pic.twitter.com/WORmH7UR0k

— よつ (@yotu_xxx) July 17, 2022

https://github.com/yotuTxT/hisoka_wiki/blob/main/

# 作り方
備忘録も兼ねて作り方を残しておきます。

## ファイル構造
“`
script_name
├ manifest.json
└ script.js
“`

## manifest.json
“`json
{
“name”: “hisoka_wiki”,

RxJS　Observableの流れ

Observableの作成流れ

“`
①Observableを作る(rxjs)
　➡︎const {Observable} = rxjs;

②Observableの処理を作成する(Observable.create)
const aaa = Observable.create((observer) => {
　　observer.next(1);
console.log(‘sample’);
observer.complete();
observer.error(‘error’);
}

③Observableの処理を実行する(subscribe)

aaa.pipe().subscribe((x) => console.log(・・・));
aaa.pipe().subscribe((c) => console.log(・・・));

④Observable処理の取り消し(unsubscribe)
　→subscribe実行で、はじめて処理が実行され、unsubscribeで処理実行が取り消されます。

　　　　　//①を省略、

Reactアプリを作って、v17にダウングレードし、レンタルサーバーにデプロイするまで

# まずは、Reactアプリ作る
アプリを作成し、動作確認する
“`
npx create-react-app プロジェクト名
cd プロジェクト名
npm start
“`
`node.js`や`yarn`、`npm`、`create-react-app`のインストールは[appendix](#Appendix)に。
# 最新はv18になっているので、v17にダウングレード
`package.json`の`dependencies`を修正
“`json:package.json
# 省略
“dependencies”: {
“@testing-library/jest-dom”: “^5.16.2”,
“@testing-library/react”: “^11.2.7”,
“@testing-library/user-event”: “^12.8.3”,
“react”: “^17.0.2”,
“react-beautiful-dnd”: “^13.1.0”,
“react-dom”: “^17.0.2”,
“react-scripts”: “5.

フォーム入力内容を画面に表示させる方法

# はじめに
フォームにテキストを入力して送信後、入力内容を画面に表示させる方法をまとめました。
ご参考になれば幸いです！！！
# 実装コード&結果
今回のメインはJavaScriptなので、htmlの記述は簡易に書いています。
ご了承くださいm(_ _)m

“` index.html

<

Node.js 競プロ 標準入力 メモ

Node.js の標準入力に取り憑かれています。

## 導入

以前も[似たような記事](https://qiita.com/cwd-k2/items/1d8f696161c901775dd4)を書いたのですが、ただの自作モジュールの紹介記事でした。

今回は「競プロっぽい」をテーマに自分が見てきた・考えてきたコード例を載せます。

自分が考えた例には★印を付けておきます。「信用しないでね」の意味です。

何か面白いパターンを思いついたら随時更新する予定です。

## `fs.readFileSync` を利用する例

こちらは変数に標準出力の内容を一度に受けてしまおうというものです。

### `split` して配列を保持する

“`js
const inputs = require(“fs”).readFileSync(“/dev/stdin”, “utf-8”).trim().split(“\n”);

// 1 行目は inputs[0]
// 2 行目は inputs[1]
// …
“`

今日日よく見られるものな気がします。

こちらは、N 行目を得るために

Quagga.js でバーコード読取してみた

# はじめに

自分は以前に Cordova を使って「蔵書台帳」アプリを作りました。このとき
書籍の ISBN のバーコードを読取するのに、Cordova のプラグインを使っていました。
改めて調べてみると、ブラウザ上の JavaScript コードで直接、カメラ画像からバーコードの読取できるんですね。

JavaScript でバーコード読取できるライブラリは幾つもありましたが、これがよさそうでした。

[GitHub – serratus/quaggaJS: An advanced barcode-scanner written in JavaScript](https://github.com/serratus/quaggaJS)
[GitHub – ericblade/quagga2: An advanced barcode-scanner written in Javascript and TypeScript]( https://github.com/ericblade/quagga2)

紹介している記事も多く、幾つか試してみました。

# Quagga.js を使って

10年前のコーダーが、モダンなフロントエンジニアになる話

# はじめに
本記事は
– 業務上レガシーな環境で開発をしている
– モダンな環境でやっていきたいけど何を勉強したら良いかわからない

といった方に向けて、何かの助けになればと書いた記事です。

# 2012年、都内のとある「受託制作会社」

主人公（以下「主」）「またこのタイプのLP制作ですか〜。納期いつなんですか？」

ディレクター「本当に申し訳ないけど、先方都合で今日中で！」

主「（今日中って翌営業日の始業までだから徹夜してやれって事なんだよなぁ）」
主「（今日も徹夜か…）」
主「とりあえずデザイン見せてください。」

ディレクター「ファイ○ースト○ージのURL送るね！」

主「どれどれ。フォトショのバージョン落としてないな…こちとらCS4なんじゃ」

~~ 数時間後 ~~

主「秀○エディター開いて…」
主「XHTMLでっと…」
主「このレイアウトはtableタグで…」
主「この立体的なボタンはいつも使ってるCSSコピペ！」
主「スライダーは、よくわかってないけどjQueryのプラグインで、記述もコピペ！」
主「動くからヨシ！」

~~ 午前4時30分 ~~

主「（なんとか

【2022年最新】Web制作周りを無料で学べる学習サービス集

## はじめに

今回は無料でWeb制作周りの技術を学ぶことができるサービスをまとめました。

これからWeb制作の学習を始めていきたい人やプログラミングの基礎学習をしていきたい人におすすめのサービスなのでぜひ参考にしてみてください。

## この記事の対象者

– プログラミング初心者~中級者
– Web制作を学びたい人
– HTMLやCSSをより深めたい人
– ポートフォリオを作りたい人

## [無料コーディング練習所](https://webdesigner-go.com/coding-practice/)

まずはじめに紹介するのはWebサイトを制作しながらコーディングスキルを身につけることができる[無料コーディング練習所](https://webdesigner-go.com/coding-practice/)です。

![スクリーンショット 2022-07-17 11.46.54.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/065e3099-65db-dba3-424b-

study javascript dya1_1

# 変数と定数
“`
// 変数
let count = 0;
count = 30;
let newCount = 0;
// 定数
const daysInweek = 7;

console.log(count);

let additionResult = 2 + 5;
let result = 5;
result = result + 10;
result += 10;

// result +=1；と同じ意味
// result++;
// ++result;
console.log(result);
“`

RxJS　JavaScriptで　clickイベント記述　比較

“`







BUt