games-基于DOM、JS和HTML5的小游戏系列源代码资源-CSDN文库

共31个文件

js：10个

png：8个

html：7个

html5

DOM

games

5星 · 超过95%的资源需积分: 50 200 浏览量 2012-02-13 09:48:58 上传评论 18 收藏 283KB RAR 举报

这些文件代表了一系列基于Web技术开发的小游戏，主要利用了HTML5、JavaScript（JS）和DOM（文档对象模型）技术。让我们深入探讨一下这些技术以及它们如何应用于创建在线游戏。 HTML5是超文本标记语言的最新版本，它极大地增强了Web开发的功能。HTML5引入了许多新元素，如`<canvas>`，用于在网页上进行动态图形绘制，这在创建游戏场景和动画时非常有用。此外，`<audio>`和`<video>`元素使得在网页中嵌入音频和视频变得更加容易，对于游戏中的音效和背景音乐来说是必不可少的。 DOM是Web页面内容的结构化表示，允许通过JavaScript与网页的各个部分进行交互。通过DOM，开发者可以动态地修改页面内容，例如创建、删除或修改游戏元素，响应用户输入，更新分数等。JS是实现这一功能的关键，它是一种强大的脚本语言，广泛用于浏览器端的交互式应用。在这些游戏中，JavaScript起到了核心作用。它控制着游戏逻辑，包括玩家的移动、碰撞检测、计分系统等。JS还可以处理用户事件，如键盘输入和鼠标点击，使玩家能够与游戏互动。例如，通过监听键盘事件，开发者可以实现角色的移动；通过检测元素间的碰撞，可以实现游戏内的障碍物或敌人碰撞效果。 CSS3，虽然在文件名列表中没有明确指出，但在游戏开发中也扮演着重要角色。CSS3负责游戏的视觉呈现，包括颜色、布局、动画和过渡效果。通过使用CSS3，开发者可以创建引人注目的游戏界面，增强用户体验。例如，使用`transform`属性可以实现物体旋转、缩放或位移，`transition`和`animation`则可以制作出流畅的动态效果。在测试这些游戏时，推荐使用Firefox或Chrome浏览器，因为它们对HTML5和CSS3的支持更为全面。相比之下，Internet Explorer和Opera可能在某些特性上存在兼容性问题，可能导致游戏无法正常运行或显示不完全。总结来说，这个压缩包包含的是一系列利用HTML5、JavaScript和DOM技术开发的Web小游戏。通过学习这些源代码，开发者可以提升自己在Web游戏开发方面的技能，了解如何结合HTML5的新特性、JavaScript的动态交互以及DOM的页面操作来创建吸引人的游戏体验。同时，这也提醒我们，在开发跨平台应用时，要考虑不同浏览器的兼容性问题，以确保更广泛的用户群体能顺利享受游戏的乐趣。

资源推荐

资源详情

资源评论

收起资源包目录

games.rar （31个子文件）

css3

canvas-mouse

img

font2.png 1KB

font3.png 323B

font4.png 1KB

font.png 689B

font5.png 6KB

canvas-mouse.html 1KB

canvas-mouse.js 3KB

canvas-mouse.css 634B

man

man.js 3KB

man.html 1KB

image

minhand.png 14KB

sechand.png 15KB

clockface.jpg 61KB

hourhand.png 14KB

game_name-finghting

img

face

def.gif 6KB

name-fighting.css 3KB

name-fighting.html 2KB

script

jquery-1.4.4.min.js 77KB

name-fighting.js 10KB

jquery-1.4.4.min.js 77KB

selector.js 610B

kingofwild

kingofwild.js 14KB

Thumbs.db 8KB

map.jpg 144KB

kingofwild.html 1KB

clock

clock.html 757B

clock.js 2KB

boomRoom

boom-room.html 2KB

boom-room.js 10KB

fivegame

myFivegame.html 1KB

myFivegame.js 5KB

<!DOCTYPE html> <html lang="zh-CN"> <head> <title>boom room</title> <style> * {padding:0;margin:0} body {padding:20px 0 0;} .wrap {width:1000px;margin:0 auto;text-align:center;position:relative;} .top {margin:0 auto;height40px;width:800px;font-size:18px;color:#ff0;font-weight:bold;text-align:center;background:#aaa;border-left:1px solid #000;border-right:1px solid #000;line-height:25px;} .room {margin:0 auto;width:800px;height:400px;background:#efe;border:1px solid #000;overflow:hidden;position:relative;} .left {width:200px;height:400px;background:#66f;float:left;position:relative;} .right {width:200px;height:400px;background:#f33;float:right;position:relative;} .boom-bed {width:400px;height:400px;background:#aaa;float:left;position:relative;} .boom {position:absolute;width:40px;height:40px;left:0px;top:0px;cursor:move;border-radius:20px;-moz-border-radius:20px;-webkit-border-radius:20px} .b {background:#00f;border:1px solid transparent} .b:hover {border:1px solid #fff;background:#55f} .r {background:#f00;border:1px solid transparent} .r:hover {border:1px solid #fff;background:#f33} .life {text-align:center} .life span {color:#f00;} .state-booms span {color:#000} .max-booms span {color:#000} .user {position:absolute;top:20px;left:100px;} .state-booms {position:absolute;top:25px;left:700px;} .max-booms {position:absolute;top:5px;left:700px;} </style> <script src="../js/jquery-1.4.4.min.js"></script> <script src="boom-room.js"></script> </head> <body> <div class="wrap"> <div class="top"> <div class="score"><b>SCORE:</b><span class="point">0</span></div> <div class="life"><b>left life:</b><span>3</span></div> <div class="state-booms"><b>state booms:</b><span>0</span></div> <div class="max-booms"><b>max booms:</b><span>15</span></div> <div class="user"><input class="player-name" value="" type="box" placeholder="请输入您的游戏名" /><input class="start-btn" type="button" value="开始" /><input class="end-btn" type="button" value="结束" /></div> </div> <div class="room"> <div class="left blue"></div> <div class="boom-bed">  </div> <div class="right red"></div> </div> <div class="info"> <p> <span>最高分[<strong class="name">name</strong>:<em class="high-score">0</em>]</span> </p> </div> </div> </body> </html>

评论收藏

内容反馈