This application uses Canvas, Image and XSJS service for information flow.
Same Application will be used in two different tabs, exchanging information simultaneously.
Demo Video:
http://www.youtube.com/watch?v=2SWd_iNZXRA
.INDEX.HTML: Code to define the size of the img window and to position the squares
.VIEW.JS : Code to draw the squares and its movement
.CONTROLLER.JS: Calling methods to exchange the information on the position of the Squares
INDEX.HTML
<canvas id="myCanvas" width="482" height="482"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var strDataURI = canvas.toDataURL();
var dx = 5;
var dy = 5;
var x = 200;
var y = 5;
var dx2 = 5;
var dy2 = 5;
var x2 = 200;
var y2 = 5;
var WIDTH = 482;
var HEIGHT = 482;
var img = new Image();
var collision = 0;
var counter = 0;
</script>
.VIEW.JS
Code in CreateContent : function(oController)
createContent : function(oController) {
init();
function rect(x,y,w,h) {
}
function rect2(x2,y2,w,h) {
}
function clear() {
}
function init() {
setInterval(draw, 10);
// setInterval(draw2, 1501);
}
function doKeyDown(evt){
switch (evt.keyCode) {
/* Up arrow was pressed /////////////////////////////////////////////////////// */
case 38: /* Up arrow was pressed */
var clr = color.getText();
if(clr=='blue') {
if (y - dy > 0){
y -= dy;
clear();
checkcollision();
if (collision == 1){
y += dy;
collision = 0;
}
else {
var CDate = new Date();
if (counter == 0){
counter = 1; }
else {
var lx2 = xval.getText();
var ly2 = yval.getText();
if (lx2 > 0){
x2 = xval.getText();
y2 = yval.getText(); }}
}
}
break;
} else {
if (y2 - dy2 > 0){
y2 -= dy2;
clear();
checkcollision2();
if (collision == 1){
y2 += dy2;
collision = 0;
}
else {
var CDate = new Date();
if (counter == 0){
counter = 1; }
else {
var lx = xval.getText();
var ly = yval.getText();
if (lx > 0){
x = xval.getText();
y = yval.getText(); }}
}
}
break;
}
...similar code for all directions of the button...
.CONTROLLER.JS
Methods are used
MazeMoveSave: function(Square,x,y,Passkey,Date) {
var aUrl = '../../../services/MultiplyTest.xsjs?cmd=insertmaze'+'&Square='+Square+'&x='+x+'&y='+y+'&Passkey='+Passkey+'&Date='+Date;
url: aUrl,
method: 'GET',
dataType: 'json',
error: this.onErrorCall });
},
MazeMoveRead: function(x,y,Square,Passkey) {
var aUrl = '../../../services/MultiplyTest.xsjs?cmd=readmaze'+'&x='+x+'&y='+y+'&Square='+Square+'&Passkey='+Passkey;
url: aUrl,
method: 'GET',
dataType: 'json',
error: this.onErrorCall });
},
ReadMazeValX: function(Square,Passkey) {
var aUrl = '../../../services/MultiplyTest.xsjs?cmd=readmazevalx'+'&Square='+Square+'&Passkey='+Passkey;
url: aUrl,
method: 'GET',
dataType: 'json',
success: this.readx,
error: this.onErrorCall });
},
.XSJS
Below are the sample codes to retrieve the data by
function performReadMazeValX(){
var body = '';
var Square = $.request.parameters.get('Square');
var Passkey = $.request.parameters.get('Passkey');
try {
var query = 'CALL "amohas97.session.models::get_maze"(?,?,?,?)';
$.trace.debug(query);
var conn = $.db.getConnection();
var cstmt = conn.prepareCall(query);
cstmt.setString(1, Square);
cstmt.setString(2, Passkey);
cstmt.execute();
body = cstmt.getDecimal(3);
} catch (e) {
$.response.status = $.net.http.INTERNAL_SERVER_ERROR;
$.response.setBody(e.message);
return;
}
$.response.setBody(body);
$.response.status = $.net.http.OK;
}
function performReadMazeValY(){
var body = '';
var Square = $.request.parameters.get('Square');
var Passkey = $.request.parameters.get('Passkey');
try {
var query = 'select "y" FROM "WRK_SCH"."amohas97.session.data::insertmazemove" WHERE "Square" = ? AND "Passkey" = ?';
$.trace.debug(query);
var conn = $.db.getConnection();
var pstmt;
var rs;
pstmt = conn.prepareStatement(query);
pstmt.setString(1, Square);
pstmt.setString(2, Passkey);
rs = pstmt.executeQuery();
while (rs.next()) {
body += rs.getDecimal(1);
}
} catch (e) {
// $.response.status = $.net.http.INTERNAL_SERVER_ERROR;
// $.response.setBody(e.message);
// return;
}
//num2 - num1;
$.response.setBody(body);
$.response.status = $.net.http.OK;
}
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
37 | |
25 | |
17 | |
13 | |
7 | |
7 | |
7 | |
6 | |
6 | |
6 |