Skip to content

Commit

Permalink
Merge pull request #31 from java-women/origin/feature/stage102
Browse files Browse the repository at this point in the history 
Origin/feature/stage102
  • Loading branch information
@erk5
erk5 committed May 26, 2016
2 parents 1b3ed54 + 4edab7a commit 3014436
Show file tree
Hide file tree
Showing 4 changed files with 313 additions and 1 deletion.
10 changes: 10 additions & 0 deletions JavajoTeachingForKids/src/main/java/javajo/controller/GameController.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,15 @@ public String chat() {
return "chat";
}

/**
* Game Stage102.
* @return テンプレートHTML
*/
@RequestMapping(value = "/stage102", method = RequestMethod.GET)
public String stage102() {
return "stage102";
}

/**
* Game Stage103.
* @return テンプレートHTML
Expand All @@ -72,4 +81,5 @@ public String stage103() {
public String stage203() {
return "stage203";
}

}
216 changes: 216 additions & 0 deletions JavajoTeachingForKids/src/main/resources/static/js/stage102.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,216 @@
enchant();

/* 進行方向 */
var DOWN=0;
var UP=1;
var RIGHT=2;
var LEFT=3;

/* 曲がる方向初期設定 */
var inputRotateDir=RIGHT;

window.onload = function() {

core = new Core(320, 320);
core.fps = 15;
core.preload('chara0.png', 'map0.png');
core.preload("start.png", "gameover.png", "clear.png");

core.onload = function() {
core.replaceScene(createStartScene());
};

core.start();
};

/**
* ゲームシーン
*/
function createGameScene() {
var scene = new Scene();

/* 背景 */
scene.backgroundColor = '#3cb371';

/* フレームリセット */
core.frame = 0;

var map = new Map(16, 16);
map.image = core.assets['map0.png'];
map.loadData(
[
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 0, 0],
[0, 0, 3, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 3, 0, 0],
[0, 0, 3, 14, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 3, 0, 0],
[0, 0, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 5, 5, 3, 0, 0],
[0, 0, 3, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 3, 5, 5, 3, 0, 0],
[0, 0, 3, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 3, 5, 5, 3, 0, 0],
[0, 0, 3, 5, 5, 3, 3, 3, 3, 3, 3, 5, 5, 5, 3, 5, 5, 3, 0, 0],
[0, 0, 3, 5, 5, 5, 5, 5, 5, 5, 3, 5, 5, 5, 3, 5, 5, 3, 0, 0],
[0, 0, 3, 5, 5, 5, 5, 5, 5, 5, 3, 5, 5, 5, 3, 5, 5, 3, 0, 0],
[0, 0, 3, 5, 5, 3, 5, 5, 5, 5, 3, 5, 5, 5, 3, 5, 5, 3, 0, 0],
[0, 0, 3, 5, 5, 3, 5, 5, 5, 5, 3, 5, 5, 5, 3, 5, 5, 3, 0, 0],
[0, 0, 3, 5, 5, 3, 5, 5, 5, 5, 3, 5, 5, 5, 3, 5, 5, 3, 0, 0],
[0, 0, 3, 5, 5, 4, 4, 4, 5, 5, 4, 4, 4, 4, 4, 5, 5, 3, 0, 0],
[0, 0, 3, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 3, 0, 0],
[0, 0, 3, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 3, 0, 0],
[0, 0, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
]
);
map.collisionData = [
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
[0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0],
[0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0],
[0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 0, 0],
[0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0],
[0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0],
[0, 0, 1, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 1, 0, 0, 1, 0, 0],
[0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 0],
[0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 0],
[0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 0],
[0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 0],
[0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 0],
[0, 0, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 0, 0, 1, 0, 0],
[0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0],
[0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0],
[0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
];

/* タイマー */
var time = 90;
var timer = new Label('Timer：90');
timer.x = 0;
timer.y = 0;

/* プレイヤー */
var player = new Sprite(32, 32);
/* 初期位置 */
player.x = 96;
player.y = 160;
var image = new Surface(96, 128);
image.draw(core.assets['chara0.png'], 0, 0, 96, 128, 0, 0, 96, 128);
player.image = image;
player.direction = direction;
var dir_image=0;
player.walk = 1;
var direction=DOWN;

/* プレイヤー移動 */
var SPEED=1;
var playerMoveX;
var playerMoveY;
var playerWidth;
var playerHeight;

/* プレイヤー動作 */
player.addEventListener('enterframe', function() {
//プレイヤー移動
playerMoveX = 0;
playerMoveY = 0;
playerWidth=16;
playerHeight=30;
if(direction==DOWN){
playerMoveY += SPEED;
dir_image=0;
} else if(direction==UP){
playerMoveY -= SPEED;
dir_image=3;
} else if(direction==RIGHT){
playerMoveX += SPEED;
dir_image=2;
} else if(direction==LEFT){
playerMoveX -= SPEED;
dir_image=1;
}

//プレイヤー描画
this.frame = dir_image * 3 + this.walk;
if (!(scene.frame % 3)) {
this.walk++;
this.walk %= 3;
}

//プレイヤー方向転換
if(map.hitTest(this.x+playerWidth+playerMoveX,this.y+playerHeight+playerMoveY)){
if(inputRotateDir==RIGHT){
direction = rotateRight(direction);
} else {
direction = rotateLeft(direction);
}
} else{
this.moveBy(playerMoveX,playerMoveY);
}

/* 出口にたどり着いたらクリア */
if (map.checkTile(this.x+playerWidth, this.y+playerHeight) == 14) {
core.replaceScene(createGameclearScene());
}
});


/* シーン更新イベントリスナを登録 */
scene.onenterframe = function() {
/* タイマ計算 */
time = 90 - Math.floor(core.frame / core.fps);
timer.text = "Timer : " + time;
if (time <= 0) {
core.replaceScene(createGameoverScene());
}
}

var stage = new Group();
stage.addChild(map);
stage.addChild(player);
scene.addChild(stage);
scene.addChild(timer);

return scene;
}

/**
* パラメータ編集
*/
function editData(){
try {
inputRotateDir = getIntValue("rotate-dir");
core.replaceScene(createStartScene());
} catch(e) {
alert("うまく動かなかった。\r\nやり直してね。");
}
}

/**
* 方向転換
*/
function rotateRight(direction){
switch(direction){
case DOWN:
return LEFT;
case UP:
return RIGHT;
case RIGHT:
return DOWN;
case LEFT:
return UP;
}
}
function rotateLeft(direction){
switch(direction){
case DOWN:
return RIGHT;
case UP:
return LEFT;
case RIGHT:
return UP;
case LEFT:
return DOWN;
}
}
8 changes: 7 additions & 1 deletion JavajoTeachingForKids/src/main/resources/static/top.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
Expand Down Expand Up @@ -41,6 +41,12 @@ <h3 class="panel-title"><a href="stage101" target="content">Stage101</a></h3>
<div class="panel-body">
脱出しよう！
</div>
<div class="panel-heading">
<h3 class="panel-title"><a href="stage102" target="content">Stage102</a></h3>
</div>
<div class="panel-body">
迷路を抜けよう！
</div>
<div class="panel-heading">
<h3 class="panel-title"><a href="stage103" target="content">Stage103</a></h3>
</div>
Expand Down
80 changes: 80 additions & 0 deletions JavajoTeachingForKids/src/main/resources/templates/stage102.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>Stage101</title>
<script type="text/javascript" src="enchant.js"></script>
<script type="text/javascript" src="plugins/ui.enchant.js"></script>
<script type="text/javascript" src="js/stage-common.js"></script>
<script type="text/javascript" src="js/stage102.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous" />
<link rel="stylesheet" href="css/default.css" />
</head>
<body class="container">
<div id="editor">
<div class="row">
<div class="col-sm-12">
<div class="panel panel-success">
<div class="panel-heading">
<h2 class="panel-title">迷路を抜けよう！</h2>
</div>
<div class="panel-body">
<div class="input-group input-group-lg">
<span class="input-group-addon">どちらにまがる？</span>
<select name ="rotate-dir" class="form-control" id="rotate-dir">
<option value="2">右</option>
<option value="3">左</option>
</select>
</div>
<div class="col-sm-12">
<div class="input-group">
<button class="btn btn-lg btn-primary" onclick="editData()">Edit</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="panel panel-success">
<div class="panel-heading">
<h2 class="panel-title">チャット</h2>
</div>
<div class="panel-body">
<div class="col-sm-12">
<div class="form-group">
<input type="text" class="form-control" placeholder="名前" id="name" />
<textarea class="form-control" placeholder="メッセージ" id="message" cols="3"></textarea>
<button class="btn btn-sm btn-primary" id="send">送信</button>
</div>
</div>
<div class="col-sm-12">
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead>
<th class="col-sm-2">日時</th>
<th class="col-sm-2">名前</th>
<th class="col-sm-8">メッセージ</th>
</thead>
<tbody id="messages">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<script type="text/javascript" src="//cdn.jsdelivr.net/sockjs/0.3.4/sockjs.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
<script type="text/javascript" src="js/chat.js"></script>

</body>
</html>

0 comments on commit 3014436

Please sign in to comment.