Skip to content

Instantly share code, notes, and snippets.

@canonno

canonno/kakurenbokun.html Secret

Last active August 12, 2020 01:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save canonno/05fb889dc0bb80b79fdf8149f35c80f7 to your computer and use it in GitHub Desktop.
Save canonno/05fb889dc0bb80b79fdf8149f35c80f7 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
kakurenbokun.html
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/p5.js"></script>
</head>
<body>
<script>
//ステージの広さ
var stage_width = 1000;
var stage_height = 600;
//時間(24h=4800と定義。6時から開始)
var time = 1200;
//背景の色(0時を10,12時を250となるように定義。12h(time:2400)で240変化する)
var bcolor =120;
var d_bcolor = 1;
// プレイヤーサイズ
var bar_width = 20;
var bar_height = 20;
//プレイヤーの位置
var player_x = 90;
var player_y = 90;
var player_color = 130;
// 鬼の座標
var x = 600;
var y = 600;
// 鬼の移動距離
var dx = 3;
var dy = 3;
//鬼の移動ロジック
var mode = "chase"; //ornormal
// タッチされた回数
var enemy_score = 0;
//起動直後setupが実行
function setup() {
createCanvas(stage_width, stage_height);
background(250);
smooth();
frameRate(60);
}
// 試合の初期化
function init() {
player_score = 0;
enemy_score = 0;
x = 600;
y = 600;
dx = 3;
dy = 3;
player_x = 90;
player_y = 90;
player_color = 120;
mode = "chase"
time = 1200;
bcolor = 130;
d_bcolor = 1;
}
//ここが常に実行される
function draw() {
//状況変化
background(bcolor);
time += 1;
//鬼との距離をとる
disx = player_x - x;
disy = player_y - y;
//鬼のモードロジック
switch (mode){
//chaseの時は追いかける
case "chase":
if (disx >0){
dx = abs(dx);
x += dx;
} else if (disx < 0){
dx = -1 * abs(dx);
x += dx;
} else{
}
if (disy > 0){
dy = abs(dy);
y += dy;
}else if (disy<0){
dy = -1 * abs(dy);
y += dy;
}else{
}
break;
//normalの時は適当にふらふらする
case "normal":
if (time%200>=0 && time%200 <50){
x -= dx;
} else if (time%200>=50 && time%200 <100){
y += dy;
} else if (time%200>=100 &&time%200<200){
x += dx;
y += dy;
}
break;
}
//鬼のモードが切り替わるときのロジック
dif_color = abs(bcolor-player_color);
if (dif_color>=20 || (abs(disx) <= 100 && abs(disy) <= 100)){
mode = "chase";
} else {
mode = "normal";
}
// 鬼が画面外に行こうとしたら向きを逆にする
if (y <= 0 || y >= stage_height) {
dy = -1*dy;
}
if (x <= 0 || x >= stage_width) {
dx = -1*dx;
}
// タッチされたら終わり
if (abs(disx)<20 && abs(disy)<20) {
enemy_score += 1;
}
// プレイヤーが画面外に出ても終わり
if (player_y <= 0 || player_y >= stage_height) {
enemy_score += 1;
}
if (player_x <= 0 || player_x >= stage_width) {
enemy_score += 1;
}
// プレイヤー側の操作
switch (key){
case "ArrowUp":
player_y -= 6;
player_y -= 6;
player_y -= 6;
player_y -= 6;
player_y -= 6;
key = 0;
break;
case "ArrowDown":
player_y += 6;
player_y += 6;
player_y += 6;
player_y += 6;
player_y += 6;
key = 0;
break;
case "ArrowLeft":
player_x -= 6;
player_x -= 6;
player_x -= 6;
player_x -= 6;
player_x -= 6;
key = 0;
break;
case "ArrowRight":
player_x += 6;
player_x += 6;
player_x += 6;
player_x += 6;
player_x += 6;
key = 0;
break;
case "a":
player_color -= 10;
key = 0;
break;
case "f":
player_color += 10;
key = 0;
break;
}
//プレイヤー描画
fill (player_color,player_color,player_color)
noStroke();
rect(player_x, player_y, bar_width, bar_height);
// 鬼描画
fill (0,0,0)
noStroke();
rect(x, y, bar_width, bar_height);
//timeが10進むごとに背景の色を変える
if (time % 10 == 0){
bcolor += d_bcolor;
//背景色が250か10になったら増減の向きを変える
switch(bcolor){
case 250:
d_bcolor = -1*d_bcolor;
console.log(d_bcolor)
break;
case 10:
d_bcolor = -1*d_bcolor;
console.log(d_bcolor)
break;
}
}
//6時になったら敵のスピードが早くなる
if (time % 4800 == 1200){
dx = 3 + Math.floor(time/4800);
dy = 3 + Math.floor(time/4800);
}
//終了の時の表示
if (enemy_score >= 1) {
background(255);
text("Record:day"+display_day+" "+display_hour+":00まで生き延びました", 250, 300);
textSize(25);
text("Thank You Playing ! Press r button to retry !", 220, 350);
if (key == "r") {
key = 0;
init();
}
} else {
//終了していないときは続行する
display_day = Math.ceil(time / 4800);
display_hour = Math.floor((time % 4800) * 24/4800)
textSize(25);
text("day"+display_day+" "+display_hour+":00", 10, 30);
}
}
</script>
</body>
</html>
Raw
kakurenbokun_hikari.html
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://unpkg.com/obniz/obniz.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/p5.js"></script>
</head>
<body>
<div id="obniz-debug"></div>
<script>
//obniz Idをインプットしてもらう
var obniz_id = document.getElementsByName("obniz_id");
var obniz = new Obniz(obniz_id);
//照度の取得
var hikari = 0.2;
obniz.onconnect = async () => {
obniz.io0.output(true); //io0を5vに(電気を流す)
obniz.io2.output(false); //io2をGNDに(電気を逃がす)
//io1をアナログピンに(センサーの値を取得)
obniz.ad1.start((voltage) => {
//センサーの値が変わるたびに実行される
hikari = voltage;
});
}
//ステージの広さ
var stage_width = 1000;
var stage_height = 600;
//時間(24h=4800と定義。6時から開始)
var time = 1200;
//背景の色(0時を10,12時を250となるように定義。12h(time:2400)で240変化する)
var bcolor =120;
var d_bcolor = 1;
// 鬼の座標
var x = 600;
var y = 600;
// 鬼の移動距離
var dx = 3;
var dy = 3;
//鬼の移動ロジック
var mode = "chase"; //ornormal
// プレイヤーサイズ
var bar_width = 20;
var bar_height = 20;
// 得点表示
var enemy_score = 0;
//プレイヤーの位置
var player_x = 90;
var player_y = 90;
var player_color = 130;
//読み込み時にここが実行
function setup() {
createCanvas(stage_width, stage_height);
background(250);
smooth();
frameRate(60);
}
// 試合の初期化
function init() {
player_score = 0;
enemy_score = 0;
x = 600;
y = 600;
dx = 3;
dy = 3;
player_x = 90;
player_y = 90;
player_color = 120;
mode = "chase"
time = 1200;
bcolor = 130;
d_bcolor = 1;
}
//ここが常に実行
function draw() {
//状況変化
background(bcolor);
time += 1;
//鬼との距離を取得
disx = player_x - x;
disy = player_y - y;
//鬼のモードロジック
switch (mode){
//chaseのときは追いかける
case "chase":
if (disx >0){
dx = abs(dx);
x += dx;
} else if (disx < 0){
dx = -1 * abs(dx);
x += dx;
} else{
}
if (disy > 0){
dy = abs(dy);
y += dy;
}else if (disy<0){
dy = -1 * abs(dy);
y += dy;
}else{
}
break;
//normalのときはふらふらする
case "normal":
if (time%200>=0 && time%200 <50){
x -= dx;
} else if (time%200>=50 && time%200 <100){
y += dy;
} else if (time%200>=100 &&time%200<200){
x += dx;
y += dy;
}
break;
}
// 鬼が画面の外に行くなら戻ってくる
if (y <= 0 || y >= stage_height) {
dy = -1*dy;
}
if (x <= 0 || x >= stage_width) {
dx = -1*dx;
}
// タッチされたら終わり
if (abs(disx)<20 && abs(disy)<20) {
enemy_score += 1;
}
// 画面外に出ても終わり
if (player_y <= 0 || player_y >= stage_height) {
enemy_score += 1;
}
if (player_x <= 0 || player_x >= stage_width) {
enemy_score += 1;
}
// プレイヤー操作
switch (key){
case "ArrowUp":
player_y -= 6;
player_y -= 6;
player_y -= 6;
player_y -= 6;
player_y -= 6;
key = 0;
break;
case "ArrowDown":
player_y += 6;
player_y += 6;
player_y += 6;
player_y += 6;
player_y += 6;
key = 0;
break;
case "ArrowLeft":
player_x -= 6;
player_x -= 6;
player_x -= 6;
player_x -= 6;
player_x -= 6;
key = 0;
break;
case "ArrowRight":
player_x += 6;
player_x += 6;
player_x += 6;
player_x += 6;
player_x += 6;
key = 0;
break;
}
//照度によってプレイヤーの色を変える
if (hikari > 0.27){
player_color +=1;
} else if (hikari < 0.10){
player_color -=1;
} else {
//現状維持
}
//プレイヤーの描画
fill (player_color,player_color,player_color)
noStroke();
rect(player_x, player_y, bar_width, bar_height);
// 鬼の描画
fill (0,0,0)
noStroke();
rect(x, y, bar_width, bar_height);
//プレイヤーと背景の色の違いを取得
dif_color = abs(bcolor-player_color);
//鬼のモードが切り替わるロジック
if (dif_color>=20 || (abs(disx) <= 100 && abs(disy) <= 100)){
mode = "chase";
} else {
mode = "normal";
}
//timeが10ごとに背景が変化
if (time % 10 == 0){
bcolor += d_bcolor;
switch(bcolor){
//背景が250になったら減るように
case 250:
d_bcolor = -1*d_bcolor;
console.log(d_bcolor)
break;
//背景が10になったら増えるように
case 10:
d_bcolor = -1*d_bcolor;
console.log(d_bcolor)
break;
}
}
//6時になったら敵のスピードが早くなる
if (time % 4800 == 1200){
dx = 3 + Math.floor(time/4800);
dy = 3 + Math.floor(time/4800);
}
//タッチされたときの表示
if (enemy_score >= 1) {
background(255);
text("Record:day"+display_day+" "+display_hour+":00まで生き延びました", 250, 300);
textSize(25);
text("Thank You Playing ! Press r button to retry !", 220, 350);
if (key == "r") {
key = 0;
init();
}
} else {
//タッチされなかったら続行
display_day = Math.ceil(time / 4800);
display_hour = Math.floor((time % 4800) * 24/4800)
textSize(25);
text("day"+display_day+" "+display_hour+":00", 10, 30);
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment