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 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 id="GameFrame" style="width:400px;height:400px;position:relative;z-index:0;margin:0 auto;"></div> <div id="debug"></div> </body> </html>

上一篇：jQuery-Tetris 俄罗斯方块

下一篇：原生JS贪食蛇网页代码