HTML5编写的小游戏集锦

 

HTML5 是什么东西?而 HTML5 的优势又在哪里?大家可以回顾之前一篇相关文章了解下 HTML5 知识:《深入分析:Flash VS HTML5到底谁统江山》。现在介绍多款 HTML5游戏,看看 HTML5 到底有什么优势可以吸引我们。下面介绍的所有小游戏都是使用 HTML5+JavaScript 代码编写,大家可以使用 WebKit 浏览器进行游戏。目前,IE 系列中只有 IE 9 支持下面 HTML5 游戏合集的其中一部分,建议大家使用 Chrome、Firefox、Safari 等 WebKit 浏览器进行游戏。

  3D 俄罗斯方块

  这款 3D 俄罗斯方块游戏采用 HTML5+JavaScript 代码编写,游戏采用的是俯视的视角,游戏有点难度,可玩性比较高。


3D_Tetris_Cubeout

  Torus

  另一款俄罗斯方块游戏,采用的立体圆形的角度,难度比上面那个 3D 俄罗斯方块要低。同样采用 HTML5+JavaScript 代码编写。


A_torus_style_game

  Tetris 俄罗斯方块

  经典怀旧版俄罗斯方块,采用 HTML5 代码编写,没有使用 JavaScript 画面还可以,和小时候玩的俄罗斯方块差不多,适合喜欢怀旧的朋友


Tetris

   Agent 008 Ball 桌球游戏

  这一款桌球游戏画面相当的华丽,同时可玩度很高,采用 HTML5+JavaScript 代码编写。看到这款游戏你真的是很难相信它仅仅使用了代码,并没有加入其他的任何的插件。



Agent_008_Ball

  JQuery Racing 赛车游戏

  这款 HTML5 赛车游戏相当能消磨时间,同时操作简单,上手快。适合在上班的时候消磨时间用(如果你很闲的话)。


JQuery_Racing

超级马里奥赛车

  这个游戏就不需要多做介绍了,现在大家来玩一下 HTML5 版本的吧,游戏界面有点简陋,不过流畅度不错。


Super_Mario_Kart

  PAC-MAN

  经典的吃豆人游戏,之前 Google 曾将 Doudle 换成了 HTML5 的吃豆人游戏。现在这个吃豆人同样是采用了 HTML5 编写,效果和我们以前玩的吃豆人一样(呃,本来吃豆人就没什么效果啊,8Bit的游戏效果)。


Pacman

  RGB Invaders

  8Bit 游戏重生,不多说,同样是消磨时间的好游戏。


RGB_Invaders

  Rainbow Blocks

  消除相同颜色方块的小游戏,画面不错,上手度为零,推荐


Rainbow_Blocks

  Lines

  这个 HTML5 游戏与上面的 Rainbow Blocks 有点相似,不过难度相对要高一点。将相同颜色的球移到一起消除,但是每移动一步将会新增3个球。


Lines




文章转自: http://blog.chinaunix.net/uid-20548989-id-1667466.html

好的,下面是用HTML5JavaScript编写的简单拼图小游戏,供参考: HTML代码: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>拼图小游戏</title> <style> #game-board { width: 360px; height: 360px; margin: 0 auto; border: 1px solid #ccc; position: relative; } .game-tile { width: 120px; height: 120px; position: absolute; background-color: #fff; border: 1px solid #ccc; box-sizing: border-box; transition: all 0.5s ease-in-out; } .game-tile img { width: 100%; height: 100%; } .game-tile.col-1.row-1 { top: 0; left: 0; } .game-tile.col-2.row-1 { top: 0; left: 120px; } .game-tile.col-3.row-1 { top: 0; left: 240px; } .game-tile.col-1.row-2 { top: 120px; left: 0; } .game-tile.col-2.row-2 { top: 120px; left: 120px; } .game-tile.col-3.row-2 { top: 120px; left: 240px; } .game-tile.col-1.row-3 { top: 240px; left: 0; } .game-tile.col-2.row-3 { top: 240px; left: 120px; } .game-tile.col-3.row-3 { top: 240px; left: 240px; } .game-tile.blank { background-color: transparent; border: none; } </style> </head> <body> <h1>拼图小游戏</h1> <div id="game-board"> <div class="game-tile col-1 row-1"><img src="tile-1.png"></div> <div class="game-tile col-2 row-1"><img src="tile-2.png"></div> <div class="game-tile col-3 row-1"><img src="tile-3.png"></div> <div class="game-tile col-1 row-2"><img src="tile-4.png"></div> <div class="game-tile col-2 row-2"><img src="tile-5.png"></div> <div class="game-tile col-3 row-2"><img src="tile-6.png"></div> <div class="game-tile col-1 row-3"><img src="tile-7.png"></div> <div class="game-tile col-2 row-3"><img src="tile-8.png"></div> <div class="game-tile col-3 row-3 blank"></div> </div> <button id="shuffle-btn">打乱拼图</button> <script src="puzzle.js"></script> </body> </html> ``` 上面的代码中,我们创建了一个`div`元素作为游戏面板,其中包含9个小格子,每个小格子里面放置了一个图片,同时给每个小格子分配了一个`col-x`和`row-x`的类名,用于控制它们的位置。其中最后一个小格子是空白的,用于实现拼图游戏JavaScript代码: ```javascript window.onload = function() { var board = document.getElementById('game-board'); var tiles = board.children; var shuffleBtn = document.getElementById('shuffle-btn'); var blankTile = tiles[tiles.length - 1]; var blankTilePos = { col: 3, row: 3 }; // 将拼图打乱 shuffleBtn.onclick = function() { shuffleTiles(); } // 移动拼图 for (var i = 0; i < tiles.length; i++) { tiles[i].onclick = function() { var clickedTile = this; var clickedTilePos = getTilePos(clickedTile); var isMovable = checkMovable(clickedTilePos); if (isMovable) { moveTile(clickedTile, clickedTilePos); } } } // 获取拼图位置 function getTilePos(tile) { var classes = tile.className.split(' '); for (var i = 0; i < classes.length; i++) { if (classes[i].indexOf('col-') === 0) { var col = classes[i].split('-')[1]; } if (classes[i].indexOf('row-') === 0) { var row = classes[i].split('-')[1]; } } return { col: parseInt(col), row: parseInt(row) }; } // 检查拼图是否可移动 function checkMovable(tilePos) { var colDiff = Math.abs(tilePos.col - blankTilePos.col); var rowDiff = Math.abs(tilePos.row - blankTilePos.row); if ((colDiff === 1 && rowDiff === 0) || (colDiff === 0 && rowDiff === 1)) { return true; } else { return false; } } // 移动拼图 function moveTile(tile, tilePos) { var blankTileNewPos = { col: tilePos.col, row: tilePos.row }; var blankTileNewClasses = 'game-tile col-' + blankTileNewPos.col + ' row-' + blankTileNewPos.row + ' blank'; var blankTileOldClasses = 'game-tile col-' + blankTilePos.col + ' row-' + blankTilePos.row; blankTile.className = blankTileNewClasses; tile.className = blankTileOldClasses; blankTilePos = blankTileNewPos; } // 随机打乱拼图 function shuffleTiles() { for (var i = 0; i < 100; i++) { var movableTiles = []; for (var j = 0; j < tiles.length; j++) { var tilePos = getTilePos(tiles[j]); var isMovable = checkMovable(tilePos); if (isMovable) { movableTiles.push(tiles[j]); } } var randomTile = movableTiles[Math.floor(Math.random() * movableTiles.length)]; var randomTilePos = getTilePos(randomTile); moveTile(randomTile, randomTilePos); } } } ``` 上面的JavaScript代码中,我们首先获取了拼图面板、所有小格子、打乱按钮和空白小格子,然后通过循环给每个小格子添加了`onclick`事件,当小格子被点击时,会检查该小格子是否可移动,如果可以移动,则调用`moveTile`函数移动拼图。`moveTile`函数会将空白小格子和当前小格子的位置互换,同时更新空白小格子的位置。最后,我们还实现了一个`shuffleTiles`函数,用于随机打乱拼图。 完整的拼图小游戏代码已经完成,可以下载图片和JavaScript文件,将它们放在同一个文件夹下运行游戏
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值