Skip to content

Commit 7c4f587

Browse files
arkwnetarkwnet
committed
Update example projects
1 parent 2f6060d commit 7c4f587

File tree

6 files changed

+81
-52
lines changed

6 files changed

+81
-52
lines changed

‎example/audio/main.js

+9
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/clock/main.js

+12-13
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,22 @@ function loop() {
22
ajiSetLineCap("round");
33
ajiSetFillColor("#ffffcc");
44
ajiFillRect(0, 0, AJIPACK_WIDTH, AJIPACK_HEIGHT);
5+
ajiSetFillColor("#000");
56
ajiFillCircle(
67
AJIPACK_WIDTH / 2 - AJIPACK_HEIGHT / 2 + 10,
78
10,
89
AJIPACK_HEIGHT - 20,
9-
AJIPACK_HEIGHT - 20,
10-
"#000"
10+
AJIPACK_HEIGHT - 20
1111
);
12+
ajiSetFillColor("#fff");
1213
ajiFillCircle(
1314
AJIPACK_WIDTH / 2 - AJIPACK_HEIGHT / 2 + 12,
1415
12,
1516
AJIPACK_HEIGHT - 24,
16-
AJIPACK_HEIGHT - 24,
17-
"#fff"
17+
AJIPACK_HEIGHT - 24
1818
);
19+
ajiSetStrokeColor("#0000cc");
20+
ajiSetLineWidth(12);
1921
ajiLine(
2022
AJIPACK_WIDTH / 2,
2123
AJIPACK_HEIGHT / 2,
@@ -28,10 +30,9 @@ function loop() {
2830
50 *
2931
Math.cos(
3032
(ajiGetHours() * Math.PI) / 6 + (ajiGetMinutes() * Math.PI) / 360
31-
),
32-
"#0000cc",
33-
12
33+
)
3434
);
35+
ajiSetLineWidth(6);
3536
ajiLine(
3637
AJIPACK_WIDTH / 2,
3738
AJIPACK_HEIGHT / 2,
@@ -44,17 +45,15 @@ function loop() {
4445
80 *
4546
Math.cos(
4647
(ajiGetMinutes() * Math.PI) / 30 + (ajiGetSeconds() * Math.PI) / 1800
47-
),
48-
"#0000cc",
49-
6
48+
)
5049
);
50+
ajiSetStrokeColor("#ff0000");
51+
ajiSetLineWidth(2);
5152
ajiLine(
5253
AJIPACK_WIDTH / 2,
5354
AJIPACK_HEIGHT / 2,
5455
AJIPACK_WIDTH / 2 + 90 * Math.sin((ajiGetSeconds() * Math.PI) / 30),
55-
AJIPACK_HEIGHT / 2 - 90 * Math.cos((ajiGetSeconds() * Math.PI) / 30),
56-
"#ff0000",
57-
2
56+
AJIPACK_HEIGHT / 2 - 90 * Math.cos((ajiGetSeconds() * Math.PI) / 30)
5857
);
5958
ajiSetFont("14px sans-serif");
6059
ajiSetFillColor("black");

‎example/index.html

+11
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,11 @@
2929
<iframe src="test/index.html" width="320" height="240"></iframe>
3030
</div>
3131
<br />
32+
<div>
33+
<p><b>Clock</b></p>
34+
<iframe src="clock/index.html" width="320" height="240"></iframe>
35+
</div>
36+
<br />
3237
<div>
3338
<p><b>Image</b></p>
3439
<iframe src="image/index.html" width="320" height="240"></iframe>
@@ -38,6 +43,12 @@
3843
<p><b>Audio</b></p>
3944
<iframe src="audio/index.html" width="320" height="240"></iframe>
4045
</div>
46+
<br />
47+
<div>
48+
<p><b>Video</b></p>
49+
<iframe src="video/index.html" width="320" height="240"></iframe>
50+
</div>
51+
<br />
4152
</main>
4253
<footer class="pt-5 my-5 text-muted border-top">
4354
Copyright (c) 2023 Sora Arakawa<br />

‎example/video/main.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎player.js

+24-19
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,8 @@ function ajiInit() {
3939
if (typeof setup == "function") {
4040
setup();
4141
}
42+
ajiCanvas.addEventListener("touchstart", ajiMouseDown, false);
43+
ajiCanvas.addEventListener("touchend", ajiMouseUp);
4244
ajiCanvas.addEventListener("mousedown", ajiMouseDown, false);
4345
ajiCanvas.addEventListener("mouseup", ajiMouseUp);
4446
ajiMain();
@@ -52,7 +54,11 @@ function ajiMain() {
5254
if (ajiMouse.flag == true) {
5355
ajiMouse.count++;
5456
} else {
55-
ajiMouse.count = 0;
57+
if (ajiMouse.count == 1 || ajiMouse.count == 2) {
58+
ajiMouse.count++;
59+
} else {
60+
ajiMouse.count = 0;
61+
}
5662
}
5763
if (typeof loop == "function") {
5864
loop();
@@ -102,41 +108,34 @@ function ajiFillRect(x, y, w, h) {
102108
ajiContext.fillRect(x, y, w, h);
103109
}
104110

105-
function ajiStrokeRect(x, y, w, h, color, width) {
106-
ajiSetStrokeColor(color);
107-
ajiSetLineWidth(width);
111+
function ajiStrokeRect(x, y, w, h) {
108112
ajiContext.strokeRect(x, y, w, h);
109113
}
110114

111-
function ajiFillCircle(x, y, w, h, color) {
115+
function ajiFillCircle(x, y, w, h) {
112116
const cx = x + w / 2;
113117
const cy = y + h / 2;
114118
const rx = w / 2;
115119
const ry = h / 2;
116120
ajiContext.beginPath();
117121
ajiContext.ellipse(cx, cy, rx, ry, 0, 0, Math.PI * 2);
118-
ajiSetFillColor(color);
119122
ajiContext.fill();
120123
}
121124

122-
function ajiStrokeCircle(x, y, w, h, color, width) {
125+
function ajiStrokeCircle(x, y, w, h) {
123126
const cx = x + w / 2;
124127
const cy = y + h / 2;
125128
const rx = w / 2;
126129
const ry = h / 2;
127130
ajiContext.beginPath();
128131
ajiContext.ellipse(cx, cy, rx, ry, 0, 0, Math.PI * 2);
129-
ajiSetStrokeColor(color);
130-
ajiSetLineWidth(width);
131132
ajiContext.stroke();
132133
}
133134

134-
function ajiLine(x1, y1, x2, y2, color, width) {
135+
function ajiLine(x1, y1, x2, y2) {
135136
ajiContext.beginPath();
136137
ajiContext.moveTo(x1, y1);
137138
ajiContext.lineTo(x2, y2);
138-
ajiSetStrokeColor(color);
139-
ajiSetLineWidth(width);
140139
ajiContext.stroke();
141140
}
142141

@@ -172,6 +171,8 @@ function ajiDrawBG(id, x, y) {
172171
ajiContext.drawImage(ajiBG[id], x, y, AJIPACK_WIDTH, AJIPACK_HEIGHT);
173172
}
174173

174+
// Sprite
175+
175176
async function ajiAddSprite(id, src) {
176177
if (ajiExistSprite(id) == false) {
177178
ajiSprite.push({
@@ -182,8 +183,6 @@ async function ajiAddSprite(id, src) {
182183
}
183184
}
184185

185-
// Sprite
186-
187186
function ajiGetSprite(id) {
188187
for (let i = 0; i < ajiSprite.length; i++) {
189188
if (ajiSprite[i].id == id) {
@@ -320,7 +319,7 @@ function ajiPlayVideo() {
320319
ajiVideo.play();
321320
}
322321

323-
function ajiStopVideo() {
322+
function ajiPauseVideo() {
324323
ajiVideo.pause();
325324
}
326325

@@ -351,9 +350,15 @@ function ajiMouseY() {
351350
}
352351

353352
function ajiMouseDown(e) {
354-
const rect = e.target.getBoundingClientRect();
355-
ajiMouse.x = e.clientX - rect.left;
356-
ajiMouse.y = e.clientY - rect.top;
353+
if (e.touches != undefined) {
354+
e.preventDefault();
355+
ajiMouse.x = e.touches[0].pageX;
356+
ajiMouse.y = e.touches[0].pageY;
357+
} else {
358+
const rect = e.target.getBoundingClientRect();
359+
ajiMouse.x = e.clientX - rect.left;
360+
ajiMouse.y = e.clientY - rect.top;
361+
}
357362
ajiMouse.flag = true;
358363
}
359364

@@ -362,7 +367,7 @@ function ajiMouseUp() {
362367
}
363368

364369
function ajiClick() {
365-
if (ajiMouse.flag == true && ajiMouse.count == 1) {
370+
if (ajiMouse.count == 1) {
366371
return true;
367372
} else {
368373
return false;

‎preview/js/player.js

+24-19
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,8 @@ function ajiInit() {
3939
if (typeof setup == "function") {
4040
setup();
4141
}
42+
ajiCanvas.addEventListener("touchstart", ajiMouseDown, false);
43+
ajiCanvas.addEventListener("touchend", ajiMouseUp);
4244
ajiCanvas.addEventListener("mousedown", ajiMouseDown, false);
4345
ajiCanvas.addEventListener("mouseup", ajiMouseUp);
4446
ajiMain();
@@ -52,7 +54,11 @@ function ajiMain() {
5254
if (ajiMouse.flag == true) {
5355
ajiMouse.count++;
5456
} else {
55-
ajiMouse.count = 0;
57+
if (ajiMouse.count == 1 || ajiMouse.count == 2) {
58+
ajiMouse.count++;
59+
} else {
60+
ajiMouse.count = 0;
61+
}
5662
}
5763
if (typeof loop == "function") {
5864
loop();
@@ -102,41 +108,34 @@ function ajiFillRect(x, y, w, h) {
102108
ajiContext.fillRect(x, y, w, h);
103109
}
104110

105-
function ajiStrokeRect(x, y, w, h, color, width) {
106-
ajiSetStrokeColor(color);
107-
ajiSetLineWidth(width);
111+
function ajiStrokeRect(x, y, w, h) {
108112
ajiContext.strokeRect(x, y, w, h);
109113
}
110114

111-
function ajiFillCircle(x, y, w, h, color) {
115+
function ajiFillCircle(x, y, w, h) {
112116
const cx = x + w / 2;
113117
const cy = y + h / 2;
114118
const rx = w / 2;
115119
const ry = h / 2;
116120
ajiContext.beginPath();
117121
ajiContext.ellipse(cx, cy, rx, ry, 0, 0, Math.PI * 2);
118-
ajiSetFillColor(color);
119122
ajiContext.fill();
120123
}
121124

122-
function ajiStrokeCircle(x, y, w, h, color, width) {
125+
function ajiStrokeCircle(x, y, w, h) {
123126
const cx = x + w / 2;
124127
const cy = y + h / 2;
125128
const rx = w / 2;
126129
const ry = h / 2;
127130
ajiContext.beginPath();
128131
ajiContext.ellipse(cx, cy, rx, ry, 0, 0, Math.PI * 2);
129-
ajiSetStrokeColor(color);
130-
ajiSetLineWidth(width);
131132
ajiContext.stroke();
132133
}
133134

134-
function ajiLine(x1, y1, x2, y2, color, width) {
135+
function ajiLine(x1, y1, x2, y2) {
135136
ajiContext.beginPath();
136137
ajiContext.moveTo(x1, y1);
137138
ajiContext.lineTo(x2, y2);
138-
ajiSetStrokeColor(color);
139-
ajiSetLineWidth(width);
140139
ajiContext.stroke();
141140
}
142141

@@ -172,6 +171,8 @@ function ajiDrawBG(id, x, y) {
172171
ajiContext.drawImage(ajiBG[id], x, y, AJIPACK_WIDTH, AJIPACK_HEIGHT);
173172
}
174173

174+
// Sprite
175+
175176
async function ajiAddSprite(id, src) {
176177
if (ajiExistSprite(id) == false) {
177178
ajiSprite.push({
@@ -182,8 +183,6 @@ async function ajiAddSprite(id, src) {
182183
}
183184
}
184185

185-
// Sprite
186-
187186
function ajiGetSprite(id) {
188187
for (let i = 0; i < ajiSprite.length; i++) {
189188
if (ajiSprite[i].id == id) {
@@ -320,7 +319,7 @@ function ajiPlayVideo() {
320319
ajiVideo.play();
321320
}
322321

323-
function ajiStopVideo() {
322+
function ajiPauseVideo() {
324323
ajiVideo.pause();
325324
}
326325

@@ -351,9 +350,15 @@ function ajiMouseY() {
351350
}
352351

353352
function ajiMouseDown(e) {
354-
const rect = e.target.getBoundingClientRect();
355-
ajiMouse.x = e.clientX - rect.left;
356-
ajiMouse.y = e.clientY - rect.top;
353+
if (e.touches != undefined) {
354+
e.preventDefault();
355+
ajiMouse.x = e.touches[0].pageX;
356+
ajiMouse.y = e.touches[0].pageY;
357+
} else {
358+
const rect = e.target.getBoundingClientRect();
359+
ajiMouse.x = e.clientX - rect.left;
360+
ajiMouse.y = e.clientY - rect.top;
361+
}
357362
ajiMouse.flag = true;
358363
}
359364

@@ -362,7 +367,7 @@ function ajiMouseUp() {
362367
}
363368

364369
function ajiClick() {
365-
if (ajiMouse.flag == true && ajiMouse.count == 1) {
370+
if (ajiMouse.count == 1) {
366371
return true;
367372
} else {
368373
return false;

0 commit comments

Comments
 (0)