经典网页版HTML5推箱子小游戏代码_推箱子网页版资源-CSDN文库

共11个文件

png：7个

db：1个

html：1个

116 浏览量 2020-06-11 17:39:27 上传评论收藏 58KB ZIP 举报

HTML5是现代网页开发的核心技术之一，它在2014年正式成为W3C推荐标准，极大地丰富了网页内容的表现形式和交互性。在这个"经典网页版HTML5推箱子小游戏"中，开发者利用HTML5的Canvas元素创建了一个互动游戏。Canvas是一个基于矢量图形的画布，允许开发者通过JavaScript来绘制动态图像。 Canvas API提供了丰富的绘图功能，包括画线、填充形状、绘制文本以及处理图像等。在这个推箱子游戏中，开发者可能使用了Canvas的`fillRect()`方法来绘制箱子和墙壁，`clearRect()`清除屏幕以便重新绘制每一帧，`beginPath()`、`moveTo()`和`lineTo()`则用于绘制路径，模拟推箱子的动作。 JavaScript作为这个项目的灵魂，负责游戏逻辑的实现。游戏可能包含以下主要部分： 1. **游戏状态管理**：JavaScript会跟踪当前的游戏状态，包括玩家位置、箱子位置、墙壁位置以及关卡进度等。 2. **用户输入处理**：监听键盘事件，当玩家移动时，根据方向键输入更新玩家位置，并检查是否可以推动箱子。 3. **碰撞检测**：通过比较玩家和箱子的位置，判断是否发生碰撞以及是否可以推动箱子。这通常涉及到复杂的几何计算。 4. **游戏规则应用**：根据推箱子的基本规则，如玩家不能走进箱子，只能推一个箱子，箱子只能在空地上被推动等，进行游戏规则的检查。 5. **动画渲染**：使用requestAnimationFrame()来创建流畅的动画效果，每一帧都清除画布并重新绘制当前的游戏状态。 6. **关卡设计**：游戏中的多个关卡可能存储为JSON格式的数据，每个关卡包括地图布局和初始位置。JavaScript解析这些数据并生成相应的游戏场景。 7. **界面交互**：提供开始、重置、下一关等按钮，用户可以通过这些交互控制游戏进程。 8. **音效处理**：可能还包括对用户操作的反馈，例如移动、成功推箱子或失败时播放相应的音效。在这个项目中，`index.html`文件是整个网页的结构定义，包含了游戏的HTML结构和引用的外部资源，如CSS样式表和JavaScript脚本。`images`目录可能包含了游戏中的图形资源，如背景图片、图标等。而`js`目录下的文件则包含了上述提到的JavaScript代码，实现了游戏的所有功能。这个HTML5推箱子小游戏是一个综合运用HTML5 Canvas、JavaScript和可能的CSS3技术的实例，展示了Web开发者如何利用这些技术创造富媒体、交互性强的在线娱乐体验。对于学习和理解HTML5游戏开发的人来说，这是一个很好的实践项目。

资源推荐

资源详情

资源评论

收起资源包目录

经典网页版HTML5推箱子小游戏代码.zip （11个子文件）

images

box.png 4KB

right.png 5KB

up.png 5KB

ball.png 5KB

Thumbs.db 21KB

wall.png 5KB

down.png 6KB

block.gif 393B

left.png 5KB

mapdata100.js 58KB

index.html 8KB

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>经典网页版HTML5推箱子小游戏代码</title> <style>/*css样式表的衣柜*/ *{ margin:0px; padding:0px; } body{ } .game{ width:560px; margin:5px auto; } </style> </head> <body onkeydown="doKeyDown(event)"> <div class="game"> <canvas id="canvas" width="560" height="560"></canvas> <div id="msg"></div> <input type="button" value="上一关" onClick="NextLevel(-1)"> <input type="button" value="下一关" onClick="NextLevel(1)"> <input type="button" value="重玩本关" onClick="NextLevel(0)"> <input type="button" value="游戏说明" onClick="showHelp()"> </div> <script src="js/mapdata100.js"></script> <script> var can = document.getElementById("canvas"); var msg = document.getElementById("msg"); var cxt = can.getContext("2d"); var w = 35,h = 35; var curMap;//当前的地图 var curLevel;//当前等级的地图 var curMan;//初始化小人 var iCurlevel = 0;//关卡数 var moveTimes = 0;//移动了多少次 //预加载所有图片 var oImgs = { "block" : "images/block.gif", "wall" : "images/wall.png", "box" : "images/box.png", "ball" : "images/ball.png", "up" : "images/up.png", "down" : "images/down.png", "left" : "images/left.png", "right" : "images/right.png", } function imgPreload(srcs,callback){ var count = 0,imgNum = 0,images = {}; for(src in srcs){ imgNum++; } for(src in srcs ){ images[src] = new Image(); images[src].onload = function(){ //判断是否所有的图片都预加载完成 if (++count >= imgNum) { callback(images); } } images[src].src = srcs[src]; } } var block,wall,box,ball,up,down,left,right; imgPreload(oImgs,function(images){ //console.log(images.block); block = images.block; wall = images.wall; box = images.box; ball = images.ball; up = images.up; down = images.down; left = images.left; right = images.right; init(); }); //初始化游戏 function init(){ //InitMap(); //DrawMap(levels[0]); initLevel();//初始化对应等级的游戏 showMoveInfo();//初始化对应等级的游戏数据 } //绘制地板 function InitMap(){ for (var i=0;i<16 ;i++ ) { for (var j=0;j<16 ;j++ ) { cxt.drawImage(block,w*j,h*i,w,h); } } } //小人位置坐标 function Point(x,y){ this.x = x; this.y = y; } var perPosition = new Point(5,5);//小人的初始标值 //绘制每个游戏关卡地图 function DrawMap(level){ for (var i=0;i<level.length ;i++ ) { for (var j=0;j<level[i].length ;j++ ) { var pic = block;//初始图片 switch (level[i][j]) { case 1://绘制墙壁 pic = wall; break; case 2://绘制陷进 pic = ball; break; case 3://绘制箱子 pic = box; break; case 4://绘制小人 pic = curMan;//小人有四个方向具体显示哪个图片需要和上下左右方位值关联 //获取小人的坐标位置 perPosition.x = i; perPosition.y = j; break; case 5://绘制箱子及陷进位置 pic = box; break; } //每个图片不一样宽需要在对应地板的中心绘制地图 cxt.drawImage(pic,w*j-(pic.width-w)/2,h*i-(pic.height-h),pic.width,pic.height) } } } //初始化游戏等级 function initLevel(){ curMap = copyArray(levels[iCurlevel]);//当前移动过的游戏地图 curLevel = levels[iCurlevel];//当前等级的初始地图 curMan = down;//初始化小人 InitMap();//初始化地板 DrawMap(curMap);//绘制出当前等级的地图 } //下一关 function NextLevel(i){ //iCurlevel当前的地图关数 iCurlevel = iCurlevel + i; if (iCurlevel<0) { iCurlevel = 0; return; } var len = levels.length; if (iCurlevel > len-1) { iCurlevel = len-1; } initLevel();//初始当前等级关卡 moveTimes = 0;//游戏关卡移动步数清零 showMoveInfo();//初始化当前关卡数据 } //小人移动 function go(dir){ var p1,p2; switch (dir) { case "up": curMan = up; //获取小人前面的两个坐标位置来进行判断小人是否能够移动 p1 = new Point(perPosition.x-1,perPosition.y); p2 = new Point(perPosition.x-2,perPosition.y); break; case "down": curMan = down; p1 = new Point(perPosition.x+1,perPosition.y); p2 = new Point(perPosition.x+2,perPosition.y); break; case "left": curMan = left; p1 = new Point(perPosition.x,perPosition.y-1); p2 = new Point(perPosition.x,perPosition.y-2); break; case "right": curMan = right; p1 = new Point(perPosition.x,perPosition.y+1); p2 = new Point(perPosition.x,perPosition.y+2); break; } //若果小人能够移动的话，更新游戏数据，并重绘地图 if (Trygo(p1,p2)) { moveTimes ++; showMoveInfo(); } //重绘地板 InitMap(); //重绘当前更新了数据的地图 DrawMap(curMap); //若果移动完成了进入下一关 if (checkFinish()) { alert("恭喜过关！！"); NextLevel(1); } } //判断是否推成功 function checkFinish(){ for (var i=0;i<curMap.length ;i++ ) { for (var j=0;j<curMap[i].length ;j++ ) { //当前移动过的地图和初始地图进行比较，若果初始地图上的陷进参数在移动之后不是箱子的话就指代没推成功 if (curLevel[i][j] == 2 && curMap[i][j] != 3 || curLevel[i][j] == 5 && curMap[i][j] != 3) { return false; } } } return true; } //判断小人是否能够移动 function Trygo(p1,p2){ if(p1.x<0) return false;//若果超出地图的上边，不通过 if(p1.y<0) return false;//若果超出地图的左边，不通过 if(p1.x>curMap.length) return false;//若果超出地图的下边，不通过 if(p1.y>curMap[0].length) return false;//若果超出地图的右边，不通过 if(curMap[p1.x][p1.y]==1) return false;//若果前面是墙，不通过 if (curMap[p1.x][p1.y]==3 || curMap[p1.x][p1.y]==5) {//若果小人前面是箱子那就还需要判断箱子前面有没有障碍物(箱子/墙) if (curMap[p2.x][p2.y]==1 || curMap[p2.x][p2.y]==3) { return false; } //若果判断不成功小人前面的箱子前进一步 curMap[p2.x][p2.y] = 3;//更改地图对应坐标点的值 //console.log(curMap[p2.x][p2.y]); } //若果都没判断成功小人前进一步 curMap[p1.x][p1.y] = 4;//更改地图对应坐标点的值 //若果小人前进了一步，小人原来的位置如何显示 var v = curLevel[perPosition.x][perPosition.y]; if (v!=2)//若果刚开始小人位置不是陷进的话 { if (v==5)//可能是5 既有箱子又陷进 { v=2;//若果小人本身就在陷进里面的话移开之后还是显示陷进 }else{ v=0;//小人移开之后之前小人的位置改为地板 } } //重置小人位置的地图参数 curMap[perPosition.x][perPosition.y] = v; //若果判断小人前进了一步，更新坐标值 perPosition = p1; //若果小动了返回true 指代能够移动小人 return true; } //判断是否推成功 //与键盘上的上下左右键关联 function doKeyDown(event){ switch (event.keyCode) { case 37://左键头 go("left"); break; case 38://上键头 go("up"); break; case 39://右箭头 go("right"); break; case 40://下箭头 go("down"); break; } } //完善关卡数据及游戏说明 function showMoveInfo(){ msg.innerHTML = "第" + (iCurlevel+1) +"关移动次数: "+ moveTimes; } //游戏说明 var showhelp = false; function showHelp(){ showhelp = !showhelp; if (showhelp) { msg.innerHTML = "用键盘上的上、下、左、右键移动小人，把箱子全部推到小

评论收藏

内容反馈