jQuery网页版打砖块小游戏源码分享

这是一款基于jQuery实现网页版打砖块小游戏源码,满满的童年回忆。

为大家分享的jQuery实现网页版打砖块小游戏源码如下

效果演示 源码下载

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="gb2312" />
<title>jQuery网页版打砖块小游戏源码</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.5.2.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>

<div class="container">
 <canvas id="scene" width="800" height="600"></canvas>
</div>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#000000">
</div>
</body>
</html>

运行效果图:

以上就是为大家分享的jQuery网页版打砖块小游戏源码,希望大家可以喜欢。

时间: 2015-08-17

JQuery手速测试小游戏实现思路详解

(-1)写在前面 我用的chrome49,jquery3.0,我得到过399分,信不信由你. (1)设计思路 两个p元素放在div里,每个p元素的高度和宽度都和div一样,当鼠标放在div上时,第一个p向上移动(更改marginTop值),当鼠标离开div上时,第一个p向下移动. (2)知识储备 a. :nth-child #lol p:nth-child(1),当前元素p相对于他的父元素的所有子元素,如果第一个元素是p则匹配成功. #lol :nth-child(1) 相当于#lol *:nt

jQuery制作拼图小游戏

源代码思路分析: [一]如何生成图片网格,我想到两种方法: (1)把这张大图切成16张小图,然后用img标签的src (2)只有一张大图,然后每个元素的背景图用css的background-position进行切割定位,这样就需要16个数组[0,0],[-150,0],[-300,0]..........(我采用这种) [二]图片背景定位数组与布局定位数组 在选择了使用CSS定位切图,就需要生成数据. 需要的css背景 定位数组为:[0,0],[-150,0],[-300,0],[-450,0]

jQuery编写网页版2048小游戏

大致介绍 看了一个实现网页版2048小游戏的视频,觉得能做出自己以前喜欢玩的小游戏很有意思便自己动手试了试,真正的验证了这句话-不要以为你以为的就是你以为的,看视频时觉得看懂了,会写了,但是自己实现起来会遇到各种问题.比如,在最后判断游戏是否结束的时候,我写的语句语法是对的,但就是不执行.最后通过对视频源码的分析对比,发现原作者写的一个setTimeout定时器有额外的意思,本来我以为它就是简单的一个延时动画,其实他是在等待另外一个函数执行完毕.-_-||.最后还是很高兴能写出来,也改进了一些源

jQuery实现简易的天天爱消除小游戏

今天分享一枚小demo:<天天爱消除游戏>,我想大家对这个游戏不陌生吧!?近期挺火的一款手游 妙味的讲师也很喜欢玩这款游戏 ,课余时间就写了个简易版天天的爱消除,除了PC端以外,试试在iPad.iPhone上玩吧~ 涉及知识点:JS.HTML5; 游戏截图: CSS: *{ margin:0; padding:0;} #ul1{ position:relative; margin:20px auto; background:#1b1f2b; overflow:hidden;} #ul1 li{

jQuery实现别踩白块儿网页版小游戏

大致介绍 终于结束了考试,放假回家了.这次的别踩白块儿网页版要比之前做的 jQuery编写网页版2048小游戏 要简单一点,基本的思路都差不多. 这篇博客并不是详细的讲解,只是大致介绍函数的作用,其中实现的细节注释中有解释,网上的这个源码有点乱,如果想看比较整齐的源码或者视频的可以QQ联系我(免费)(找共同学习的伙伴) 思路 这个小游戏可以抽象化分为3层 ◆最底下的一层是基本的样式(可见的) ◆中间的层是最主要的,是一个4x3的二维数组,游戏中我们都是对这个二维数组进行操作(不可见的) ◆最上面

基于javascript实现句子翻牌网页版小游戏

本文实例为大家分享了js实现句子翻牌网页版小游戏,供大家参考,具体内容如下 效果图: 实现思路: 考察打字能力和记忆能力的益智小游戏. 1.会先把一段文字显示 2.一小段时间后显示背面 3.输入框输入文字与文字全部对应显示正面 具体代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>

基于javascript实现泡泡大冒险网页版小游戏

本文实例为大家分享了一个很有趣的网页版游戏,有点类似金山打字游戏的青蛙过河,供大家参考,具体内容如下 效果图: 实现思路: 益智类小游戏,主要练习打字能力,基于jq开发. 1.在输入框输入泡泡对应文字,点击enter提交 2.与泡泡文字相对提示分数 3.可以暂停操作 4.每次泡泡着地会减少血量,减少到0结束游戏 5.每过一段时间会加快泡泡下落速度 具体代码: <html> <head> <meta http-equiv="Content-Type" con

jquery之别踩白块游戏的简单实现

前端学习要告一段落了,也没机会写什么像样的东西,然后无意中想起某人以前给我玩了一下别踩白块的游戏,手残还被嘲讽了下,现在想起来觉得这游戏实现起来也不难,于是上星期用jquery写了一个别踩白块的小游戏,就像当初学python的时候一样写了一个2048.然后今天正好抽个时间写个博客纪录下,算是对前一段时间学习的总结,没有玩过的可以去下一个原版的来玩一下,游戏很简单,就是从不断下落的方块中点击黑快,如果点击到百块或者有黑块没被点击到,游戏就算结束.游戏实现起来不难,都是一些小知识点.当时写的时候,脑

Javascript别踩白块儿(钢琴块儿)小游戏实现代码

游戏唯一的一个规则,我们只需要不断踩着黑色方块前进即可,这里根据方向键来踩白块 在规定时间内,每走一次分数加100 游戏内的每一排都是一个有四个元素的数组,当正确的踩到黑块前进后,前一个数组内所有的对象样式属性(backgroundColor)赋值给其后一个数组内的对应位置处的对象,便实现了前进的功能,很简单的思想 <!DOCTYPE html><html> <head lang="en"> <meta charset="UTF-8&

php实现的网页版剪刀石头布游戏示例

本文实例讲述了php实现的网页版剪刀石头布游戏.分享给大家供大家参考,具体如下: <?php /* * Created on 2016-11-25 * */ if (isset($_POST['sub'])) { $what = $_POST['what']; //需要输入的数组 $my_array = array("剪刀","石头","布"); //获胜规则 $guize = array(array("剪刀",&quo

javascript实现别踩白块儿小游戏程序

最近有朋友找我用JS帮忙仿做一个别踩白块的小游戏程序,但他给的源代码较麻烦,而且没有注释,理解起来很无力,我就以自己的想法自己做了这个小游戏,主要是应用JS对DOM和数组的操作. 程序思路:如图:将游戏区域的CSS设置为相对定位.溢出隐藏;两块"游戏板"上分别排布着24块方格,黑色每行随机产生一个,"游戏板"向下滚动并交替显示,将每个操作板的黑块位置存入数组,每次点击时将数组pop出来进行比对(我觉得亮点在这--). 这里是游戏的GitHub地址,大家可以到里点击中

拥有网页版小U盘 ASP.NET实现文件上传与下载功能

今天看到了一篇不错的文章,就拿来一起分享一下吧. 实现的是文件的上传与下载功能. 关于文件上传: 谈及文件上传到网站上,首先我们想到的就是通过什么上传呢?在ASP.NET中,只需要用FileUpload控件即可完成,但是默认上传4M大小的数据,当然了你可以在web.config文件中进行修改,方式如下: <system.web> <httpRuntime executionTimeout="240" maxRequestLength="20480"

jQuery实现的别踩白块小游戏完整示例

本文实例讲述了jQuery实现的别踩白块小游戏.分享给大家供大家参考,具体如下: 首先引入jquery.js 1.css html, body, .contain { width: 100%; height: 96%; overflow: hidden; background-color: #FFFFCC; } .text-center { text-align: center; } .score { font-size: 25px; color: #CB2D01; margin-top: 20