Permalink
Browse files

[improvment] Mahjong app be able to adapt to different devices( pc, i…

…pad, apad, cellphone)
  • Loading branch information...
1 parent 5051721 commit a35df26e14669a9c3bff26cd437ee1562660ca88 @winbomb committed Aug 14, 2012
View
@@ -21,11 +21,12 @@ var game;
##register preload: opa[list(string)],opa[list(string)],( -> void) -> void
##args(imgIdents,audIdents,callback)
{
- AUD_CACHE = {};
var images = list2js(imgIdents);
var audios = list2js(audIdents);
- var countLoaded = 0;
- var countTotal = 0;
+ var imgLoaded=0,imgError=0,imgTotal=0;
+ var audLoaded=0,audError=0,audTotal=0;
+
+ var progressChanged = +new Date;
function incrementLoaded() {
countLoaded++;
@@ -44,24 +45,58 @@ var game;
function imgSuccessHandler() {
IMG_CACHE[this.key] = this;
- incrementLoaded();
+ imgLoaded++;
+ updateProgress();
+ progressChanged = +new Date;
}
+ //不知到为什么Firefox会触发两次canplay事件,
+ //如果不做判断,会出现countLoaded大于countTotal的事情。
function audSuccessHandler() {
- //不知到为什么Firefox会触发两次canplay事件,
- //如果不做判断,会出现countLoaded大于countTotal的事情。
if(!AUD_CACHE[this.key]){
AUD_CACHE[this.key] = this;
- incrementLoaded();
+ audLoaded++;
}
+ progressChanged = +new Date;
+ updateProgress();
+ }
+
+ function imgErrorHandler() {
+ imgError++;
+ progressChanged = +new Date;
+ updateProgress();
+ throw new Error('Error loading image: ' + this.src);
}
- function errorHandler() {
- incrementLoaded();
- throw new Error('Error loading ' + this.src);
+ function audErrorHandler() {
+ audError++;
+ progressChanged = +new Date;
+ updateProgress();
+ throw new Error('Error loading sound: ' + this.src);
+ }
+
+ var updateProgress = function(){
+ info = document.getElementById("loading_info");
+ if(!!info){
+ info.innerHTML = "loading game resource... [ "+(imgLoaded+audLoaded)+" / "+(imgTotal+audTotal)+" ]"
+ }
+ }
+
+ var statusCheck = function() {
+ var finished = ((imgLoaded + imgError >= imgTotal) && (audLoaded + audError >= audTotal));
+ if(finished){
+ return callback();
+ }
+
+ //如果图片加载完成,声音加载超时地话,也开始游戏
+ var noProgressTime = (+new Date) - progressChanged;
+ if((imgLoaded + imgError >= imgTotal) && noProgressTime >= 3000){
+ return callback();
+ }
+ setTimeout(statusCheck,1000);
}
- for (var i=0;i<images.length;i++) {
+ for (var i=0;i<images.length;i++) {
var key = images[i]
if (key.indexOf('png') == -1 &&
key.indexOf('jpg') == -1 &&
@@ -70,36 +105,31 @@ var game;
}
var img = new Image();
- countTotal++;
- img.addEventListener('load', imgSuccessHandler, true);
- img.addEventListener('error', errorHandler, true);
+ imgTotal++;
+ img.addEventListener('load', imgSuccessHandler, true);
+ img.addEventListener('error',imgErrorHandler, true);
img.src = key;
img.key = key;
}
-
+
if(window.HTMLAudioElement){
- try{
- var audio = document.createElement("audio");
- if(audio != null && audio.canPlayType && audio.canPlayType("audio/wav")){
- for( var i=0;i<audios.length;i++){
- var key = audios[i]
- if(key.indexOf('wav') == -1) continue;
-
- var audio = new Audio();
- audio.addEventListener('canplaythrough', audSuccessHandler, true);
- audio.addEventListener('error', errorHandler, true);
- audio.src = key;
- audio.key = key;
- audio.load();
-
- countTotal++;
- }
- }
- }catch(e){
- alert("Error: "+e);
- window.console.error("Error"+e);
- }
+ var audio = document.createElement("audio");
+ if(audio != null && !!audio.canPlayType && !!audio.canPlayType("audio/wav")){
+ for( var i=0;i<audios.length;i++){
+ var key = audios[i]
+ if(key.indexOf('wav') == -1) continue;
+ var audio = new Audio();
+ audio.addEventListener('canplaythrough', audSuccessHandler, true);
+ audio.addEventListener('error', audErrorHandler, true);
+ audio.src = key;
+ audio.key = key;
+ audio.load();
+
+ audTotal++;
+ }
+ }
}
+ setTimeout(statusCheck,1000);
}
##register get: string -> Image.image
@@ -123,16 +153,16 @@ var counter;
return function(){
if(counter > 0){
counter = counter - 1;
- ctx.clearRect(330+28,237+28,24,24);
+ ctx.clearRect(360+28,237+28,24,24);
ctx.restore();
ctx.save(ctx);
ctx.fillStyle = "#efea3a";
- ctx.fillRect(330+28,237+28,24,24);
+ ctx.fillRect(360+28,237+28,24,24);
ctx.fillStyle = "red";
ctx.font = "normal bold 24px serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
- ctx.fillText(counter,370,277);
+ ctx.fillText(counter,400,277);
ctx.restore();
window.setTimeout(arguments.callee,1000);
@@ -148,8 +178,8 @@ var counter;
counter = 0;
}
-##register show_menu: int -> void
-##args(opt_flag)
+##register show_menu: int,bool -> void
+##args(opt_flag,is_zh)
{
var ctx = document.getElementById("gmcanvas").getContext("2d");
var arr = [8,4,2,1]
@@ -186,12 +216,12 @@ var counter;
}
loop.call(this)(); */
- var img = get_img("menu_bar.png");
- for(var i=0, x=490; i<arr2.length; i++){
+ var img = (!is_zh)?get_img("en_menu_bar.png"):get_img("cn_menu_bar.png");
+ for(var i=0, x=550; i<arr2.length; i++){
if(arr2[i]){
- ctx.drawImage(img,60*i,0,60,60,x+60*i,475,60,60);
+ ctx.drawImage(img,60*i,0,60,60,x+60*i,435,60,60);
}else{
- ctx.drawImage(img,60*i,60,60,60,x+60*i,475,60,60);
+ ctx.drawImage(img,60*i,60,60,60,x+60*i,435,60,60);
}
}
}
@@ -214,15 +244,14 @@ var get_img = function(key){
##register play_sound: string -> void
##args(key)
{
- var snd = AUD_CACHE[key];
- if(snd){
+ if(AUD_CACHE[key]){
//注:如果不加snd.reload(),chrome好像无法重新播放声音,即只播放一次
//之后再不会播放,不知道啥原因,自从升级了chrome(18onlinux,21onwindows)
//就有这个问题。但不晓得这样每次播放都reload会不会带来系统负担。
//关注此问题!
- snd.load();
- snd.play();
- }
+ if(window.chrome) AUD_CACHE[key].load();
+ AUD_CACHE[key].play();
+ }
}
//两个参数,一个是cookie的名子,一个是值
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -0,0 +1,124 @@
+* {
+ margin: 0
+ padding: 0
+}
+
+body {
+ background: url("/resources/page_bg.jpg") repeat wheat;
+ color: #DDD;
+ font-size: 13px;
+ line-height: 120%;
+ text-align: center;
+}
+
+div {
+ display: block;
+}
+
+.game{
+ margin: 0 auto;
+}
+
+#container {
+ position: absolute;
+ width: 800px;
+ height: 600px;
+ left: 50%;
+ top: 50%;
+ margin-left: -400px;
+ margin-top: -300px;
+ border-color: #333333;
+ border-radius: 0.3em 0.3em 0.3em 0.3em;
+ border-style: solid;
+ border-width: 2px;
+ box-shadow: 0 0 5px blue, 0 25px 5px rgba(255, 255, 255, 0.1) inset;
+}
+
+#chat {
+ width: 225px;
+ text-align: left;
+ position: absolute;
+ bottom: 0px;
+ background: #5C5C5C;
+ background: rgba(92, 92, 92, 0.5);
+ border: 1px solid #444;
+ border-radius: 0.3em 0.3em 0.3em 0.3em;
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7);
+}
+
+#chat_title {
+ padding: 8px;
+ background: #020202;
+ background: rgba(2, 2, 2, 0.5);
+ box-shadow: 0 17px 5px rgba(255, 255, 255, 0.1) inset;
+ -moz-box-shadow: 0 17px 5px rgba(255, 255, 255, 0.1) inset;
+ -webkit-box-shadow: 0 17px 5px rgba(255, 255, 255, 0.1) inset;
+ border-bottom: 1px solid black;
+}
+
+#chat ul {
+ margin: 0px;
+ padding: 0px;
+ color: white;
+ width: 100%;
+ min-height: 50px;
+ max-height: 200px;
+ overflow: auto;
+ list-style: none;
+ border-top: 1px solid #666;
+}
+
+#chat_box {
+ padding: 2px;
+}
+
+input.chat_textbox {
+ font-size: 1.4em;
+ margin: 0px;
+}
+
+#gmcanvas {
+ background: #258e80;
+}
+
+#gmloader {
+ background: url("/resources/loading.gif") center center no-repeat;
+ position: absolute;
+ margin-top: 260px;
+ margin-left: 300px;
+ height: 60px;
+}
+
+#loading_info {
+ position: relative;
+ top: 60px;
+ color: black;
+}
+
+#chat_messages {
+ clear: both;
+ border: 0px;
+ height: 360px;
+ width: 207px;
+ margin: 20px 0px 8px 10px;
+ color: #ffebc7;
+ overflow-y: scroll;
+ text-shadow: black 1px 1px 1px;
+}
+
+#chat_messages li {
+ list-style: none;
+ word-wrap: break-word;
+ text-align: left;
+ margin: 3px 0px;
+ font-size: 13px;
+}
+
+#chat_messages .author {
+ clear: both;
+ float: left;
+ font-size: 12px;
+ font-weight: bold;
+ margin-right: 5px;
+}
+
@@ -0,0 +1,58 @@
+* {
+ margin: 0;
+ padding: 0;
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+body {
+ background: wheat;
+ color: #DDD;
+ font-size: 13px;
+ line-height: 120%;
+ text-align: center;
+}
+
+div {
+ display: block;
+}
+
+.game {
+ margin: 0 auto;
+}
+
+#container {
+ position: absolute;
+ width: 800px;
+ height: 600px;
+ left: 50%;
+ top: 50%;
+ margin-left: -400px;
+ margin-top: -320px;
+}
+
+#chat {
+ display: none;
+}
+
+#gmcanvas {
+ background: #258e80;
+}
+
+#gmloader {
+ background: url("/resources/loading.gif") center center no-repeat;
+ position: absolute;
+ width: 300px;
+ height: 80px;
+ left: 50%;
+ top: 50%;
+ margin-top: -40px;
+ margin-left: -150px;
+}
+
+#loading_info {
+ position: relative;
+ margin-top: 60px;
+ color: black;
+}
+
+
File renamed without changes.
Oops, something went wrong.

0 comments on commit a35df26

Please sign in to comment.