-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsamples.html
501 lines (429 loc) · 16 KB
/
samples.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=0.52">
<title>Scriptorium のプログラム例</title>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#3f51b5">
<meta name="msapplication-config" content="/icon/browserconfig.xml">
<meta name="msapplication-TileColor" content="#3f51b5">
<meta name="theme-color" content="#3f51b5">
<link rel="stylesheet" href="lib/codemirror.css">
<link rel="stylesheet" href="addon/hint/show-hint.css">
<link rel="stylesheet" href="addon/lint/lint.css">
<link rel="stylesheet" href="scriptorium.css">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-GSMVXKGXXR"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-GSMVXKGXXR');
</script>
</head>
<body onresize="Scriptorium.resizeCanvas()">
<header>
<br>
<nav id="nav">
<ul>
<li><input id="filename" spellcheck="false" type="text" value="untitled.js"></li>
<li><a href="./help.html">使い方</a></li>
<li><a href="texteditor.html">HTML エディタ</a></li>
<li><a id="zoom-inout" href="#" onclick="Scriptorium.changeFontSize();">zoom out</a></li>
<li><a href="#"><label for="filechooser">ファイルの読み込み</label></a></li>
<li><a href="#" download="unknown.js" id="downloader">ファイルへ保存</a></li>
<li><a href="./index.html">戻る</a></li>
</ul>
</nav>
<div id="hmenu" onclick="Scriptorium.toggleMenu()">
<span class="hmenu_inner_line hmenu_inner_1" id="line1"></span>
<span class="hmenu_inner_line hmenu_inner_2" id="line2"></span>
<span class="hmenu_inner_line hmenu_inner_3" id="line3"></span>
</div>
<span id="logo">Scriptorium</span>
<a class="logo-info" href="./help.html">使い方</a>
<a class="logo-info" href="https://scriptorium.chibas.net">scriptorium.chibas.net</a>
</header>
<input type="file" id="filechooser" style="display: none;">
<div onclick="Scriptorium.closeMenu()" style="margin-left: 10px; margin-bottom: 0px;">
<div class="helpdoc body-font">
<h1>プログラム例</h1>
<p>動かしたいプログラムを選んだら「選択」ボタンを押します。
ボタンを押すと選ばれたプログラムがページ下部のエディター領域（エディター・ペイン）にコピーされるので、「実行」ボタンを押して選んだプログラムを実行できます。
プログラムを終了するには「停止」ボタンを押します。
</p>
<h3>1 章 1.3 節</h3>
<p>三角形を描きます。</p>
<p><textarea id="code01">
turtle.forward(200)
turtle.right(120)
turtle.forward(200)
turtle.right(120)
turtle.forward(200)</textarea></p>
<h3>3 章 3.2 節</h3>
<p>彗星を描きます。</p>
<p><textarea id="code03">
// 彗星
turtle.speed(5) // 亀の速度を５倍速に
turtle.move(200, 200) // 上側の直線を引く
turtle.up() // ペンを上げる
turtle.move(200, 220) // 亀の位置を下にずらす（線は描かれない）
turtle.down() // ペンを下げる
for (const i of range(5)) { // ここから星を描く
turtle.forward(50)
turtle.left(72)
turtle.forward(50)
turtle.right(144)
}
turtle.move(80, 150) // 下側の直線を引く</textarea></p>
<h3>11 章 1.1 節</h3>
<p>簡単なスロットマシン。クリックすると窓の中の記号の変化が止まります。</p>
<p><textarea id="code11a">
let stage = 0 // 現在の段階（止まった窓の数）
function drawSymbol(x) { // 記号を描く
const dice = Math.random() // 疑似乱数を一つ得る
pro.rect(x - 5, 70, 40, 40) // 四角を描く
if (dice < 0.3) { // 0.3 未満なら
pro.text('☆', x, 100)
} else if (dice < 0.6) { // そうでなくて、かつ 0.6 未満なら
pro.text('○', x, 100)
} else { // それ以外
pro.text('♡', x, 100)
}
}
function draw() {
if (stage < 1) {
drawSymbol(50) // 左端の窓を描き直す
}
if (stage < 2) {
drawSymbol(100) // 中央の窓を描き直す
}
if (stage < 3) {
drawSymbol(150) // 右端の窓を描き直す
}
}
function mouseClicked() { // クリックされたら
stage = (stage + 1) % 4
}
pro.start() // ゲームの開始</textarea></p>
<h3>11 章 11.3 節</h3>
<p>マウスポインタの位置によって 6 つの円の色が変わります。</p>
<p><textarea id="code11b">
function draw() {
pro.background(white) // 背景を白く塗りつぶす
const red = pro.mouseX * 255 / pro.width // 赤の明るさ
const green = pro.mouseY * 255 / pro.height // 緑の明るさ
for (const i of range(6)) {
pro.noStroke() // 線なし
const c = pro.color(red, green, i * 40)
pro.fill(c) // 塗りつぶし色を指定
pro.circle(i * 60 + 30, 100, 15) // 円を描く
}
}
pro.start()</textarea></p>
<h3>13 章 13.3 節</h3>
<p>パドルでボールを打ち返す簡単なゲーム。</p>
<p><textarea id="code13">
// 二つのボール（速度を遅くする）
const ball1 = { x: 200, y: 100, dx: 5, dy: 5 }
const ball2 = { x: 100, y: 300, dx: 3, dy: -5 }
// ボール用の move メソッド
ball1.move = ball2.move = function (pad) {
this.x = this.x + this.dx
this.y = this.y + this.dy
// 左右の壁に当たったときの処理
if (this.x < 0) {
this.x = -this.x
this.dx = -this.dx
} else if (this.x > pro.width) {
this.x = pro.width * 2 - this.x
this.dx = -this.dx
}
if (this.y < 0) {
// 上の壁に当たったとき
this.y = -this.y
this.dy = -this.dy
} else if (this.y > pro.height - pad.height) {
// 下の壁近くに到達したとき
if (pad.x <= this.x && this.x <= pad.x + pad.width) {
// パドルに当たっていれば跳ね返る
this.y = (pro.height - pad.height) * 2 - this.y
this.dy = -this.dy
this.dx = this.dx + (this.x - (pad.x + pad.width/2))/5
pro.beep() // 音を鳴らす
}
}
}
// ボール用の show メソッド
ball1.show = ball2.show = function () {
pro.circle(this.x, this.y, 5)
}
// ボール用の isOut メソッド（ボールが画面外か判定）
ball1.isOut = ball2.isOut = function () {
return this.y > pro.height
}
// パドル
const paddle = { x: 100, dx: 10, width: 100, height: 5 }
// パドル用の move メソッド
paddle.move = function () {
if (pro.mouseX < this.x) {
this.x = this.x - this.dx // パドルを左へ
} else if (this.x + this.width < pro.mouseX) {
this.x = this.x + this.dx // パドルを右へ
}
}
// パドル用の show メソッド
paddle.show = function () {
pro.rect(this.x, pro.height - this.height,
this.width, this.height)
}
// draw 関数の宣言
function draw() {
pro.background(white) // 背景を白く塗りつぶす
paddle.move() // パドルを動かす
paddle.show() // パドルを描く
ball1.move(paddle) // 一つ目のボールを動かす
ball1.show() // 一つ目のボールを描く
ball2.move(paddle) // 二つ目のボールを動かす
ball2.show() // 二つ目のボールを描く
// ボールが下の壁を越えたら終了
if (ball1.isOut() || ball2.isOut()) {
pro.stop() // プログラム終了
}
}
pro.frameRate(20) // 毎秒 20 フレームに設定
pro.start() // 動画の開始</textarea></p>
<h3>15 章 15.2 節</h3>
<p>ブロック崩し風のゲーム。</p>
<p><textarea id="code15">
// 二つのボール（速度を遅くする）
const ball1 = { x: 200, y: 100, dx: 5, dy: 5 }
const ball2 = { x: 100, y: 300, dx: 3, dy: -5 }
// ボール用の move メソッド
ball1.move = ball2.move = function (pad) {
this.x = this.x + this.dx
this.y = this.y + this.dy
// 左右の壁に当たったときの処理
if (this.x < 0) {
this.x = -this.x
this.dx = -this.dx
} else if (this.x > pro.width) {
this.x = pro.width * 2 - this.x
this.dx = -this.dx
}
if (this.y < 0) {
// 上の壁に当たったとき
this.y = -this.y
this.dy = -this.dy
} else if (this.y > pro.height - pad.height) {
// 下の壁近くに到達したとき
if (pad.x <= this.x && this.x <= pad.x + pad.width) {
// パドルに当たっていれば跳ね返る
this.y = (pro.height - pad.height) * 2 - this.y
this.dy = -this.dy
this.dx = this.dx + (this.x - (pad.x + pad.width/2))/5
pro.beep() // 音を鳴らす
}
}
}
// ボール用の show メソッド
ball1.show = ball2.show = function () {
pro.circle(this.x, this.y, 5)
}
// ボール用の isOut メソッド（ボールが画面外か判定）
ball1.isOut = ball2.isOut = function () {
return this.y > pro.height
}
// パドル
const paddle = { x: 100, dx: 10, width: 100, height: 5 }
// パドル用の move メソッド
paddle.move = function () {
if (pro.mouseX < this.x) {
this.x = this.x - this.dx // パドルを左へ
} else if (this.x + this.width < pro.mouseX) {
this.x = this.x + this.dx // パドルを右へ
}
}
// パドル用の show メソッド
paddle.show = function () {
pro.rect(this.x, pro.height - this.height,
this.width, this.height)
}
// ブリックとボールの当たり判定をする hits メソッド
ball1.hits = ball2.hits = function (brk) {
return this.hitsSide(brk, 0) ||
this.hitsSide(brk, BRICK_HEIGHT)
}
// ブリックの辺 (side) とボールの当たり判定をする hitsSide メソッド
ball1.hitsSide = ball2.hitsSide = function (brk, yOffset) {
return pro.crossing(this.x, this.y,
this.x - this.dx, this.y - this.dy,
brk.x, brk.y + yOffset,
brk.x + BRICK_WIDTH, brk.y + yOffset)
}
// ブリック
const BRICK_WIDTH = 40 // ブリックの幅
const BRICK_HEIGHT = 10 // ブリックの高さ
const allBricks = [] // 空の配列
const brickShow = function () {
if (this.visible) {
pro.rect(this.x, this.y, BRICK_WIDTH, BRICK_HEIGHT)
}
}
const brickCheckHit = function (b1, b2) {
if (this.visible) {
if (b1.hits(this) || b2.hits(this)) {
pro.beep(880)
this.visible = false
}
}
}
for (const i of range(6)) {
for (const j of range(3)) {
const brick = { x: 10 + i * 60, y: 50 + j * 20,
visible: true } // オブジェクトを一つ作る
brick.show = brickShow // brick に show メソッドを加える
brick.checkHit = brickCheckHit // brick に checkHit メソッドを加える
allBricks.push(brick) // brick を配列に加える
}
}
function numOfBricks(bricks) {
let sum = 0 // 変数 sum の値は最初 0
for (const i of range(bricks.length)) {
const b = bricks[i]
if (b.visible) { // まだ消えていなければ
sum = sum + 1 // sum を 1 増やす
}
}
return sum // 最終的な sum の値が戻り値
}
// draw 関数の宣言
function draw() {
pro.background(white) // 背景を白く塗りつぶす
paddle.move() // パドルを動かす
paddle.show() // パドルを描く
ball1.move(paddle) // ball1 を動かす
ball2.move(paddle) // ball2 を動かす
// どちらかのボールがブリックに当たったらブリックを消す
for (const i of range(allBricks.length)) {
const brick = allBricks[i] // i 番目のブリック
brick.checkHit(ball1, ball2) // ボールが当たったら消す
brick.show() // ブリックを描く
}
ball1.show() // ball1 を描く
ball2.show() // ball2 を描く
// ボールが下の壁を越えたら終了
if (ball1.isOut() || ball2.isOut() ||
numOfBricks(allBricks) == 0) {
pro.stop() // プログラムの実行終了
}
}
pro.frameRate(20) // 毎秒 20 フレームに設定
pro.start() // 動画の開始</textarea></p>
<h3>16 章 1 節</h3>
<p>HTML ファイル。</p>
<p><textarea id="code16a">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>プログラミングの練習</title>
<style>
h1 {
font-size: x-large;
font-family: sans-serif;
}
canvas {
border: 1px solid gray;
}
</style>
</head>
<body>
<h1>JavaScript プログラム</h1>
<canvas id="draw-area" width=600 height=600></canvas>
<script src="program.js"></script>
</body>
</html></textarea></p>
<h3>16 章 3 節</h3>
<p>JavaScript ファイル（クリックすると絵が止まる）。</p>
<p><textarea id="code16b">
const drawArea = document.getElementById('draw-area')
let running = true // 動かし続けるか否か
let frameCount = 0 // 今何回目の draw の呼び出しか
function draw() {
const pen = drawArea.getContext('2d')
// 背景を白く塗りつぶす
pen.clearRect(0, 0, drawArea.width, drawArea.height)
// 長方形を描く
pen.strokeRect(100, frameCount % drawArea.height, 30, 10)
}
function callback() {
draw()
frameCount = frameCount + 1 // frameCount を 1 増やす
if (running) { // もし running が true なら
window.requestAnimationFrame(callback)
}
}
drawArea.onclick = function () {
running = false // プログラムを止める
}
window.requestAnimationFrame(callback)</textarea></p>
</div>
<div id="cells">
</div>
<br>
<div style="margin-left: 50px; margin-bottom: 3px;">
<button class="btn-normal" id="run-btn1" onclick="Scriptorium.run()">実行</button>
<button class="btn-normal" onclick="Scriptorium.reset()">消去</button>
<button class="btn-normal" onclick="Scriptorium.yank()">再編集</button>
<button class="btn-normal" onclick="Scriptorium.clearSource()">新規</button>
<input type="checkbox" id="run-and-new">
<label id="run-and-new-label" for="run-and-new">実行後新規編集</label>
</div>
<div style="float: left;">
<div id="editor"></div>
<button class="btn-smallscreen" id="run-btn2" onclick="Scriptorium.run()">実行</button>
<button class="btn-smallscreen" onclick="Scriptorium.reset()">消去</a>
<button class="btn-smallscreen" onclick="Scriptorium.yank()">再編集</button>
<button class="btn-smallscreen" onclick="Scriptorium.clearSource()">新規</button>
<br>
<div id="output">
</div>
</div>
<div style="float: left;">
</div>
<canvas id="canvas" width=400 height=400 tabindex=0>
</canvas>
<br>
<button class="btn-smallscreen key" onclick="Scriptorium.buttonClicked('ArrowLeft')">←</button>
<button class="btn-smallscreen key" onclick="Scriptorium.buttonClicked('ArrowUp')">↑</button>
<button class="btn-smallscreen key" onclick="Scriptorium.buttonClicked('ArrowDown')">↓</button>
<button class="btn-smallscreen key" onclick="Scriptorium.buttonClicked('ArrowRight')">→</button>
<div style="clear: both;"></div>
</div>
<div id="bottom"></div>
<footer class="body-font">
Copyright (C) 2021 Shigeru Chiba.
</footer>
<script src="lib/codemirror.js"></script>
<script src="mode/javascript/javascript.js"></script>
<script src="addon/edit/matchbrackets.js"></script>
<script src="addon/hint/show-hint.js"></script>
<script src="addon/hint/javascript-hint.js"></script>
<script src="keymap/emacs.js"></script>
<script src="./jshint.js"></script>
<script src="addon/lint/lint.js"></script>
<script src="addon/lint/javascript-lint.js"></script>
<script src="./scriptorium.js"></script>
<script src="./processing.js"></script>
<script src="./turtle.js"></script>
<script src="./messages.js"></script>
<script src="./samples.js"></script>
</body>
</html>