js&html5实现消星星游戏
前段时间看见园子里有同学用js+jquery实现了消星星游戏,自己也早有这个想法,于是就利用业余时间用js+html5实现了一下消星星游戏。
主要是想实现效果,运用了css3中的动画属性。游戏积分算法是随便写的,所以玩起来难度不高。
由于时间仓促,代码上还有一些冗余,还可以进一步优化。等以后有时间吧。
上代码:
<!doctype html>
<html>
<head>
<title></title>
<style>
#box{height:600px;width:600px;margin:20px auto;border:2px solid #123;position:relative;}
#box div{position:absolute;height:58px;width:58px;border:1px solid #fff;border-radius:4px;transition:all linear 0.25s 0s;-moz-transition:all linear 0.25s 0s;}
[r="1"]{top:540px;}
[r="2"]{top:480px;}
[r="3"]{top:420px;}
[r="4"]{top:360px;}
[r="5"]{top:300px;}
[r="6"]{top:240px;}
[r="7"]{top:180px;}
[r="8"]{top:120px;}
[r="9"]{top:60px;}
[r="10"]{top:0px;}
[c="1"]{left:0px}
[c="2"]{left:60px}
[c="3"]{left:120px}
[c="4"]{left:180px}
[c="5"]{left:240px}
[c="6"]{left:300px}
[c="7"]{left:360px}
[c="8"]{left:420px}
[c="9"]{left:480px}
[c="10"]{left:540px}
#box div[s="s"]{border-color:red;}
.red {
background-color: rgba(255, 0, 0, 0.5);
}
.green {
background-color: rgba(0, 255, 0, 0.5);
}
.blue {
background-color: rgba(0, 0, 255, 0.5);
}
.yellow {
background-color: rgba(255, 255, 0, 0.5);
}
.lightblue {
background-color: rgba(0, 255, 255, 0.5);
}
</style>
</head>
<body> <div id="title"> </div>
<div id="msg"> </div>
<div id="box">
</div> <script> Array.prototype.has_item = function(item){
for(var i=0,l=this.length;i<l;i++){
//if(d == true) console.log(item,this[i],item == this[i]);
if(item == this[i]){
return true;
}
}
return false;
} !function(){
var stage = 0,
stage_target = 0,
score = 0,
selected_color = null,
selected_stars = [],
colors = ['red','green','blue','yellow','lightblue'],
box = $('box');
if(box === null) return false;
init(); function $(id){
return document.getElementById(id) ? document.getElementById(id) : null;
} // 页面初始化函数
function init(){
stage++;
if(stage == 1){
stage_target = 1000;
}else{
stage_target = stage_target + 2000;
}
$('title').innerHTML = "stage:"+stage+";target:"+stage_target;
var frag = document.createDocumentFragment();
for(var r=1;r<=10;r++){
for(var c=1;c<=10;c++){
var color = colors[Math.floor(Math.random() * 5)];
var div = document.createElement('div');
div.id = r+'_'+c;
div.setAttribute('r',r);
div.setAttribute('c',c);
div.className = color;
div.onclick = click_star;
frag.appendChild(div);
}
}
box.appendChild(frag);
} // 单机星星事件函数
function click_star(){
if(selected_stars.length == 0 || !selected_stars.has_item(this)){ clear_selected();
select_stars(this);
}else if(selected_stars.length > 1){
pop_selected();
clear_selected();
after_pop();
check_single();
}
} // 首次单击时选中相同颜色相邻星星
function select_stars(current_star){
if(current_star.getAttribute('s') == 's') return;
current_star.setAttribute('s','s');
selected_color = current_star.className;
selected_stars.push(current_star); var r = parseInt(current_star.getAttribute('r')),
c = parseInt(current_star.getAttribute('c')),
t_star = {},
r_star = {},
b_star = {},
l_star = {};
var all_stars = $('box').getElementsByTagName('div');
for(var i=0,l=all_stars.length;i<l;i++){
if(all_stars[i].getAttribute('r') == r+1 && all_stars[i].getAttribute('c') == c){
t_star = all_stars[i];
}else if(all_stars[i].getAttribute('r') == r && all_stars[i].getAttribute('c') == c+1){
r_star = all_stars[i];
}else if(all_stars[i].getAttribute('r') == r-1 && all_stars[i].getAttribute('c') == c){
b_star = all_stars[i];
}else if(all_stars[i].getAttribute('r') == r && all_stars[i].getAttribute('c') == c-1){
l_star = all_stars[i];
}
}
if(t_star.className == selected_color){
select_stars(t_star);
}
if(r_star.className == selected_color){
select_stars(r_star);
}
if(b_star.className == selected_color){
select_stars(b_star);
}
if(l_star.className == selected_color){
select_stars(l_star);
}
} // 取消已选中星星状态
function clear_selected(){
selected_stars = [];
var all_stars = $('box').getElementsByTagName('div');
for(var i=0,l=all_stars.length;i<l;i++){
all_stars[i].setAttribute('s','');
}
} // 消掉已选中星星
function pop_selected(){
for(var i=0,l=selected_stars.length;i<l;i++){
selected_stars[i].parentNode.removeChild(selected_stars[i]);
}
score += 5 * l * l;
$('msg').innerHTML = 'score:'+score;
} // 一次消星星动作完成以后的回调函数,用来填补已消掉星星空出来的空白
function after_pop(){
var all_stars = $('box').getElementsByTagName('div');
var not_exist_c = [1,2,3,4,5,6,7,8,9,10];
for(var i=0,l=all_stars.length;i<l;i++){
var r = all_stars[i].getAttribute('r');
var c = parseInt(all_stars[i].getAttribute('c'));
//console.log('======='+c+'=======');
if(not_exist_c.has_item(c)){
not_exist_c.splice(c-1,1,null);
}
if(r > 1){
after_pop_d(all_stars[i],r-1,c);
}
}
//console.log(not_exist_c);
for(var i=9;i>=0;i--){
if(not_exist_c[i] == null){
not_exist_c.splice(i,1);
}
}
after_pop_l(not_exist_c.reverse());
} // 消星星以后被消星星上面的星星向下移动,填补空白
function after_pop_d(star,r,c){
if(document.getElementById(r+'_'+c)){
return;
}else{
star.setAttribute('r',r);
star.id=r+'_'+c;
if(r > 1){
after_pop_d(star,r-1,c)
}
}
} // 消星星以后被如果出现空列,空列右侧的列向左移动,填补空白列
function after_pop_l(not_exist_c){
for(var i=0,l=not_exist_c.length;i<l;i++){
var all_stars = $('box').getElementsByTagName('div');
for(var j=0,n=all_stars.length;j<n;j++){
var c = all_stars[j].getAttribute('c');
var r = all_stars[j].getAttribute('r');
if(c > not_exist_c[i]){
c--;
all_stars[j].setAttribute('c',c);
all_stars[j].id = r+'_'+c;
}
}
}
} //
function check_single(){
if(selected_stars.length>1) return;
var all_stars = $('box').getElementsByTagName('div');
for(var i=0,l=all_stars.length;i<l;i++){
clear_selected();
select_stars(all_stars[i]);
//console.log(selected_stars);
if(selected_stars.length>1){
clear_selected();
return true;
}
}
setTimeout(
function(){
clear_star();
if(stage_target>score){
box.innerHTML = "game over!";
return false;
}
init();
},
2000
);
} //
function clear_star(){
box.innerHTML = '';
}
}(window); </script>
</body>
</html>
js&html5实现消星星游戏的更多相关文章
- 用HTML5+原生js实现的推箱子游戏
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- WebGL实现HTML5贪吃蛇3D游戏
js1k.com收集了小于1k的javascript小例子,里面有很多很炫很酷的游戏和特效,今年规则又增加了新花样,传统的classic类型基础上又增加了WebGL类型,以及允许增加到2K的++类型, ...
- HTML5游戏开发进阶指南(亚马逊5星畅销书,教你用HTML5和JavaScript构建游戏!)
HTML5游戏开发进阶指南(亚马逊星畅销书,教你用HTML5和JavaScript构建游戏!) [印]香卡(Shankar,A.R.)著 谢光磊译 ISBN 978-7-121-21226-0 201 ...
- video.js html5 视频播放器
我个人感觉很不错 https://github.com/videojs/video.js <head> <title>Video.js | HTML5 Video Player ...
- Chart.js | HTML5 Charts for your website.
Chart.js | HTML5 Charts for your website. Chart.js
- cocos2d-x 消类游戏,类似Diamond dash 设计
前几天刚刚在学习cocos2d-x,无聊之下自己做了一个类似Diamond dash的消类游戏,今天放到网上来和大家分享一下.我相信Diamond dash这个游戏大家都玩过,游戏的规则是这样的,有一 ...
- <!--[if IE]><script type="text/javascript" src="matrix/js/html5.js"></script><![endif]-->代码解释
块注释例子 1. <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->2. <!--[if IE]> 所有的I ...
- 原生JS实现的h5小游戏-植物大战僵尸
代码地址如下:http://www.demodashi.com/demo/12755.html 项目介绍 本项目是利用原生js实现的h5小游戏-植物大战僵尸,主要结合了一下自己对于h5小游戏的理解,结 ...
- js实现表格配对小游戏
js实现表格配对小游戏 一.总结 一句话总结: 二.js实现表格配对 1.配对游戏案例说明 实例描述: 当用户点击两个相同的图案或字符后配对成功,全部配对成功后游戏获胜 案例008采用了大家常见的小游 ...
随机推荐
- Azure SQL 数据库与新的数据库吞吐量单位DTU
azure中新的数据库吞吐量单位 (Database Throughput Unit, DTU) 是什么,以及用户如何通过它来了解新服务级别可以提供的服务内容.DTU 对于提供预测性更强的性能体验起着 ...
- CPU制造工艺 级选来决定cpu等级
CPU制造工艺 编辑 CPU制造工艺又叫做CPU制程,它的先进与否决定了CPU的性能优劣.CPU的制造是一项极为复杂的过程,当今世上只有少数几家厂商具备研发和生产CPU的能力.CPU的发展史也可以看作 ...
- Swift :?和 !
Swift语言使用var定义变量,但和别的语言不同,Swift里不会自动给变量赋初始值, 也就是说变量不会有默认值,所以要求使用变量之前必须要对其初始化 .如果在使用变量之前不进行初始化就会报错: v ...
- jQuery ajax的traditional参数的作用
一般的,可能有些人在一个参数有多个值的情况下,可能以某个字符分隔的形式传递,比如页面上有多个checkbox: ? 1 2 3 4 5 6 $.ajax{ url:"xxxx&q ...
- Android Paint的使用以及方法介绍(附源码下载)
要绘图,首先得调整画笔,待画笔调整好之后,再将图像绘制到画布上,这样才可以显示在手机屏幕上.Android 中的画笔是 Paint类,Paint 中包含了很多方法对其属性进行设置,主要方法如下: se ...
- java数组元素的输出
java数组元素的输出 利用Arrays.toString(数组名即可) String[] name = {"Tom", "John", "Nike& ...
- SpringMVC处理脚本,SQL注入问题
SpringMVC处理脚本,SQL注入问题(写的不好勿喷,互相学习) 使用 Filter 来过滤浏览器发出的请求,对每个URI参数请求过滤些关键字,替换成安全的字符.所有请求的 getParamete ...
- EasyUI 在aspx页面显示高度不正常解决办法
<body class="easyui-layout"> <form id="form1" runat="server"& ...
- MySQL中表格各页面的注意和操作项
- Redis 起步
Rdis和JQuery一样是纯粹为应用而产生的,这里记录的是在CentOS 5.7上学习入门文章: 1.Redis简介 Redis是一个key-value存储系统.和Memcached类似,但是解决 ...