滑鼠光暈 | JavaScript Programming Project | OrangeApple Learning Platform

{"id":180592,"student_id":12205,"content":"/** chines chess\r\n*\tAuthor:\tfdipzone\r\n\r\n*\tVer:\t1.0\r\n*/\r\n\r\nvar gameimg = ['images/a1.gif','images/a2.gif','images/a3.gif','images/a4.gif','images/a5.gif','images/a6.gif','images/a7.gif','images/b1.gif','images/b2.gif','images/b3.gif','images/b4.gif','images/b5.gif','images/b6.gif','images/b7.gif','images/bg.gif','images/bg_over.gif','images/bg_sel.gif'];\r\nvar chess_obj = new ChessClass();\r\n\r\nwindow.onload = function(){\r\n\t$('init_btn').onclick = function(){\r\n\t\tchess_obj.init();\r\n\t}\r\n\tvar callback = function(){\r\n\t\tchess_obj.init();\r\n\t}\r\n\timg_preload(gameimg, callback);\r\n}\r\n\r\n\r\n// chess class\r\nfunction ChessClass(){\r\n\tthis.chess = [];\r\n\tthis.boardrows = 4;\r\n\tthis.boardcols = 8;\r\n\tthis.area = 82;\r\n\tthis.player = 1;\t\t// 1:red 2:green\r\n\tthis.selected = null;\t// selected chess\r\n\tthis.chesstype = ['', 'a', 'b'];\r\n\tthis.isover = 0;\r\n}\r\n\r\n\r\n// init\r\nChessClass.prototype.init = function(){\r\n\tthis.reset_grade();\t\r\n\tthis.create_board();\r\n\tthis.create_chess();\r\n\tthis.create_event();\r\n\tthis.player = 1;\r\n\tthis.selected = null;\r\n\tthis.isover = 0;\r\n\tdisp('init_div','hide');\r\n}\r\n\r\n\r\n// create board\r\nChessClass.prototype.create_board = function(){\r\n\tvar board = '';\r\n\tfor(var i=0; i\u003cthis.boardrows; i++){\r\n\t\tfor(var j=0; j\u003cthis.boardcols; j++){\r\n\t\t\tboard = board + '\u003cdiv id=\"' + i + '_' + j + '\"\u003e\u003cimg src=\"images/chessbg.gif\" /\u003e\u003c/div\u003e';\r\n\t\t}\r\n\t}\r\n\t$('board').innerHTML = board;\r\n\t$('board').style.width = this.boardcols * (this.area + 2) + 'px';\r\n\t$('board').style.height = this.boardrows * (this.area + 2) + 'px';\r\n}\r\n\r\n\r\n// create random chess\r\nChessClass.prototype.create_chess = function(){\r\n\t// 32 chesses\r\n\tvar chesses = ['a1','b7','a2','b7','a2','b7','a3','b7','a3','b7','a4','b6','a4','b6','a5','b5','a5','b5','a6','b4','a6','b4','a7','b3','a7','b3','a7','b2','a7','b2','a7','b1'];\r\n\tthis.chess = [];\r\n\twhile(chesses.length\u003e0){\r\n\t\tvar rnd = Math.floor(Math.random()*chesses.length);\r\n\t\tvar tmpchess = chesses.splice(rnd, 1).toString();\r\n\t\tthis.chess.push({'chess':tmpchess, 'type':tmpchess.substr(0,1), 'val':tmpchess.substr(1,1), 'status':0});\r\n\t}\r\n}\r\n\r\n\r\n// create event\r\nChessClass.prototype.create_event = function(){\r\n\tvar self = this;\r\n\tvar chess_area = $_tag('div', 'board');\r\n\tfor(var i=0; i\u003cchess_area.length; i++){\r\n\t\tchess_area[i].onmouseover = function(){\t// mouseover\r\n\t\t\tif(this.className!='onsel'){\r\n\t\t\t\tthis.className = 'on';\r\n\t\t\t}\r\n\t\t}\r\n\t\tchess_area[i].onmouseout = function(){\t// mouseout\r\n\t\t\tif(this.className!='onsel'){\r\n\t\t\t\tthis.className = '';\r\n\t\t\t}\r\n\t\t}\r\n\t\tchess_area[i].onclick = function(){\t// onclick\r\n\t\t\tself.action(this);\r\n\t\t}\r\n\t}\r\n}\r\n\r\n\r\n// id change index\r\nChessClass.prototype.getindex = function(id){\r\n\tvar tid = id.split('_');\r\n\treturn parseInt(tid[0])*this.boardcols + parseInt(tid[1]);\r\n}\r\n\r\n\r\n// index change id\r\nChessClass.prototype.getid = function(index){\r\n\treturn parseInt(index/this.boardcols) + '_' + parseInt(index%this.boardcols);\r\n}\r\n\r\n\r\n// action\r\nChessClass.prototype.action = function(o){\r\n\tif(this.isover==1){\t// game over\r\n\t\treturn false;\r\n\t}\r\n\t\r\n\tvar index = this.getindex(o.id);\r\n\r\n\tif(this.selected == null){\t\r\n\t\tif(this.chess[index]['status'] == 0){\t// not opened\r\n\t\t\tthis.show(index);\t\r\n\t\t}else if(this.chess[index]['status'] == 1){\t// opened\r\n\t\t\tif(this.chess[index]['type'] == this.chesstype[this.player]){\r\n\t\t\t\tthis.select(index);\r\n\t\t\t}\r\n\t\t}\t\t\r\n\t}else{\t\r\n\t\tif(index != this.selected['index']){\t\t\t\t\r\n\t\t\tif(this.chess[index]['status'] == 0){\t\t\t\r\n\t\t\t\tthis.show(index);\r\n\t\t\t}else if(this.chess[index]['status'] == -1){\t\r\n\t\t\t\tthis.move(index);\r\n\t\t\t}else{\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\tif(this.chess[index]['type']==this.chesstype[this.player]){\r\n\t\t\t\t\tthis.select(index);\r\n\t\t\t\t}else{\t\t\t\r\n\t\t\t\t\tthis.kill(index);\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}\r\n\r\n\r\n// show chess\r\nChessClass.prototype.show = function(index){\r\n\t$(this.getid(index)).innerHTML = '\u003cimg src=\"images/' + this.chess[index]['chess'] + '.gif\" /\u003e';\r\n\tthis.chess[index]['status'] = 1;\t// opened\r\n\tif(this.selected!=null){\t\t\t// 清空選中\r\n\t\t$(this.getid(this.selected.index)).className = '';\r\n\t\tthis.selected = null;\r\n\t}\t\r\n\tthis.change_player();\r\n\tthis.gameover();\r\n}\r\n\r\n\r\n// select chess\r\nChessClass.prototype.select = function(index){\r\n\tif(this.selected!=null){\r\n\t\t$(this.getid(this.selected['index'])).className = '';\r\n\t}\r\n\tthis.selected = {'index':index, 'chess':this.chess[index]};\r\n\t$(this.getid(index)).className = 'onsel';\r\n}\r\n\r\n\r\n// move chess\r\nChessClass.prototype.move = function(index){\r\n\tif(this.beside(index)){\r\n\t\tthis.chess[index] = {'chess':this.selected['chess']['chess'], 'type':this.selected['chess']['type'], 'val':this.selected['chess']['val'], 'status':this.selected['chess']['status']};\r\n\t\tthis.remove(this.selected['index']);\r\n\t\tthis.show(index);\r\n\t}\r\n}\r\n\r\n\r\n// kill chess\r\nChessClass.prototype.kill = function(index){\r\n\tif(this.beside(index)==true \u0026\u0026 this.can_kill(index)==true){\r\n\t\tthis.chess[index] = {'chess':this.selected['chess']['chess'], 'type':this.selected['chess']['type'], 'val':this.selected['chess']['val'], 'status':this.selected['chess']['status']};\r\n\t\tthis.remove(this.selected['index']);\r\n\t\tvar killed = this.player==1? 2 : 1;\r\n\t\t$('grade_num' + killed).innerHTML = parseInt($('grade_num' + killed).innerHTML)-1;\t\r\n\t\tthis.show(index);\r\n\t}\r\n}\r\n\r\n\r\n// remove chess\r\nChessClass.prototype.remove = function(index){\r\n\tthis.chess[index]['status'] = -1;\t// empty\r\n\t$(this.getid(index)).innerHTML = '';\r\n\t$(this.getid(index)).className = '';\r\n}\r\n\r\n\r\n/* check is beside\r\n* @param index\t\t\r\n* @param selindex\t\r\n*/\r\nChessClass.prototype.beside = function(index,selindex){\r\n\tif(typeof(selindex)=='undefined'){\r\n\t\tif(this.selected!=null){\r\n\t\t\tselindex = this.selected['index'];\r\n\t\t}else{\r\n\t\t\treturn false;\r\n\t\t}\r\n\t}\r\n\r\n\tif(typeof(this.chess[index])=='undefined'){\r\n\t\treturn false;\r\n\t}\r\n\r\n\tvar from_info = this.getid(selindex).split('_');\r\n\tvar to_info = this.getid(index).split('_');\r\n\tvar fw = parseInt(from_info[0]);\r\n\tvar fc = parseInt(from_info[1]);\r\n\tvar tw = parseInt(to_info[0]);\r\n\tvar tc = parseInt(to_info[1]);\r\n\r\n\tif(fw==tw \u0026\u0026 Math.abs(fc-tc)==1 || fc==tc \u0026\u0026 Math.abs(fw-tw)==1){\t// row or colunm is same and interval=1\r\n\t\treturn true;\r\n\t}else{\r\n\t\treturn false;\r\n\t}\r\n}\r\n\r\n\r\n/* check can kill\r\n* @param index\t\t\r\n* @param selindex\t\r\n*/\r\nChessClass.prototype.can_kill = function(index,selindex){\r\n\tif(typeof(selindex)=='undefined'){\t\r\n\t\tif(this.selected!=null){\t\t\r\n\t\t\tselindex = this.selected['index'];\r\n\t\t}else{\r\n\t\t\treturn false;\r\n\t\t}\r\n\t}\r\n\tif(this.chess[index]['type']!=this.chesstype[this.player]){\r\n\t\tif(parseInt(this.chess[selindex]['val'])==7 \u0026\u0026 parseInt(this.chess[index]['val'])==1){\t// 7 can kill 1\r\n\t\t\treturn true;\r\n\t\t}else if(parseInt(this.chess[selindex]['val'])==1 \u0026\u0026 parseInt(this.chess[index]['val'])==7){ // 1 can't kill 7\r\n\t\t\treturn false;\r\n\t\t}else if(parseInt(this.chess[selindex]['val']) \u003c= parseInt(this.chess[index]['val'])){\t// small kill big\r\n\t\t\treturn true;\r\n\t\t}\r\n\t}\r\n\treturn false;\r\n}\r\n\r\n\r\n// change player\r\nChessClass.prototype.change_player = function(){\r\n\tif(this.player == 1){\r\n\t\tthis.player = 2;\t// to green\r\n\t\t$('grade_img2').className = 'img_on';\r\n\t\t$('grade_img1').className = 'img';\r\n\t}else{\r\n\t\tthis.player = 1;\t// to red\r\n\t\t$('grade_img1').className = 'img_on';\r\n\t\t$('grade_img2').className = 'img';\r\n\t}\r\n}\r\n\r\n\r\n// reset grade\r\nChessClass.prototype.reset_grade = function(){\r\n\t$('grade_img1').className = 'img_on';\r\n\t$('grade_img2').className = 'img';\r\n\t$('grade_num1').innerHTML = $('grade_num2').innerHTML = 16;\r\n\t$('grade_res1').className = $('grade_res2').className = 'none';\r\n\t$('grade_res1').innerHTML = $('grade_res2').innerHTML = '';\r\n}\r\n\r\n\r\n// game over\r\nChessClass.prototype.gameover = function(){\r\n\tif($('grade_num1').innerHTML==0 || $('grade_num2').innerHTML==0){\t// 任一方棋子为0\r\n\t\tthis.isover = 1;\r\n\t\tthis.show_grade();\r\n\t\tdisp('init_div','show');\r\n\t}else{\r\n\t\tif(this.can_action()==false){\r\n\t\t\tthis.isover = 1;\r\n\t\t\tthis.show_grade();\r\n\t\t\tdisp('init_div','show');\r\n\t\t}\r\n\t}\r\n}\r\n\r\n\r\n// show grade\r\nChessClass.prototype.show_grade = function(){\r\n\tvar num1 = parseInt($('grade_num1').innerHTML);\r\n\tvar num2 = parseInt($('grade_num2').innerHTML);\r\n\tif(num1\u003enum2){ // 红方胜\r\n\t\t$('grade_res2').innerHTML = 'LOSS';\r\n\t\t$('grade_res2').className = 'loss';\r\n\t\t$('grade_res1').innerHTML = 'WIN';\r\n\t\t$('grade_res1').className = 'win';\r\n\t}else if(num1\u003cnum2){ // 黑方胜\r\n\t\t$('grade_res1').innerHTML = 'LOSS';\r\n\t\t$('grade_res1').className = 'loss';\r\n\t\t$('grade_res2').innerHTML = 'WIN';\r\n\t\t$('grade_res2').className = 'win';\r\n\t}else{\t// 平局\r\n\t\t$('grade_res1').innerHTML = $('grade_res2').innerHTML = 'DRAW';\r\n\t\t$('grade_res1').className = $('grade_res2').className = 'draw';\r\n\t}\r\n}\r\n\r\n\r\n// check chess can action\r\nChessClass.prototype.can_action = function(){\r\n\tvar chess = this.chess;\r\n\tfor(var i=0,max=chess.length; i\u003cmax; i++){\r\n\t\tif(chess[i].status==0){\t\r\n\t\t\treturn true;\r\n\t\t}else{\r\n\t\t\tif(chess[i].status==1 \u0026\u0026 chess[i].type==this.chesstype[this.player]){\r\n\t\t\t\tif(this.beside(i-this.boardcols, i) \u0026\u0026 (chess[i-this.boardcols].status==-1 || this.can_kill(i-this.boardcols, i) )){\t// 上\r\n\t\t\t\t\treturn true;\r\n\t\t\t\t}\r\n\t\t\t\tif(this.beside(i+this.boardcols, i) \u0026\u0026 (chess[i+this.boardcols].status==-1 || this.can_kill(i+this.boardcols, i) )){\t// 下\r\n\t\t\t\t\treturn true;\r\n\t\t\t\t}\r\n\t\t\t\tif(this.beside(i-1, i) \u0026\u0026 (chess[i-1].status==-1 || this.can_kill(i-1,i) )){\t// 左\r\n\t\t\t\t\treturn true;\r\n\t\t\t\t}\r\n\t\t\t\tif(this.beside(i+1, i) \u0026\u0026 (chess[i+1].status==-1 || this.can_kill(i+1,i) )){\t// 右\r\n\t\t\t\t\treturn true;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\treturn false;\r\n}\r\n\r\n\r\n/** common function */\r\n\r\n// get document.getElementBy(id)\r\nfunction $(id){\r\n\tthis.id = id;\r\n\treturn document.getElementById(id);\r\n}\r\n\r\n\r\n// get document.getElementsByTagName\r\nfunction $_tag(name, id){\r\n\tif(typeof(id)!='undefined'){\r\n\t\treturn $(id).getElementsByTagName(name);\r\n\t}else{\r\n\t\treturn document.getElementsByTagName(name);\t\r\n\t}\r\n}\r\n\r\n\r\n/* div show and hide\r\n* @param id dom id\r\n* @param handle show or hide\r\n*/\r\nfunction disp(id, handle){\r\n\tif(handle=='show'){\r\n\t\t$(id).style.display = 'block';\r\n\t}else{\r\n\t\t$(id).style.display = 'none';\t\r\n\t}\r\n}\r\n\r\n\r\n/* img preload\r\n* @param img\t\t\r\n* @param callback\t\r\n*/\r\nfunction img_preload(img, callback){\r\n\tvar onload_img = 0;\r\n\tvar tmp_img = [];\r\n\tfor(var i=0,imgnum=img.length; i\u003cimgnum; i++){\r\n\t\ttmp_img[i] = new Image();\r\n\t\ttmp_img[i].src = img[i];\r\n\t\tif(tmp_img[i].complete){\r\n\t\t\tonload_img ++;\r\n\t\t}else{\r\n\t\t\ttmp_img[i].onload = function(){\r\n\t\t\t\tonload_img ++;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\tvar et = setInterval(\r\n\t\tfunction(){\r\n\t\t\tif(onload_img==img.length){\t\r\n\t\t\t\tclearInterval(et);\r\n\t\t\t\tcallback();\r\n\t\t\t}\r\n\t\t},200);\r\n}","created_at":"2020-08-14T11:57:56.389+08:00","updated_at":"2020-11-16T20:49:38.709+08:00","name":"滑鼠光暈","language":"javascript","screenshot":{"url":"/uploads/project/screenshot/180592/fd1ac05835b665cf0d7e3c5532c7c2d7.jpg"},"parent_id":2,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":183,"hashid":"gk4szyy9","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}