-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
自動的に前進する主人公が、壁にぶつかった時に「右に曲がる」か「左に曲がる」かどちらかを選択できる。左上の階段に辿り着いたらゴール。 (cherry picked from commit 2fa0d0e)
- Loading branch information
Showing
4 changed files
with
313 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
216 changes: 216 additions & 0 deletions
216
JavajoTeachingForKids/src/main/resources/static/js/stage102.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
80 changes: 80 additions & 0 deletions
80
JavajoTeachingForKids/src/main/resources/templates/stage102.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |