2022前期の活動は主に
などを行いました。
目的
福知山公立大学のオープンキャンパスにおいて、山本ゼミではメディアセンターを使用して脱出ゲームを行いました。私は、その中で用いられた一つのミニゲーム作成に携わりました。以下のリンクが成果物となります。（＊今回、私が関わったミニゲームの設定で、ミニゲームをクリアすると、QRコードを読み込んで頂く場面があり、それを誘導する文言が書かれています）
神経衰弱概要
中身のプログラムは以下の通りになります。
最初にゲームのTOP画面のソースコードです。
（html）
<!DOCTYPE html>
<html la="ja">
<meta charset = "utf-8">
<title>神経衰弱</title>
<link rel="stylesheet" href="sinkeizuizyaku.css" type="text/css">
<body>
<div class = "top_mozi">START!</div>
<script>
'utf-8'
window.addEventListener("click" , function(event){
document.location.href = "https://www.48v.me/~ayaka/game/sinnkeisuizyaku.html";
// 画面をclickすると、上記のリンクに移動する。
})
</script>
</body>
</html>
（css）
.top_mozi{
position: absolute;
margin: auto;
top:0;
left:0;
right:0;
bottom:0;
width: 260px;
height: 80px;
font-size: 4em;
/*background: pink;*/
color: white;
}
body {
position: relative;
width: 100%;
height: 100vh;
background:linear-gradient(45deg, #3bade3,#9844b7,#44ea76);/*グラデーションを定義*/
background-size: 200% 200%;/*サイズを大きくひきのばす*/
animation: bggradient 20s ease infinite;
}
@keyframes bggradient{
0%{
background-position: 0% 50%;
}
50%{
background-position: 100% 50%;
}
100%{
background-position: 0% 50%;
}
}
つぎにゲームの中身です
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>神経衰弱
</head>
<style>
body{
background: #CCFFFF;
}
#panel {
width: 310px;
height: 340px;
overflow: hidden;
margin: 0 auto;
}
.card {
width: 60px;
height: 80px;
line-height: 80px;
border: 1px solid silver;
border-radius: 10px;
text-align: center;
font-size: 26px;
font-weight: bold;
box-shadow: gray 2px 2px;
background: white;
float: left;
cursor: pointer;
}
.back {
background-image: url('img/back.png');
background-size: 60px 80px;
}
.finish {
opacity: 0;
cursor: default;
}
#result {
font-size: 1.2em;
font-weight: bold;
text-align: center;
}
.button{
font-size: 1.2em;
font-weight: bold;
background: pink;
display: inline-block;
padding: 5px;
box-shadow: 2px 2px 4px;
cursor: pointer;
}
.top-page{
font-size: 1.2em;
font-weight: bold;
background: green;
display: inline-block;
padding: 5px;
box-shadow: 2px 2px 4px;;
cursor: pointer;
}
.omedetou{
font-size:1.2em;
margin:10px;
padding:5px;
font-weight: bold;
}
</style>
<body>
<div id="panel"></div>
<div id="result">経過秒数: </div>
<div class = button id = button>初めから</div>
<div class = top-page id = top-page>topページへ</div>
<div id = omedetou class = omedetou></div>
<script>
var cards = [];
var startTime;
var timer;
var backTimer;
var flgFirst = true;
var cardFirst;
var countUnit = 0;
var button = document.getElementById("button")
button.addEventListener("click" , function (event) {
location.reload(true)
})
const top_page = document.getElementById("top-page")
top_page.addEventListener("click" , function (event) {
document.location.href = "https://www.48v.me/~ayaka/game/shinnkeizuizyaku_top.html"
})
window.onload = function(){
var arr = [];
for (var i = 0; i < 10; i++){
arr.push(i);
arr.push(i);
}
shuffle(arr);
var panel = document.getElementById('panel');
for (i = 0; i < 20; i++){
var div = document.createElement('div');
div.className = 'card back';
div.index = i;
div.number = arr[i];
div.innerHTML = '';
div.onclick = turn;
panel.appendChild(div);
cards.push(div);
}
startTime = new Date();
startTimer();
}
function shuffle(arr) {
var n = arr.length;
var temp, i;
while (n) {
i = Math.floor(Math.random() * n--);
temp = arr[n];
arr[n] = arr[i];
arr[i] = temp;
}
return arr;
}
function turn(e){
var div = e.target;
if (backTimer) return;
if (div.innerHTML == ''){
div.className = 'card';
div.innerHTML = div.number;
}else{
return;
}
if (flgFirst){
cardFirst = div;
flgFirst = false;
}else{
if (cardFirst.number == div.number){
countUnit++;
backTimer = setTimeout(function(){
div.className = 'card finish';
cardFirst.className = 'card finish';
backTimer = NaN;
if (countUnit == 10){
clearInterval(timer); // timer終了
var ome = document.getElementById('omedetou');
ome.innerHTML = "おめでとう！ QRコードを読み込みにGO!!";
}
}, 500)
}else{
backTimer = setTimeout(function(){
div.className = 'card back';
div.innerHTML = '';
cardFirst.className = 'card back';
cardFirst.innerHTML = '';
cardFirst = null;
backTimer = NaN;
}, 500);
}
flgFirst = true;
}
}
function startTimer(){
timer = setInterval(showSecond, 1000);
}
function showSecond(){
var nowTime = new Date();
var elapsedTime = Math.floor((nowTime - startTime) / 1000);
var str = '経過秒数: ' + elapsedTime + '秒';
var re = document.getElementById('result');
re.innerHTML = str;
}
</script>
</body>
</html>
反省点
一人で神経衰弱を黙々とするのは飽きやすいのではないかと思いました。何かBGMやゲームをしている最中に画面に動きがあれば良かったかなと思います。また、参加者の方に「一番早いタイムは何秒ですか？」という質問ももらったので、ゲームをした人のタイムが登録出来たらいいなとも思いました。
参考ページ
目的
ECサイトの仕組みに興味があり、自身で予約システムなどを作ってみたいと思ったからです。
下記のリンクがECサイトもどきのデモになります。
ECサイトもどきデモ概要
下記がプログラムになります。
（python）
#!/usr/bin/python3
# -*- coding: utf-8 -*-
import cgi
import cgitb
import os, time
cgitb.enable()
form = cgi.FieldStorage()
p1 = form.getfirst("param1")
p2 = form.getfirst("param2")
print("Content-Type: text/html")
print()
print('<meta charset="UTF-8">')
for i in range(5):
try:
os.mkdir("./test/sub")
fd = open("benntou1_number.txt",'r',encoding="utf-8")
ff = open("benntou1_name.txt",'r',encoding="utf-8")
lines = fd.readlines()
lines2 = ff.readlines()
a = 0
y = 0
for i in range(len(lines)):
lines[i] = lines[i].replace('\n','')
lines2[i] = lines2[i].replace('\n','')
if p1 == lines[i]:
a = 1
y = i
if p2 == None:
p2 = lines2[i]
break
elif p2 == lines2[i]:
break
else:
a = 2
pass
if a == 2:
lines2[y] = p2
for u in range(len(lines2)):
if u == 0:
ff = open("benntou1_name.txt",'w',encoding="utf-8")
b = lines2[0] + "\n"
ff.write(b)
else:
ff = open("benntou1_name.txt",'a',encoding="utf-8")
b = lines2[u] + "\n"
ff.write(b)
if a == 0:
fd = open("benntou1_number.txt", 'a',encoding="utf-8")
pa1 = p1 + "\n"
lines.append(pa1)
fd.write(pa1)
ff = open("benntou_name.txt", 'a',encoding="utf-8")
pa2 = p2 + "\n"
lines2.append(pa2)
ff.write(pa2)
print('<p>mitinokennzyutu</p>')
print("学籍番号" + p1)
print("名前" + p2)
os.rmdir("./test/sub")
except FileExistsError:
time.sleep(1)
else:
break
else:
print("時間を置いてもう一度挑戦してください。")
（html）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ECサイトモデル</title>
</head>
<body>
<form action="https://www.48v.me/~ayaka/cgi-bin/benntou1.py" method="POST">
<h2>学籍番号</h2>
<input type="text" name="param1">
<h2>名前</h2>
<input type="text" name="param2">
<input type="submit">
</form>
</body>
</html>
反省点
前期では、mkdirでファイルを作成し、処理が終るとファイルを消すというプログラムを書きましたが、エラーにより処理が途中で終ってしまったときにそのままファイルが残ってしまい誰も触れなくなるという問題点があります。また、このプログラムを動かすと動作がうまく行かずタイムアウトしてしまうという問題もあります。後期ではそのような問題点を改善していきたいと思います。
参考ページ