HTML5Canvas推箱子小游戏源码.zip资源-CSDN文库

共11个文件

png：7个

gif：1个

js：1个

版权申诉

javascript

jQuery

html5

118 浏览量 2022-11-18 22:13:15 上传评论收藏 61KB ZIP 举报

HTML5 Canvas推箱子小游戏是一款基于HTML5的网页游戏，它利用了Canvas元素的强大绘图功能来实现游戏场景的动态渲染。Canvas是HTML5中的一个核心特性，允许开发者在网页上进行2D图形绘制，为创建交互式动画和游戏提供了可能。在这款游戏中，主要涉及到以下几个关键技术点： 1. **HTML5 Canvas**：Canvas是一个矩形区域，通过JavaScript来控制其内容的绘制。游戏的每一帧都在Canvas上进行绘制，包括游戏背景、箱子、玩家角色以及游戏的边界等。Canvas提供了丰富的绘图方法，如`fillRect()`用于填充矩形，`beginPath()`、`moveTo()`和`lineTo()`用于绘制路径，以及`clearRect()`用于清除指定区域。 2. **CSS**：CSS用于定义游戏界面的样式，包括背景颜色、字体、布局等。例如，可以使用CSS将Canvas定位在页面的中央，或者设置游戏元素的边框和阴影效果。 3. **JavaScript**：JavaScript是实现游戏逻辑的关键，包括游戏规则、用户输入处理、碰撞检测、动画帧更新等。例如，玩家的移动、箱子的推动、墙壁的碰撞检测都是由JavaScript代码控制的。此外，JavaScript还可以用来实现游戏状态的保存和加载。 4. **jQuery**：虽然不是HTML5的原生部分，jQuery是一个广泛使用的JavaScript库，它可以简化DOM操作、事件处理和动画效果。在这款游戏中，jQuery可能被用来简化DOM选择和事件绑定，如监听用户的键盘输入或触摸屏操作。 5. **游戏逻辑**：推箱子游戏的核心逻辑在于判断玩家的移动是否合法，以及箱子是否可以被推动。这通常涉及到复杂的逻辑判断，例如，检查玩家移动后的位置是否已被其他元素占据，或者箱子能否通过玩家的推动到达目标位置。 6. **碰撞检测**：在Canvas上，碰撞检测通常需要自定义算法来实现。这可能涉及到矩形、圆形或者其他形状的相交检测，以确定玩家和箱子是否与墙壁或其他箱子发生碰撞。 7. **动画帧更新**：游戏的流畅性依赖于定期更新和重绘屏幕。这通常通过定时器（如`requestAnimationFrame`）实现，确保在每帧之间进行必要的计算和绘制。 8. **用户交互**：游戏需要响应用户的键盘或鼠标输入，控制玩家角色的移动。这需要监听并处理相应的键盘事件，或者在触摸屏设备上，处理触摸事件。 9. **游戏状态管理**：游戏的状态（如分数、当前关卡、游戏胜利/失败条件）需要妥善管理。这可能涉及到对象的状态属性和一系列的检查函数。 10. **优化**：为了提供更好的用户体验，可能需要对游戏进行性能优化，比如减少不必要的重绘，使用精灵图（Sprite Sheet）来合并多个图像，或者使用requestAnimationFrame来平滑动画效果。通过以上技术的综合运用，HTML5 Canvas推箱子小游戏得以在网页上实现，并带给玩家有趣且互动的游戏体验。同时，这款游戏的源码也是一个很好的学习资源，可以帮助开发者深入理解HTML5 Canvas、JavaScript和其他相关技术在游戏开发中的应用。

资源推荐

资源详情

资源评论

收起资源包目录

HTML5 Canvas推箱子小游戏源码.zip （11个子文件）

HTML5 Canvas推箱子小游戏源码

jiaoben4690

images

right.png 5KB

ball.png 5KB

up.png 5KB

wall.png 5KB

down.png 6KB

Thumbs.db 21KB

box.png 4KB

left.png 5KB

block.gif 393B

index.html 9KB

mapdata100.js 58KB

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5 Canvas推箱子小游戏源码 - 网页模板</title> <style>/*css样式表的衣柜*/ *{ margin:0px; padding:0px; } body{ overflow:hidden; } .game{ width:560px; margin:50px 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

评论收藏

内容反馈

版权申诉