JS網頁游戲平臺-推箱子、坦克大戰、猜數字、賽車等代碼

2024-09-05 12:21:08

字體：大中小

來源：轉載

供稿：網友

JS網頁游戲平臺，集推箱子、坦克大戰、俄羅斯方塊、猜數字、賽車、貪吃蛇小游戲為一體，使用鼠標和鍵盤控制的綜合方式。相關的實現技巧：1.網頁游戲區域：2.鍵盤參數類:可以根據需要把鍵值添加進來，3.標簽類：用于控制、產生html標簽，創建一個指定寬高的按鈕樣式標簽，4.動畫類：播放動畫，播放結束事件，5.游戲類：姓名，邏輯方法，鍵盤方法，開始方法，開始關卡方法,結束方法，6.游戲列表，7.游戲選擇器。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.0 Transitional//EN"><html><head>  <meta http-equiv="Content-Type" content="text/html; charset=gb2312">  <title>JS網頁游戲平臺</title>  <style type="text/css">    body{margin:0;padding:0;}    /*game 3 推箱子*/    #game3_innerHTML a{overflow:hidden;line-height:24px;border:0;display:inline-block;width:24px;height:24px;background:gray;float:left;text-align:center;cursor:default;}    #game3_innerHTML .a1{background:url(jsyxpt_img/txz/1.gif) no-repeat;}    #game3_innerHTML .a2{background:url(jsyxpt_img/txz/2.gif) no-repeat;}    #game3_innerHTML .a3{background:url(jsyxpt_img/txz/3.gif) no-repeat;}    #game3_innerHTML .a4{background:url(jsyxpt_img/txz/4.gif) no-repeat;}    #game3_innerHTML .a5{background:url(jsyxpt_img/txz/5.gif) no-repeat;}    #game3_innerHTML .a6{background:url(jsyxpt_img/txz/6.gif) no-repeat;}    #game3_innerHTML .a7{background:url(jsyxpt_img/txz/7.gif) no-repeat;}    #game3_innerHTML .a8{background:url(jsyxpt_img/txz/8.gif) no-repeat;}    /*game 3 推箱子*/    /*game2 俄羅斯方塊*/    .game2_Game_innerHTML a,.game2_FrameMain_innerHTML a{overflow:hidden;line-height:14px;font-size:14px;border:0;display:inline-block;width:14px;height:14px;background:gray;float:left;text-align:center;cursor:default;}    .game2_Game_innerHTML .a1,.game2_FrameMain_innerHTML .a1{background:#000;}   </style></head><body><script type="text/javascript"language="javascript">window.onload = function() { //1.網頁游戲區域： var _GameFrame = document.getElementById("GameFrame"); //2.鍵盤參數類:可以根據需要把鍵值添加進來 var _KeyParameters = { KeyEnter: 13, KeySpace: 32, KeyLeft: 37, KeyUp: 38, KeyRight: 39, KeyDown: 40, KeyESC: 27}; //, MouseLeft: 1, MouseRight: 2,MouseDouble: 3 //3.標簽類：用于控制、產生html標簽 var _HtmlControl = { //清空網頁游戲區域 _ClearArea: function() { _GameFrame.innerHTML="";}, //添加移除_AddControl: function(c) { _GameFrame.appendChild(c); }, _DelControl: function(c){//if(isObject(c))_GameFrame.removeChild(c);},//創建一個div _newDiv: function() { var div = document.createElement("div"); return div; }, //創建一個指定寬高的按鈕樣式標簽 _newButton: function(name, w, h) { var div = this._newDiv(); div.innerHTML = name; div.style.width = w + "px"; div.style.height = h + "px"; div.style.margin = "5px"; div.style.paddingTop = "5px"; div.style.textAlign = "center"; div.style.backgroundColor = "gray"; div.style.border = "solid 1px black"; div.select = function() { //被選中時的變化 this.style.backgroundColor = "pink"; }; div.unselect = function() { //沒選中時的樣子 this.style.backgroundColor = "gray"; }; return div; }, _newPanel: function(x, y, w, h) { var div = this._newDiv(); div.style.position = "absolute"; div.style.width = w + "px"; div.style.height = h + "px"; div.style.left = x + "px"; div.style.top = y + "px"; div.style.overflow = "hidden"; div.style.backgroundColor = "gray"; div.style.textAlign = "center"; div.style.border = "solid 1px black"; div.select = function() { //被選中時的變化 this.style.backgroundColor = "pink"; }; div.unselect = function() { //沒選中時的樣子 this.style.backgroundColor = "gray"; }; return div; } //繼續... }; //---------------------------------------------------- //4.動畫類：播放動畫，播放結束事件 var Animation = function(name,endFn) { var frames = ['.', '..', '...']; var index = 0; var panel = undefined; //播放動畫 this._play = function() { panel = _HtmlControl._newPanel(100, 150, 150, 50); panel.style.paddingTop = "17px"; panel.innerHTML = ""; _HtmlControl._AddControl(panel); this._LControl(); }; this._LControl = function() { //下一步動畫調用 var temp = this; //得到當前對象 if (index < frames.length) { if (panel) { panel.innerHTML = (!!name?name:"")+frames[index]; } setTimeout(function() { temp._LControl(); }, 200); //500//動畫邏輯代碼 //alert("播放動畫，倒計時：" + (frames.length - index)); } else { index=-1;if (this._palyEnd) { setTimeout(function() { _HtmlControl._ClearArea(); temp._palyEnd();}, 100);}} index++; } //播放結束事件 this._palyEnd = endFn; }; //---------------------------------------------------- //5.游戲類：姓名，邏輯方法，鍵盤方法，開始方法，開始關卡方法,結束方法 var Game = function(name, logicalFn, keyFn, startFn, loadFn, endFn) { //判斷是否鼠標左右鍵同時按this._mousedbl=false;//游戲名 this._name = name || "未命名"; //5.a.1:邏輯控制 this._LControl = logicalFn || function(date) { //簡單游戲邏輯控制 if (this._FrameMain) { var innHTML = "游戲時間：" + date.getSeconds() + "秒" + date.getMilliseconds(); innHTML += "<br>當前游戲沒有編寫，您可以按Esc退出該游戲；"; this._FrameMain.innerHTML = innHTML; } }; //5.a.2:鍵盤控制 this._KControl = keyFn || function(event) { if(this._mousedbl){//雙鍵時this._mousedbl=false;this._End();}else{if(event.KeyCode){alert("您敲擊了" + event.keyCode + "鍵"); }else{alert(event.button);}}}; var tmp=this;//5.a.3:鼠標this._MControl = function(event){event=event || window.event;if(event.button==_KeyParameters.MouseDouble){//左右鍵同時按下做標記tmp._mousedbl=true;}}//5.b.1:標題區域 this._FrameTitle = null; //5.b.2:游戲區域 this._FrameMain = null; //5.b.3:狀態顯示區 this._FrameState = null; //5.b.4:控制區 this._FrameControl = null; //5.c.1:開場動畫 this._AnmLoad = new Animation("進入游戲",null); //5.c.2:過關動畫 this._AnmNext = new Animation("加載中",null); //5.c.3:結束動畫 this._AnmEnd = new Animation("結束",null); //5.d.1:開始:調用開始動畫、開始處理方法、加載游戲 this._Start = function() { this._AnmLoad = this._AnmLoad || new Animation(null); var temp = this; //得到當前對象 this._AnmLoad._palyEnd = this._AnmLoad._palyEnd || function() { startFn && startFn(); temp._Load(); }; this._AnmLoad._play(); }; //5.d.2:結束 this._End = endFn || function() { alert("游戲結束"); }; //5.d.3:加載：每次開始游戲時(關卡開始) this._Load = function() { this._AnmNext = this._AnmNext || new Animation(null); var temp = this; //得到當前對象 this._AnmNext._palyEnd = this._AnmNext._palyEnd || function() { if (!loadFn) { temp._FrameTitle = _HtmlControl._newPanel(0, 0, 400, 30); temp._FrameTitle.innerHTML = temp._name || "未命名游戲"; temp._FrameMain = _HtmlControl._newPanel(0, 30, 350, 370); temp._FrameState = _HtmlControl._newPanel(350, 30, 50, 180); temp._FrameControl = _HtmlControl._newPanel(350, 210, 50, 190); _HtmlControl._ClearArea(); _HtmlControl._AddControl(temp._FrameTitle); _HtmlControl._AddControl(temp._FrameMain); _HtmlControl._AddControl(temp._FrameState); _HtmlControl._AddControl(temp._FrameControl); } else { loadFn(); } } this._AnmNext && this._AnmNext._play(); } //5.e地圖 this._Map = []; mapIndex = -1; }; //---------------------------------------------------- //創建游戲 var game1 = new Game("貪吃蛇", null, null); var game2 = new Game("俄羅斯方塊", null, null); var game3 = new Game("推箱子", null, null); var game4 = new Game("賽車", null, null); var game5 = new Game("坦克大戰", null, null); var game6 = new Game("猜數字",null,null);//---------------------------------------------------- //6.游戲列表 var _GameList = [game6, game3, game2, game4, game5,game1]; //---------------------------------------------------- //7.游戲選擇器 var _GameChoose = new Game("選擇器", null, null); { _GameChoose._Map = _GameList; _GameChoose._Load = function() { this._FrameTitle = _HtmlControl._newPanel(0, 0, 400, 30); this._FrameTitle.innerHTML = "請選擇游戲"; this._FrameMain = _HtmlControl._newPanel(0, 30, 240, 370); this._FrameState = _HtmlControl._newPanel(240, 30, 160, 180); this._FrameState.innerHTML = "你可以<br>使用上下鍵<br>選擇游戲"; this._FrameControl = _HtmlControl._newPanel(240, 210, 160, 190); this._FrameControl.innerHTML = "按下Enter<br>進入游戲"; this._tempButtons = []; this._tempButtonsIndex = 0; //this._FrameMain.style.滾動條// if (this._Map.length > 0) { for (var i = 0; i < this._Map.length; i++) { var button = _HtmlControl._newButton(this._Map[i]._name, 200, 30); this._FrameMain.appendChild(button); this._tempButtons.push(button); } this._tempButtons[0].select(); } _HtmlControl._AddControl(this._FrameTitle); _HtmlControl._AddControl(this._FrameMain); _HtmlControl._AddControl(this._FrameState); _HtmlControl._AddControl(this._FrameControl); }; _GameChoose._LControl = function(date) { if (mapIndex != -1) { this._Map && this._Map[mapIndex]._LControl(date); } }; _GameChoose._KControl = function(event) { if (mapIndex == -1) {//大廳控制switch (event.keyCode) { case _KeyParameters.KeyUp: { //alert("上t"); if (this._tempButtonsIndex >= 0) {this._tempButtonsIndex--; if(this._tempButtonsIndex<0){this._tempButtonsIndex = this._tempButtons.length - 1;}for (var i = 0; i < this._tempButtons.length; i++) { this._tempButtons[i].unselect(); } this._tempButtons[this._tempButtonsIndex].select(); } } break; case _KeyParameters.KeyDown: { //alert("下"); if (this._tempButtonsIndex < this._tempButtons.length) { this._tempButtonsIndex++;if(this._tempButtonsIndex>this._tempButtons.length-1){this._tempButtonsIndex=0;}for (var i = 0; i < this._tempButtons.length; i++) { this._tempButtons[i].unselect(); } this._tempButtons[this._tempButtonsIndex].select(); } } break; case _KeyParameters.KeyEnter: { mapIndex = this._tempButtonsIndex; this._Map && this._Map[mapIndex]._Start(); } break; default: { } break; } } else { //游戲控制if (event.keyCode == _KeyParameters.KeyESC) { window.clearInterval(_PageControl._inteval); _PageControl._inteval = window.setInterval(_PageControl._ThreadControl, 1); this._Map[mapIndex].mapIndex=0; mapIndex = -1; this._Start(); return; }if(this._Map){//document.onmousedown=this._Map[mapIndex]._MControl;this._Map[mapIndex]._KControl(event);}} } } //---------------------------------------------------- //8.頁面控制： var _PageControl = { //8.a:線程控制 _ThreadControl: function() { var date = new Date(); _GameChoose._LControl(date); }, //8.b:鍵盤控制 _KeyControl: function(event) { event = event || window.event; _GameChoose._KControl(event); return false; }, //8.cc.事件注冊 _StartRegedit: function() { var temp = this; //把this._ThreadControl添加到循環線程 window.clearInterval(this._inteval); this._inteval = window.setInterval(temp._ThreadControl, 1); //把this._KeyControl注冊到document的鍵盤單擊 document.onkeydown = this._KeyControl; //把this._KeyControl注冊到document的鼠標點擊document.oncontextmenu=function(){return false;}//document.onmouseup = this._KeyControl;_GameChoose._Start(); }, _interval: null } //---------------------------------------------------- _PageControl._StartRegedit(); {//Game1}{//Game2}{//game3game3.mapIndex=0;game3._nowMap = [[],[],[],[],[],[],[],[],[],[]];game3._ren =[0,0];//當前人的位置game3._size=10;//方陣10*10地圖game3._mapPic=['','※','◎','■','◆','☆','★','○','●','□'];//無圖片時備用{//地圖//0邊界,1地,2井,3墻,4磚,5箱,6箱井,7人,8人井,9墻井game3._Map=[[//0 換成10行顯示會更直觀點,為了省行數^_^先收起來了[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,0,0,0],[0,0,1,1,5,1,1,0,0,0],[0,0,1,1,5,5,1,0,0,0],[0,0,1,7,1,3,3,0,0,0],[0,0,1,1,2,2,2,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[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,2,2,2,4,4,4,0,0],[0,0,1,1,5,1,1,1,0,0],[0,0,5,1,1,4,5,7,0,0],[0,0,1,1,4,4,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]],[//2[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,1,1,1,1,2,0,0],[0,0,3,1,1,5,1,2,0,0],[0,0,3,3,5,1,1,2,0,0],[0,0,7,5,1,1,1,1,0,0],[0,0,1,1,3,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]],[//3[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,7,1,1,1,1,0,0],[0,0,0,1,5,1,5,1,0,0],[0,0,0,3,3,5,3,3,0,0],[0,0,0,3,1,1,3,3,0,0],[0,0,0,3,1,1,2,2,0,0],[0,0,0,3,1,5,2,2,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0]]];}game3._ShowMap = function(){//this._nowMap = this._Map[this.mapIndex].concat();var innerHTML="<div   class="iwvjtn8m0"   id='game3_innerHTML'>";for(var i=0;i<this._size;i++){for(var j=0;j<this._size;j++){var a=this._Map[this.mapIndex][i][j];this._nowMap[i][j]=a;//復制到臨時地圖if(this._Map[this.mapIndex][i][j]==7||this._Map[this.mapIndex][i][j]==8){this._ren=[i,j];}//記錄人所在的位置innerHTML+='';//'+this._mapPic[a]+' //無圖片時備用}}innerHTML+='</div>';if(this._FrameGame)this._FrameGame.innerHTML=innerHTML;//this._nowMap = [];//this._nowMap=this._Map[this.mapIndex].concat(); //奇怪,這個數組復制成功后還是會改變原地圖數據,最后只能采取上面的賦值復制了}game3._Move = function(a,b,c){//人從a走到b,c是后一格var ma=this._nowMap[a[0]][a[1]];var mb=this._nowMap[b[0]][b[1]];if(mb==1||mb==2){//目的地是地板或井,可以直接走this._nowMap[a[0]][a[1]]=ma==8?2:1;this._nowMap[b[0]][b[1]]=mb==2?8:7;document.getElementById("a_"+a[0]+"_"+a[1]).className="a"+(ma==8?2:1);document.getElementById("a_"+b[0]+"_"+b[1]).className="a"+(mb==2?8:7);//document.getElementById("a_"+a[0]+"_"+a[1]).innerHTML=this._mapPic[ma==8?2:1];//document.getElementById("a_"+b[0]+"_"+b[1]).innerHTML=this._mapPic[mb==2?8:7];this._ren=b;}else if(mb==5 || mb==6){//mb==3 || mb==9 || //加入表示墻可移動if(c[0]>=0&&c[0]<this._size&&c[1]>=0&&c[1]<this._size){//合法位置var mc=this._nowMap[c[0]][c[1]];if(mc==1||mc==2){//隔一格是地板或井,可以推著走var cn=mc==2?(mb==3?9:(mb==5?6:mb)):(mb==6?5:(mb==9?3:mb));//這個值不太好理解,最好自己在紙上畫畫各種情況var bn=(mb==6||mb==9)?8:7;var an=ma==8?2:1;this._nowMap[c[0]][c[1]]=cn;this._nowMap[b[0]][b[1]]=bn;this._nowMap[a[0]][a[1]]=an;document.getElementById("a_"+a[0]+"_"+a[1]).className="a"+an;document.getElementById("a_"+b[0]+"_"+b[1]).className="a"+bn;document.getElementById("a_"+c[0]+"_"+c[1]).className="a"+cn;//document.getElementById("a_"+a[0]+"_"+a[1]).innerHTML=this._mapPic[an];//document.getElementById("a_"+b[0]+"_"+b[1]).innerHTML=this._mapPic[bn];//document.getElementById("a_"+c[0]+"_"+c[1]).innerHTML=this._mapPic[cn];this._ren=b;}}}var mx=0;var mxj=0;for(var i=0;i<this._size;i++){//驗證是否結束for(var j=0;j<this._size;j++){if(this._Map[this.mapIndex][i][j]==5)mx++;if(this._nowMap[i][j]==6)mxj++;}}if(mx==mxj){//成功了,下一級this.mapIndex++;if(this.mapIndex>this._Map.length-1){this.mapIndex=0;this._AnmEnd._play();}this._FrameGame.innerHTML="";this._ShowMap();}}game3._Load = function(){this._AnmNext = this._AnmNext || new Animation(null); var temp = this; //得到當前對象 this._AnmNext._palyEnd = this._AnmNext._palyEnd || function() { temp._FrameTitle = _HtmlControl._newPanel(0, 0, 400, 30); temp._FrameTitle.innerHTML = "<b>"+(temp._name || "未命名游戲")+"</b>"; temp._FrameMain = _HtmlControl._newPanel(30, 30, 370, 370); temp._FrameState = _HtmlControl._newPanel(0, 30, 50, 180);temp._FrameControl = _HtmlControl._newPanel(0, 210, 50, 190);temp._FrameControl.innerHTML = "<br>Enter<br>重<br>玩<br>,<br><br>Esc<br>退<br>出";temp._FrameGame = _HtmlControl._newPanel(90, 90, 240, 240); _HtmlControl._ClearArea(); _HtmlControl._AddControl(temp._FrameTitle); _HtmlControl._AddControl(temp._FrameMain); _HtmlControl._AddControl(temp._FrameState); _HtmlControl._AddControl(temp._FrameControl); _HtmlControl._AddControl(temp._FrameGame); } this._AnmNext && this._AnmNext._play();//this._ShowMap();}game3._LControl = function(date){if (this._FrameMain) { var innHTML = "<b>"+ this._name + "</b>  <span style='display:inline-block;width:150px;text-align:left;'>游戲時間：" + date.getSeconds() + "秒" + date.getMilliseconds() + "</span><br><br>"; this._FrameTitle.innerHTML = innHTML; this._FrameState.innerHTML = "<br><br><br>第<br>"+(this.mapIndex+1)+"<br>關";if(this._FrameGame.innerHTML=="")this._ShowMap();}}game3._KControl = function(event) {var a=this._ren.concat();var b=[0,0];var c=[0,0];switch (event.keyCode) { case _KeyParameters.KeyUp: {//alert("上"); b[0]=a[0]-1;b[1]=a[1];c[0]=a[0]-2;c[1]=a[1];if(b[0]>=0 && this._Map[this.mapIndex][b[0]][b[1]]>0){this._Move(a,b,c);}}break; case _KeyParameters.KeyDown: {//alert("下"); b[0]=a[0]+1;b[1]=a[1];c[0]=a[0]+2;c[1]=a[1];if(b[1]<this._size && this._Map[this.mapIndex][b[0]][b[1]]>0){this._Move(a,b,c);}}break; case _KeyParameters.KeyLeft: {//alert("左"); b[0]=a[0];b[1]=a[1]-1;c[0]=a[0];c[1]=a[1]-2;if(b[0]>=0 && this._Map[this.mapIndex][b[0]][b[1]]>0){this._Move(a,b,c);}}break; case _KeyParameters.KeyRight: {//alert("右"); b[0]=a[0];b[1]=a[1]+1;c[0]=a[0];c[1]=a[1]+2;if(b[0]<this._size && this._Map[this.mapIndex][b[0]][b[1]]>0){this._Move(a,b,c);}}break;case _KeyParameters.KeyEnter: {//回車this._FrameGame.innerHTML="";this._ShowMap();}break;default: { }break; } }game3._AnmEnd = newAnimation("游戲通關啦~<br> Esc退出~",function(){game3._Load()});}{//game4}{//game5}} </script> <div   class="iwvjtn8m0"   id="GameFrame" style="width:400px;height:400px;position:relative;z-index:0;margin:0 auto;"></div> <div   class="iwvjtn8m0"   id="debug"></div> </body> </html>

上一篇：jQuery-Tetris 俄羅斯方塊

下一篇：原生JS貪食蛇網頁代碼