在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
如题，能不能像c++一样写游戏
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
最经典的2048游戏的网页版本就是纯DOM操作的游戏
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
可以啊。2048 打飞机 我都写过
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。插件描述：好玩的JS原生打砖块游戏，有待拓展。
这个下游戏 下载以后就能玩 动态的创建的DIV 碰撞检测的函数是自己写的。
相关插件-游戏
讨论这个项目（8）回答他人问题或分享插件使用方法奖励jQ币
￡湫迹斑斑ぷ 0
东西不错。。下载来看看学习下
老板，你听我解释，我只是来下插件的
疼?只斤蚜?_ 0
一杯敬过往0
我把那个线改成了百分百，10分钟后发现玩玩，球还在动，没有判断过关！！
一直在路上 0
砖块打完之后为什么没有判断过关，而还是Gome Over呢
哥你竟然玩完了 厉害
liyinSakura 0
PROMULGATOR
lifanlingjue
辽宁省沈阳市
关注作者 (1)
收藏此插件 (23)
我当前jQ币余额：正在获取..
已下载次数：155
所需jQ币：3原生js编写2048小游戏
转载 & & 作者：Reber
本文主要介绍了用原生js编写2048小游戏的示例代码，具有很好的参考价值，下面跟着小编一起来看下吧
代码如下：
&!DOCTYPE html&
&title& 2048-game &/title&
&meta charset="utf-8" /&
&style media="screen"&
background-color: #9DA5C3;
opacity: 0.5;
z-index: 1;
.clear:after {
content: "";
.scoreShow {
height: 50
text-align:
line-height: 50
text-decoration:
background-color: #bbada0;
font-size: 36
border-radius: 10
width: 480
height: 50
font-size: 25
#gridPanel {
width: 480
height: 480
background-color: #bbada0;
border-radius: 10
z-index: 1;
width: 100
height: 100
border-radius: 6
background-color: #ccc0b3;
margin: 16px 0 0 16
font-size: 60
text-align:
line-height: 100
background-color: #eee3da
background-color: #ede0c8
background-color: #f2b179
background-color: #f59563
background-color: #f67c5f
background-color: #f65e3b
background-color: #edcf72
background-color: #edcc61
background-color: #9c0
background-color: #33b5e5
background-color: #09c
background-color: #a6c
background-color: #93c
color: #776e65
#gameover {
width: 100%;
left: 50%;
right: 50%;
width: 220
height: 200
border-radius: 10
background-color:
margin-left: -110
text-align:
z-index: 5;
#gameover&a {
display: inline-
width: 170
height: 50
border-radius: 10
text-decoration:
background-color: #9F8D77;
font-size: 36
&div id="game"&
&div class="head clear"&
&div class="scoreShow left"&
&span&Score:&/span&
&span id="score"&&/span&
&div class="selction right" onclick="getModel(event)"&
&a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="model" value="3"&3X3&/a&
&a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="model" value="4"&4X4&/a&
&a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="model" type="button"&5X5&/a&
&a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="model" type="button"&6X6&/a&
&!-- &input type="text" id="model"& --&
&!-- &button type="button" name="button" id="set"&设置游戏&/button& --&
&div id="gridPanel"&
&div id="gameover"&
&h1 id="Score"&&/h1&
&a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="again" onclick="obj.gameStart()"&Try again&/a&
&script type="text/javascript"&
var arr = [];
function $(id) {
return document.getElementById(id);
function C(cls) {
return document.getElementsByClassName(cls);
var obj = {
f: 0, //r行 c列 f查找的下一位置
createEle: 0, //是否需要创建元素
eleFragment: "", //文档片段变量
//游戏开始
gameStart: function() {
obj.init();
document.onkeydown = function(e) { //自动获得事件对象
switch (e.keyCode) { //判断按键号
obj.keyCd = 1;
obj.moveLeft();
obj.keyCd = 2;
obj.moveUp();
obj.keyCd = 1;
obj.moveRight();
obj.keyCd = 2;
obj.moveDown();
$("score").innerHTML = obj. //更新分数
init: function() {
obj.eleFragment = document.createDocumentFragment();
for (r = 0; r & obj.ROW; r++) {
arr.push([]);
for (c = 0; c & obj.CELL; c++) {
arr[r][c] = 0;
if (obj.createEle == 1) {
obj.create(r, c);
if (obj.createEle == 1) {
obj.createEle = 0;
$("gridPanel").innerHTML = ""; //清空原有的元素
$("gridPanel").appendChild(obj.eleFragment); //添加元素
obj.score = 0;
$("score").innerHTML = obj.
$("game").style.display = "none";
$("gameover").style.display = "none";
obj.random(); //开始游戏随机生成两个数
obj.random();
obj.updateView();
//创建div元素，添加到gridPanel中
create: function(r, c) {
var increment = 14,
grWidth, grHeight, grMarginTop, grMarginLeft, ceWidth, ceH
grid = document.createElement("div");
cell = document.createElement("div");
grid.id = "g" + r +
grid.className = "grid";
cell.id = "c" + r +
cell.className = "cell";
if (obj.ROW == 3) {
increment = 24;
} else if (obj.ROW == 4) {
increment = 18;
grWidth = grHeight = ceWidth = ceHight = 66 + (6 - obj.ROW) * //优化后
grMarginTop = grMarginLeft = (480 - grWidth * obj.ROW) / (obj.ROW + 1);
grid.style.width = grWidth + "px";
grid.style.height = grHeight + "px";
grid.style.marginTop = grMarginTop + "px";
grid.style.marginLeft = grMarginLeft + "px";
cell.style.width = ceWidth + "px";
cell.style.height = ceHight + "px";
cell.style.top = grMarginTop + r * (grMarginTop + ceWidth) + "px";
cell.style.left = grMarginLeft + c * (grMarginLeft + ceHight) + "px";
cell.style.lineHeight = ceHight + "px";
cell.style.fontSize = 30 + (6 - obj.ROW) * 10 + "px";
/*if (obj.ROW == 3) {
grid.style.width = "140px";
grid.style.height = "140px";
grid.style.margin = "15px 0 0 15px";
cell.style.width = "140px";
cell.style.height = "140px";
cell.style.top = 15 + r * 155 + "px"; //设置距离上一位置的高度
cell.style.left = 15 + c * 155 + "px"; //设置离左一位置的距离
cell.style.lineHeight = "140px";
} else if (obj.ROW == 4) {
grid.style.width = "100px";
grid.style.height = "100px";
grid.style.margin = "16px 0 0 16px";
cell.style.width = "100px";
cell.style.height = "100px";
cell.style.top = 16 + r * 116 + "px";
cell.style.left = 16 + c * 116 + "px";
cell.style.lineHeight = "100px";
} else if (obj.ROW == 5) {
grid.style.width = "75px";
grid.style.height = "75px";
grid.style.margin = "17.5px 0 0 17.5px";
cell.style.width = "75px";
cell.style.height = "75px";
cell.style.top = 17.5 + r * 92.5 + "px";
cell.style.left = 17.5 + c * 92.5 + "px";
cell.style.fontSize = "40px";
cell.style.lineHeight = "75px";
} else if (obj.ROW == 6) {
grid.style.width = "66px";
grid.style.height = "66px";
grid.style.margin = "12px 0 0 12px";
cell.style.width = "66px";
cell.style.height = "66px";
cell.style.top = 12 + r * 78 + "px";
cell.style.left = 12 + c * 78 + "px";
cell.style.fontSize = "30px";
cell.style.lineHeight = "66px";
obj.eleFragment.appendChild(grid);
obj.eleFragment.appendChild(cell);
//随机产生一个新的数
random: function() {
while (1) {
var row = Math.floor(Math.random() * obj.ROW);
var cell = Math.floor(Math.random() * obj.CELL);
if (arr[row][cell] == 0) { //判断生成的随机数位置为0才随机生成2或4
arr[row][cell] = (Math.random() & 0.5) ? 4 : 2;
// var row = Math.floor(Math.random() * 4);
// var cell = Math.floor(Math.random() * 4);
// if (arr[row][cell] == 0) { //判断生成的随机数位置为0才随机生成2或4
// arr[row][cell] = (Math.random() & 0.5) ? 4 : 2;
// obj.random();//递归影响执行效率
//更新页面
updateView: function() {
var win = 0;
for (r = 0; r & obj.ROW; r++) {
for (c = 0; c & obj.CELL; c++) {
if (arr[r][c] == 0) { //值为0的不显示
$("c" + r + c).innerHTML = ""; //0不显示
$("c" + r + c).className = "cell" //清除样式
$("c" + r + c).innerHTML = arr[r][c];
$("c" + r + c).className = "cell n" + arr[r][c]; //添加不同数字的颜色
if (obj.ROW == 3 && arr[r][c] == 1024) {
} else if (obj.ROW == 4 && arr[r][c] == 2048) {
} else if (obj.ROW == 5 && arr[r][c] == 4096) {
} else if (obj.ROW == 6 && arr[r][c] == 8192) {
if (win == 1) { //通关
$("game").style.display = "block";
$("gameover").style.display = "block";
$("Score").innerHTML = "You win!&br&Score:" + obj.
if (obj.isGameOver()) { //游戏失败
$("game").style.display = "block";
$("gameover").style.display = "block";
$("Score").innerHTML = "GAME OVER!&br&Score:" + obj.
console.log("gameover");
//游戏失败
isGameOver: function() {
for (r = 0; r & obj.ROW; r++) {
for (c = 0; c & obj.CELL; c++) {
if (arr[r][c] == 0) { //有0还不是gameover
} else if (c != obj.CELL - 1 && arr[r][c] == arr[r][c + 1]) { //左往右 前一个和下一个不相等
} else if (r != obj.ROW - 1 && arr[r][c] == arr[r + 1][c]) { //上往下 上一个和下一个不相等
//查找下一个不为0的数值的位置
find: function(r, c, start, condition, direction) {
if (obj.keyCd == 2) { //上下按键
if (direction == 1) { //向上按键 f++
for (var f = f & f += direction) {
if (arr[f][c] != 0) {
} else { //向下按键 f--
for (var f = f &= f += direction) {
if (arr[f][c] != 0) {
} else { //左右按键
if (direction == 1) { //左按键 f++
for (var f = f & f += direction) {
if (arr[r][f] != 0) {
} else { //右按键 f--
for (var f = f &= f += direction) {
if (arr[r][f] != 0) {
//循环结束仍然没有找到！=0的数值，返回null
//左按键的处理
dealToLeft: function(r) {
for (c = 0; c & obj.ROW; c++) {
next = obj.find(r, c, c + 1, obj.CELL, 1); //找出第一个不为0的位置
if (next == null) //没有找到就返回
//如果当前位置为0
if (arr[r][c] == 0) {
arr[r][c] = arr[r][next]; //把找到的不为0的数值替换为当前位置的值
arr[r][next] = 0; //找到的位置清0
c--; //再次循环多一次，查看后面否有值与替换后的值相同，
} else if (arr[r][c] == arr[r][next]) { //如果当前位置与找到的位置数值相等，则相加
arr[r][c] *= 2;
arr[r][next] = 0;
obj.score += arr[r][c];
move: function(itertor) {
var before, //没处理前
//after处理后
before = arr.toString();
itertor(); //执行for函数
after = arr.toString();
if (before != after) { //前后对比，如果不同就update
obj.random();
obj.updateView();
moveLeft: function() {
obj.move(function() {
for (r = 0; r & obj.ROW; r++) {
obj.dealToLeft(r);
// if 当前位置 不为零
// 从当前位置，下一个成员开始，遍历，
// 如果找到，与当前位置相等的数，
// 两者相加，并把不为零的成员，设置为零
// 如果 当前位置是 零
// 从当前位置下一个成员开始遍历
// 如果找到 第一个不为零的成员
// 当前位置数值设置为这个不为零的成员的值 ，并且把那个不为零的成员设置为 0
//右按键处理
dealToRight: function(r) {
for (c = obj.CELL - 1; c &= 0; c--) {
next = obj.find(r, c, c - 1, 0, -1); //找出第一个不为0的位置
if (next == null) //没有找到就返回
//如果当前位置为0
if (arr[r][c] == 0) {
arr[r][c] = arr[r][next]; //把找到的不为0的数值替换为当前位置的值
arr[r][next] = 0; //找到的位置清0
c++; //再次循环多一次，查看后面否有值与替换后的值相同，
} else if (arr[r][c] == arr[r][next]) { //如果当前位置与找到的位置数值相等，则相加
arr[r][c] *= 2;
arr[r][next] = 0;
obj.score += arr[r][c];
moveRight: function() {
obj.move(function() {
for (r = 0; r & obj.ROW; r++) {
obj.dealToRight(r);
//上按键处理
dealToUp: function(c) {
for (r = 0; r & obj.ROW; r++) {
next = obj.find(r, c, r + 1, obj.ROW, 1); //找出第一个不为0的位置
if (next == null)
//如果当前位置为0
if (arr[r][c] == 0) {
arr[r][c] = arr[next][c]; //把找到的不为0的数值替换为当前位置的值
arr[next][c] = 0; //找到的位置清0
r--; //再次循环多一次，查看后面否有值与替换后的值相同
} else if (arr[r][c] == arr[next][c]) { //如果当前位置与找到的位置数值相等，则相加
arr[r][c] *= 2;
arr[next][c] = 0;
obj.score += arr[r][c];
moveUp: function() {
obj.move(function() {
for (c = 0; c & obj.CELL; c++) {
obj.dealToUp(c);
//下按键处理
dealToDown: function(c) {
for (r = obj.ROW - 1; r &= 0; r--) {
next = obj.find(r, c, r - 1, 0, -1); //找出第一个不为0的位置
if (next == null) {
//如果当前位置为0
if (arr[r][c] == 0) {
arr[r][c] = arr[next][c]; //把找到的不为0的数值替换为当前位置的值
arr[next][c] = 0; //找到的位置清0
r++; //再次循环多一次，查看后面否有值与替换后的值相同
} else if (arr[r][c] == arr[next][c]) { //如果当前位置与找到的位置数值相等，则相加
arr[r][c] *= 2;
arr[next][c] = 0;
obj.score += arr[r][c];
moveDown: function() {
obj.move(function() {
for (c = 0; c & obj.CELL; c++) {
obj.dealToDown(c);
window.onload = function() {
obj.createEle = 1;
obj.gameStart();
//切换模式
function getModel(e) { //事件冒泡获取a元素
var a = e.target,
modelValue = 4;
if (a.nodeName == "A") {
if (a.innerHTML == "3X3") {
modelValue = 3;
} else if (a.innerHTML == "4X4") {
modelValue = 4;
} else if (a.innerHTML == "5X5") {
modelValue = 5;
} else if (a.innerHTML == "6X6") {
modelValue = 6;
obj.ROW = obj.CELL = modelV
obj.createEle = 1; //需要创建格子div元素的标志
obj.gameStart();
// var modelValue = parseInt($("model").value);
// if (isNaN(modelValue)) {
// modelValue = 4; //默认是4*4
// if (modelValue &= 2 || modelValue & 6) //2格或者大于6格无效
// obj.ROW = modelV
// obj.CELL = modelV
// obj.createEle = 1;
// obj.gameStart();
// console.log(modelValue);
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具原生js实现打字动画游戏
转载 & & 作者：Atom_L
本文主要分享了原生js实现打字动画游戏的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧
这是昨天用原生的js写的打字动画游戏，主要用的间歇定时器，对象，还有Math方法，感觉还行，主要看消除字母的时间快慢，但是也有bug，就是字母都是一次性生成的，所以一开始，看起来感觉会有种爆炸的感觉，如果能够一次性生成一批，然后分批往下掉就好了，求大神帮忙改改，大家也可以参考参考。
&!DOCTYPE html&
&head lang="en"&
&meta charset="UTF-8"&
&title&&/title&
body,button{
margin: 0;
padding: 0;
background: #333;
width: 400
height: 40
margin: 20
font: bold 30px "Arial";
window.onload= function () {
var start = document.getElementById("start");
var scroll = document.getElementById("scroll");
var time = document.getElementById("time");
var g = 1 ;//Gravity
var timenum = 0 ;//时间的计数
var num = 0 ;//成绩的计数
var gameover =
var timeandtime =
var letters =
//字母放在一个字符串里面，随机选取
var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
//点击开始按钮，字母会自动生成，从顶部，以随机速度落下
//用户操作：按钮对应字母的按钮，然后字母就会消失
//用户没有点击到的按钮到达底部以后会回到顶上重新落下；
//用户清除所有字母后，弹出对话框，显示分数和文字。
//封装一个对象，里面包含获取事件对象，页面位置，清除冒泡，获取事件目标的兼容性方法
var eventUtil = {
getEvent: function (event) {
return event || window.
getPageX: function (event) {
return event.pageX || event.clientX + document.documentElement.scrollL
getPageY: function (event) {
return event.pageY || event.clientY + document.documentElement.scrollT
stopPropagation: function (event) {
if (event.stopPropagation) {
event.stopPropagation();
event.cancelBubble =
getTarget: function (event) {
return event.target || event.srcE
start.onclick= function () {
for(var i = 0 ;i&26;i++){
new letter();
letters = document.body.//将页面中所有的div全部放入一个伪数组中，第一个除外，属于game，因此遍历从1开始
//在键盘上，按下对应的字母键，字母会立即消失，同时分数会增加，并且在上面重新生成；
document.onkeydown = function (event) {
var evt = eventUtil.getEvent(event);
var keychar = String.fromCharCode(evt.keyCode);//将按下的字母键盘码转换成直接的大写字母
for(var i = 1 ;i&letters.i++){
if(keychar===letters[i].innerHTML){
scroll.innerHTML =
document.body.removeChild(letters[i]);
timeandtime=setInterval(function () {
timenum = timenum + 1 ;
console.log(letters);
if(letters.length==1){//当伪数组的长度只有一个时，那么游戏就结束
gameover =
clearInterval(timeandtime);
alert("用时"+timenum+"秒，再接再厉！突破10秒！");
time.innerHTML =
//封装函数
function letter(){
this.x=Math.random()*900+100; //设置位置在100-1000之间
this.speedY = Math.random()*4+1; //速度随机设置在1-5之间
this.value = str[parseInt(Math.random()*25)]; //在26个字母中随机生成一个字母
var letDiv = document.createElement("div");
letDiv.className = "letter";
letDiv.style.top = this.y+"px";
letDiv.style.left = this.x+ "px";
letDiv.innerHTML = this.
document.body.appendChild(letDiv);
//字母往下掉
var that =
this.timer=setInterval(function () {
//leader = leader +
that.y = that.y + that.speedY;
if(that.y&=client().height-letDiv.offsetHeight){
that.y = 0;
that.x = Math.random()*900+100;
if(!gameover){
letDiv.style.left = that.x + "px";
letDiv.style.top = that.y + "px";
clearInterval(that.timer);
// 获取可视窗口的宽度和高度窗,兼容性问题
function client() {
width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0,
height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0
&div id="game"&
&button id="start"&开始&/button&
&span&得分:&i id="scroll"&0&/i&&/span&
&span&计时:&i id="time"&0&/i&&/span&
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具原生js写的贪吃蛇网页版游戏特效代码，一共设计了10关，前面5关速度较慢，第8关开始能打到200分是神人
以下是程序代码&meta http-equiv=&Content-Type& content=&text/ charset=utf-8&&
&body&&title&原生js写的贪吃蛇网页版游戏特效代码 demo by js.alixixi.com&/title&&/body&
init:function(){
var bigDiv = this.appendEle(this.addStyle(this.creatEle(),
{w:'900',h:'600',p:'absolute',t:10,l:500}));
for(var i = 0; i&600/30;i++){
Star.data.arrayAll[i] = [];
for(var j = 0; j&900/30; j++){
div = this.addStyle(this.creatEle(),{w:(!+[1,] ? 30 :28),h:(!+[1,] ? 30 :28),f:'left',border:'1px solid #666'});
div.setAttribute('number', i*30+j)
this.appendEle(div,bigDiv)
Star.data.arrayAll[i][j] =
bigDiv = this.appendEle(this.addStyle(this.creatEle(),
{w:'900',h:'600',p:'absolute',t:10,l:500}));
this.pushEleInSelect(Star.data.arrayAll[9][15],Star.data.arrayAll[9][14],Star.data.arrayAll[9][13])
this.keyBoard.apply(this,arguments);
this.appearPoint();
this.leftGo();
appearPoint:function(){
var arrayIn = [];
for(var i = 0; i&600; i++){
if(!this.hasInArray(Star.data.arrayAll[parseInt(i/30)][i%30].getAttribute('number'),Star.data.arraySelect)){
arrayIn.push(Star.data.arrayAll[i])
Star.data.foodNumber = number = parseInt(Math.random()*arrayIn.length);
this.giveColor(number)
giveColor:function(number){
var div = Star.data.arrayAll[parseInt(number/30)][number%30];
Star.timeInterval.timeB = setInterval(function(){
if(div.className == 'shanshuo'){
div.className = ''
div.style.backgroundColor = '#fff'
div.className = 'shanshuo';
div.style.backgroundColor = '#f00'
disappearColor:function(){
clearInterval(Star.timeInterval.timeB);
Star.data.arrayAll[parseInt(Star.data.foodNumber/30)][Star.data.foodNumber%30].style.backgroundColor = '#f00';
hasInArray:function(number,array){
for(var i in array){
if(array[i] instanceof Array){
if(this.hasInArray(number,array[i])){
if(array[i].getAttribute && array[i].getAttribute('number') == number)
keyBoard:function(){
var self =
document.onkeydown = function(e){
e = e? e : window.
switch(e.keyCode){
case 37: if(Star.keycode == 37 || Star.keycode == 39){};
self.leftGo();
case 38: if(Star.keycode == 38 || Star.keycode == 40){};
self.upGo();
case 39: if(Star.keycode == 37 || Star.keycode == 39){};
self.rightGo();
case 40: if(Star.keycode == 38 || Star.keycode == 40){};
self.downGo();
leftGo:function(){
var div, number , self =
Star.keycode = 37;
clearInterval(Star.timeInterval.timeA)
Star.timeInterval.timeA = setInterval(function(){
number = Star.data.arraySelect[0].getAttribute('number');
if(number%30&=0 || self.hasInArray(number-1,Star.data.arraySelect)){
self.guanle();
if(Star.data.foodNumber == number-1){
self.pushEleInSelect(Star.data.arrayAll[parseInt(Star.data.foodNumber/30)][Star.data.foodNumber%30]);
self.disappearColor();
self.appearPoint();
div = Star.data.arraySelect.pop();
div.style.background = '#fff';
self.pushEleInSelect(Star.data.arrayAll[parseInt(number/30)][number%30-1]);
},Star.timeInterval.speed)
upGo:function(){
var div, number , self =
Star.keycode = 38;
clearInterval(Star.timeInterval.timeA)
Star.timeInterval.timeA = setInterval(function(){
number = parseInt(Star.data.arraySelect[0].getAttribute('number'));
if(parseInt(number/30)&=0 || self.hasInArray(number-30,Star.data.arraySelect)){
self.guanle();
if(Star.data.foodNumber == number-30){
self.pushEleInSelect(Star.data.arrayAll[parseInt(Star.data.foodNumber/30)][Star.data.foodNumber%30]);
self.disappearColor();
self.appearPoint();
div = Star.data.arraySelect.pop();
div.style.background = '#fff';
self.pushEleInSelect(Star.data.arrayAll[parseInt(number/30)-1][number%30]);
},Star.timeInterval.speed)
rightGo:function(){
var div, number , self =
Star.keycode = 39;
clearInterval(Star.timeInterval.timeA)
Star.timeInterval.timeA = setInterval(function(){
number = parseInt(Star.data.arraySelect[0].getAttribute('number'));
if(parseInt(number%30)&=29 || self.hasInArray(number+1,Star.data.arraySelect)){
self.guanle();
if(Star.data.foodNumber == number+1){
self.pushEleInSelect(Star.data.arrayAll[parseInt(Star.data.foodNumber/30)][Star.data.foodNumber%30]);
self.disappearColor();
self.appearPoint();
div = Star.data.arraySelect.pop();
div.style.background = '#fff';
self.pushEleInSelect(Star.data.arrayAll[parseInt(number/30)][number%30+1]);
},Star.timeInterval.speed)
downGo:function(){
var div, number , self =
Star.keycode = 40;
clearInterval(Star.timeInterval.timeA)
Star.timeInterval.timeA = setInterval(function(){
number = parseInt(Star.data.arraySelect[0].getAttribute('number'));
if(parseInt(number/30)&=19 || self.hasInArray(number+30,Star.data.arraySelect)){
self.guanle();
if(Star.data.foodNumber == number+30){
self.pushEleInSelect(Star.data.arrayAll[parseInt(Star.data.foodNumber/30)][Star.data.foodNumber%30]);
self.disappearColor();
self.appearPoint();
div = Star.data.arraySelect.pop();
div.style.background = '#fff';
self.pushEleInSelect(Star.data.arrayAll[parseInt(number/30)+1][number%30]);
},Star.timeInterval.speed)
guanle:function(){
alert('撞墙了,总分：' + (Star.data.arraySelect.length-3) * parseInt(1000 / Star.timeInterval.speed));
location.reload();
creatEle:function(tag){
var tagName = tag || 'DIV'
return document.createElement(tagName)
appendEle:function(ele,father){
var father = father || document.body || document.documentElement
father.appendChild(ele)
addStyle:function(ele,css){
for(var i in css){
switch(i){
case 'b' : ele.style.background = css[i];
case 'l' : ele.style.left
= css[i]+'px';
case 'r' : ele.style.right
= css[i]+'px';
case 't' : ele.style.top
= css[i]+'px';
case 'd' : ele.style.down
= css[i]+'px';
case 'p' : ele.style.position
case 'w' : ele.style.width
= css[i]+'px';
case 'h' : ele.style.height
= css[i]+'px';
case 'f' : ele.style.cssFloat
ele.style.styleFloat
: ele.style[i]
pushEleInSelect:function(){
for(var i = 0; i&arguments. i++){
Star.data.arraySelect = [arguments[i]].concat(Star.data.arraySelect)
this.addStyle(arguments[i],{b:'#f00'})
Star.data={
arrayAll : [],
arraySelect:[],
newPoint:null,
foodNumber:0
Star.timeInterval={
timeA:null,
timeB:null
Star.keycode = 0;
window.onload = function(){
var select = Star.creatEle('select');
var optionDefault = Star.creatEle('option');
optionDefault.innerHTML = '请选择关卡'
Star.appendEle(optionDefault,select)
Star.addStyle(select,{w:200,h:30,p:'absolute',left:'40%',top:'40%'})
for(var i = 0 ; i &10 ; i++){
var option = Star.creatEle('option');
option.innerHTML = '第' + (i+1) + '关'
Star.appendEle(option,select);
Star.appendEle(select)
select.onchange = function(){
selectValue = select.options[select.selectedIndex].value || select.options[select.selectedIndex].innerHTML
var number = selectValue.match(/\d+/)[0]
Star.timeInterval.speed = parseInt(200/number);
Star.addStyle(select,{display:'none'});
Star.init();
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
( 18:52:16)
( 18:42:54)
( 14:33:50)
( 13:43:24)
( 12:55:00)
( 12:47:20)
相关排行总榜}