htm5 俄罗斯方块
<!DOCTYPE html>
<html manifest="tetris.manifest"> <!--在HTML标签里manifest=”cache.manifest”属性是告诉浏览器我们需要缓存那些文件。-->
<head>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<meta name="apple-mobile-web-app-capable" content="yes" /> <!--apple-mobile-web-app-capable: 这是又一个地方告诉浏览器，它一个离线应用程序-->
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> <!--apple-mobile-web-app-status-bar-style:当处于离线时隐藏状态栏和导航栏。-->
<link rel="apple-touch-icon" href="iphon_tetris_icon.png"/><!--apple-touch-icon:告诉浏览器程序图标的地址。-->
<link rel="apple-touch-startup-image" href="startup.png" /><!--apple-touch-startup-image: 告诉浏览器启动画面的地址。-->
<link rel="stylesheet" href="css/tetris.css" type="text/css" media="screen, mobile" title="main" charset="utf-8"><!--还有一点请注意，最好把CSS文件放在上面，JavaScript文件放在下面。-->
<title>offline Tetris</title> </head>
<body><!--Put your Markup Here-->
<script type="text/javascript" src="css/tetris.js"></script> </body> </html>
css:
body {overflow:hidden; background: #d7d7d7;margin:;padding:;}
#tetris {
width: 320px;
height: 460px;
background:#;
/*border: 1px solid black;*/
}
#canvas {
position:absolute;
background-color: #;
color: #fff;
height: 440px;
border-right:1px solid #fff;
top:20px;
left:;
}
#canvas h1 {margin: ; padding: ;text-align: center; font-size: 30px; padding-top: 200px;}
.piece {
border: 1px solid white;
position: absolute;
}
.square {
position: absolute;
width: 19px;
height: 19px;
border: 1px solid white;
}
.type0 {background-color: #A000F0;}
.type1 {background-color: #00F0F0;}
.type2 {background-color: #F0A000;}
.type3 {background-color: #0000F0;}
.type4 {background-color: #00F000;}
.type5 {background-color: #F00000;}
.type6 {background-color: #F0F000;}
#next_shape {position: relative; top:20px;background-color: #; border: 1px solid white;width: 100px; height: 90px;border-left:none;}
#info {background-color: #; color: #fff; width: 100px; float:left;}
#level {padding-top:10px;}
.game_area{
width:220px;
height:460px;
float:left;
}
.control {
position:absolute;
background-color:transparent;
border:1px solid #fff;
}
.move_left, .move_right {
height:98px;
width:108px;
top:260px;
}
.move_left {
left:0px;
}
.move_right{
left:110px;
}
.move_rotate{
height:238px;
width:218px;
left:0px;
top:20px;
}
.move_down, .move_show_controls {
width:218px;
height:98px;
}
.move_down {
top:360px;
left:0px;
}
.move_pause, .move_show_controls {
width:98px;
height:98px;
}
.move_show_controls {
top:260px;
left:220px;
}
.move_pause {
top:360px;
left:220px;
}
.move_pause div,.move_show_controls div{
color:#fff;
text-align:center;
font-size:%;
}
.for_help {
display:none;
}
.for_help span {
position:relative;
top:25px;
}
.show_controls .for_help {
color:#fff;
display:block;
margin: auto;
text-align:center;
vertical-align:middle;
/*padding-top:25%;*/
font-size:%;
}
#controls {
display:inline;
height:1px;
position:absolute;
top:0px;
left:0px;
}
#ownz {
position:absolute;
top:;
left:;
height:20px;
color:#fff;
}
#ownz a {
color:#ddd;
}
tetris.js
/// <reference path="tetris.js" />
(function() {
var tetris = {
board:[],
boardDiv:null,
canvas:null,
pSize:20,
canvasHeight:440,
canvasWidth:220,
boardHeight:0,
boardWidth:0,
spawnX:4,
spawnY:1,
shapes:[
[
[-1,1],[0,1],[1,1],[0,0] //TEE
],
[
[-1,0],[0,0],[1,0],[2,0] //line
],
[
[-1,-1],[-1,0],[0,0],[1,0] //L EL
],
[
[1,-1],[-1,0],[0,0],[1,0] //R EL
],
[
[0,-1],[1,-1],[-1,0],[0,0] //R ess
],
[
[-1,-1],[0,-1],[0,0],[1,0] // L ess
],
[
[0,-1],[1,-1],[0,0],[1,0] // square
]
],
tempShapes:null,
curShape:null,
curShapeIndex:null,
curX:0,
curY:0,
curSqs:[],
nextShape:null,
nextShapeDisplay:null,
nextShapeIndex:null,
sqs:[],
score:0,
scoreDisplay:null,
level:1,
levelDisplay:null,
numLevels:10,
time:0,
maxTime:1000,
timeDisplay:null,
isActive:0,
curComplete:false,
timer:null,
sTimer:null,
speed:700,
lines:0,
log: function(msg){
if(window["console"] && console["log"]){
console.log(msg);
}
},
init:function() {
this.canvas = document.getElementById("canvas");
this.initBoard();
this.initInfo();
this.initLevelScores();
this.initShapes();
this.bindKeyEvents();
this.bindControlEvents();
this.play(); },
initBoard:function() {
this.boardHeight = this.canvasHeight/this.pSize;
this.boardWidth = this.canvasWidth/this.pSize;
var s = this.boardHeight * this.boardWidth;
for (var i=0;i<s;i++) {
this.board.push(0);
}
//this.boardDiv = document.getElementById('board'); // for debugging
},
initInfo:function() {
this.nextShapeDisplay = document.getElementById("next_shape");
this.levelDisplay = document.getElementById("level").getElementsByTagName("span")[0];
this.timeDisplay = document.getElementById("time").getElementsByTagName("span")[0];
this.scoreDisplay = document.getElementById("score").getElementsByTagName("span")[0];
this.linesDisplay = document.getElementById("lines").getElementsByTagName("span")[0];
this.setInfo('time');
this.setInfo('score');
this.setInfo('level');
this.setInfo('lines');
},
initShapes:function() {
this.curSqs = [];
this.curComplete = false;
this.shiftTempShapes();
this.curShapeIndex = this.tempShapes[0];
this.curShape = this.shapes[this.curShapeIndex];
this.initNextShape();
this.setCurCoords(this.spawnX,this.spawnY);
this.drawShape(this.curX,this.curY,this.curShape);
},
initNextShape:function() {
if (typeof this.tempShapes[1] === 'undefined') {this.initTempShapes();}
try {
this.nextShapeIndex = this.tempShapes[1];
this.nextShape = this.shapes[this.nextShapeIndex];
this.drawNextShape();
} catch(e) {
throw new Error("Could not create next shape. " + e);
}
},
initTempShapes:function() {
this.tempShapes = [];
for (var i = 0;i<this.shapes.length;i++) {
this.tempShapes.push(i);
}
var k = this.tempShapes.length;
while ( --k ) { //Fisher Yates Shuffle
var j = Math.floor( Math.random() * ( k + 1 ) );
var tempk = this.tempShapes[k];
var tempj = this.tempShapes[j];
this.tempShapes[k] = tempj;
this.tempShapes[j] = tempk;
}
},
shiftTempShapes:function() {
try {
if (typeof this.tempShapes === 'undefined' || this.tempShapes === null) {
this.initTempShapes();
} else {
this.tempShapes.shift();
}
} catch(e) {
throw new Error("Could not shift or init tempShapes: " + e);
}
},
initTimer:function() {
var me = this;
var tLoop = function() {
me.incTime();
me.timer = setTimeout(tLoop,2000);
};
this.timer = setTimeout(tLoop,2000);
},
initLevelScores:function() {
var c = 1;
for (var i=1;i<=this.numLevels;i++) {
this['level' + i] = [c * 1000,40*i,5*i]; // for next level, row score, p score, TODO: speed
c = c + c;
}
},
setInfo:function(el) {
this[el + 'Display'].innerHTML = this[el];
},
drawNextShape:function() {
var ns = [];
for (var i=0;i<this.nextShape.length;i++) {
ns[i] = this.createSquare(this.nextShape[i][0] + 2,this.nextShape[i][1] + 2,this.nextShapeIndex);
}
this.nextShapeDisplay.innerHTML = '';
for (var k=0;k<ns.length;k++) {
this.nextShapeDisplay.appendChild(ns[k]);
}
},
drawShape:function(x,y,p) {
for (var i=0;i<p.length;i++) {
var newX = p[i][0] + x;
var newY = p[i][1] + y;
this.curSqs[i] = this.createSquare(newX,newY,this.curShapeIndex);
}
for (var k=0;k<this.curSqs.length;k++) {
this.canvas.appendChild(this.curSqs[k]);
}
},
createSquare:function(x,y,type) {
var el = document.createElement('div');
el.className = 'square type'+type;
el.style.left = x * this.pSize + 'px';
el.style.top = y * this.pSize + 'px';
return el;
},
removeCur:function() {
var me = this;
this.curSqs.eachdo(function() {
me.canvas.removeChild(this);
});
this.curSqs = [];
},
setCurCoords:function(x,y) {
this.curX = x;
this.curY = y;
},
bindKeyEvents:function() {
var me = this;
var event = "keypress";
if (this.isSafari() || this.isIE()) {event = "keydown";}
var cb = function(e) {
me.handleKey(e);
};
if (window.addEventListener) {
document.addEventListener(event, cb, false);
} else {
document.attachEvent('on' + event,cb);
}
},
toggleControls: function(){
var classes = this.controls.className.split(" "),
cls_length = classes.length,
hasClass = false,
newClassList = [];
this.log(classes);
while(cls_length--){
className = classes[cls_length];
if(className == "show_controls"){
hasClass = true;
} else {
newClassList.push(className);
}
}
if(hasClass == false){
newClassList.push("show_controls");
}
this.log(newClassList.join(" "));
this.controls.className = newClassList.join(" "); },
bindControlEvents:function() {
var me = this,
event = "click",
cb = function(e) {
me.handleControl(e);
},
controls = document.getElementById("controls");
this.controls = controls;
if (window.addEventListener) {
this.controls.addEventListener(event, cb, false);
} else {
this.controls.attachEvent('on' + event,cb);
}
},
handleControl:function(e) {
var classes = e.target.className.split(" "),
cls_length = classes.length,
dir = '';
this.log(classes);
while(cls_length--){
class_name = classes[cls_length];
switch (class_name) {
case "move_left":
this.move('L');
break;
case "move_rotate": // rotate
this.move('RT');
break;
case "move_right":
this.move('R');
break;
case "move_down":
this.move('D');
break;
case "move_pause": //esc:pause
this.togglePause();
break;
case "move_show_controls": //esc:pause
this.log("move_show_controls");
this.toggleControls();
break;
default:
break;
}
}
},
handleKey:function(e) {
var c = this.whichKey(e);
var dir = '';
switch (c) {
case 37:
this.move('L');
break;
case 38: // rotate
this.move('RT');
break;
case 39:
this.move('R');
break;
case 40:
this.move('D');
break;
case 27: //esc:pause
this.togglePause();
break;
default:
break;
}
},
whichKey:function(e) {
var c;
if (window.event) {c = window.event.keyCode;}
else if (e) {c = e.keyCode;}
return c;
},
incTime:function() {
this.time++;
this.setInfo('time');
},
incScore:function(amount) {
this.score = this.score + amount;
this.setInfo('score');
},
incLevel:function() {
this.level++;
this.speed = this.speed - 75;
this.setInfo('level');
},
incLines:function(num) {
this.lines += num;
this.setInfo('lines');
},
calcScore:function(args) {
var lines = args.lines || 0;
var shape = args.shape || false;
var speed = args.speed || 0;
var score = 0; if (lines > 0) {
score += lines*this["level" + this.level][1];
this.incLines(lines);
}
if (shape === true) {score += shape*this["level"+this.level][2];}
// if (speed > 0) {score += speed*this["level"+this.level[3]];} TODO: implement speed score
this.incScore(score);
},
checkScore:function() {
if (this.score >= this['level' + this.level][0]) {
this.incLevel();
}
},
gameOver:function() {
this.clearTimers();
this.canvas.innerHTML = "<h1>GAME OVER</h1>";
},
play:function() { //gameLoop
var me = this;
if (this.timer === null) {
this.initTimer();
}
var gameLoop = function() {
me.move('D');
if(me.curComplete) {
me.markBoardShape(me.curX,me.curY,me.curShape);
me.curSqs.eachdo(function() {
me.sqs.push(this);
});
me.calcScore({shape:true});
me.checkRows();
me.checkScore();
me.initShapes();
me.play();
} else {
me.pTimer = setTimeout(gameLoop,me.speed);
}
};
this.pTimer = setTimeout(gameLoop,me.speed);
this.isActive = 1;
},
togglePause:function() {
if (this.isActive === 1) {
this.clearTimers();
this.isActive = 0;
} else {this.play();}
},
clearTimers:function() {
clearTimeout(this.timer);
clearTimeout(this.pTimer);
this.timer = null;
this.pTimer = null;
},
move:function(dir) {
var s = '';
var me = this;
var tempX = this.curX;
var tempY = this.curY;
switch(dir) {
case 'L':
s = 'left';
tempX -= 1;
break;
case 'R':
s = 'left';
tempX += 1;
break;
case 'D':
s = 'top';
tempY += 1;
break;
case 'RT':
this.rotate();
return true;
break;
default:
throw new Error('wtf');
break;
}
if (this.checkMove(tempX,tempY,this.curShape)) {
this.curSqs.eachdo(function(i) {
var l = parseInt(this.style[s],10);
dir === 'L' ? l-=me.pSize:l+=me.pSize;
this.style[s] = l + 'px';
return true;
});
this.curX = tempX;
this.curY = tempY;
} else if (dir === 'D') { //if move is invalid and down, piece must be complete
if (this.curY === 1 || this.time === this.maxTime) {this.gameOver(); return false;}
this.curComplete = true;
}
return true;
},
rotate:function() {
if (this.curShapeIndex !== 6) { // if not the square
var temp = [];
this.curShape.eachdo(function() {
temp.push([this[1] * -1,this[0]]); // (-y,x)
});
if (this.checkMove(this.curX,this.curY,temp)) {
this.curShape = temp;
this.removeCur();
this.drawShape(this.curX,this.curY,this.curShape);
} else { throw new Error("Could not rotate!");}
}
},
checkMove:function(x,y,p) {
if (this.isOB(x,y,p) || this.isCollision(x,y,p)) {return false;}
return true;
},
isCollision:function(x,y,p) {
var me = this;
var bool = false;
p.eachdo(function() {
var newX = this[0] + x;
var newY = this[1] + y;
if (me.boardPos(newX,newY) === 1) {bool = true;}
});
return bool;
},
isOB:function(x,y,p) {
var w = this.boardWidth - 1;
var h = this.boardHeight - 1;
var bool = false;
p.eachdo(function() {
var newX = this[0] + x;
var newY = this[1] + y;
if(newX < 0 || newX > w || newY < 0 || newY > h) {bool = true;}
});
return bool;
},
getRowState:function(y) { //Empty, Full, or Used
var c = 0;
for (var x=0;x<this.boardWidth;x++) {
if (this.boardPos(x,y) === 1) {c = c + 1;}
}
if (c === 0) {return 'E';}
if (c === this.boardWidth) {return 'F';}
return 'U';
},
checkRows:function() { //does check for full lines, removes them, and shifts everything else down
/*var me = this;
var memo = 0;
var checks = (function() {
me.curShape.eachdo(function() {
if ((this[1] + me.curY) > memo) {
return this[1];
}
});
})(); console.log(checks);*/ var me = this;
var start = this.boardHeight;
this.curShape.eachdo(function() {
var n = this[1] + me.curY;
//this.log(n);
if (n < start) {start = n;}
});
this.log(start); var c = 0;
var stopCheck = false;
for (var y=this.boardHeight - 1;y>=0;y--) {
switch(this.getRowState(y)) {
case 'F':
this.removeRow(y);
c++;
break;
case 'E':
if (c === 0) {
stopCheck = true;
}
break;
case 'U':
if (c > 0) {
this.shiftRow(y,c);
}
break;
default:
break;
}
if (stopCheck === true) {
break;
}
}
if (c > 0) {
this.calcScore({lines:c});
}
},
shiftRow:function(y,amount) {
var me = this;
for (var x=0;x<this.boardWidth;x++) {
this.sqs.eachdo(function() {
if (me.isAt(x,y,this)) {
me.setBlock(x,y+amount,this);
}
});
}
me.emptyBoardRow(y);
},
emptyBoardRow:function(y) { // empties a row in the board array
for (var x=0;x<this.boardWidth;x++) {
this.markBoardAt(x,y,0);
}
},
removeRow:function(y) {
for (var x=0;x<this.boardWidth;x++) {
this.removeBlock(x,y);
}
},
removeBlock:function(x,y) {
var me = this;
this.markBoardAt(x,y,0);
this.sqs.eachdo(function(i) {
if (me.getPos(this)[0] === x && me.getPos(this)[1] === y) {
me.canvas.removeChild(this);
me.sqs.splice(i,1);
}
});
},
setBlock:function(x,y,block) {
this.markBoardAt(x,y,1);
var newX = x * this.pSize;
var newY = y * this.pSize;
block.style.left = newX + 'px';
block.style.top = newY + 'px';
},
isAt:function(x,y,block) { // is given block at x,y?
if(this.getPos(block)[0] === x && this.getPos(block)[1] === y) {return true;}
return false;
},
getPos:function(block) { // returns [x,y] block position
var p = [];
p.push(parseInt(block.style.left,10)/this.pSize);
p.push(parseInt(block.style.top,10)/this.pSize);
return p;
},
getBoardIdx:function(x,y) { // returns board array index for x,y coords
return x + (y*this.boardWidth);
},
boardPos:function(x,y) { // returns value at this board position
return this.board[x+(y*this.boardWidth)];
},
markBoardAt:function(x,y,val) {
this.board[this.getBoardIdx(x,y)] = val;
},
markBoardShape:function(x,y,p) {
var me = this;
p.eachdo(function(i) {
var newX = p[i][0] + x;
var newY = p[i][1] + y;
me.markBoardAt(newX,newY,1);
});
},
isIE:function() {
return this.bTest(/IE/);
},
isFirefox:function() {
return this.bTest(/Firefox/);
},
isSafari:function() {
return this.bTest(/Safari/);
},
bTest:function(rgx) {
return rgx.test(navigator.userAgent);
}
/*debug:function() {
var me = this;
var str = '';
for (var i=0;i<me.board.length;i++) {
if(i%me.boardWidth === 0) {str += "<br />"}
if(me.board[i] === 1) {str += ' X ';}
else {str += " * ";}
}
var par = document.createElement('p');
par.innerHTML = str;
me.boardDiv.innerHTML = '';
me.boardDiv.appendChild(par);
},*/
};
tetris.init();
})(); if (!Array.prototype.eachdo) {
Array.prototype.eachdo = function(fn) {
for (var i = 0;i<this.length;i++) {
fn.call(this[i],i);
}
};
} if (!Array.prototype.remDup) {
Array.prototype.remDup = function() {
var temp = [];
for(var i=0; i<this.length; i++) {
var bool = true;
for(var j=i+1; j<this.length; j++) {
if(this[i] === this[j]) {bool = false;}
}
if(bool === true) {temp.push(this[i]);}
}
return temp;
}
}
htm5 俄罗斯方块的更多相关文章
- 还是俄罗斯方块之android版
前面的,口水话 请直接跳过. 虽然现在不比以前了 也没多少人气了,放到首页 都不到几百的点击量.也许博客园整体水平也是在往水的方向发展.不谈那些了,哥也曾经辉煌过 有过一天上千的点击量 ,哥也曾经有过 ...
- x01.Tetris: 俄罗斯方块
最强大脑有个小孩玩俄罗斯方块游戏神乎其技,那么,就写一个吧,玩玩而已. 由于逻辑简单,又作了一些简化,所以代码并不多. using System; using System.Collections.G ...
- 俄罗斯方块C#版
using System; using System.Windows.Forms; using System.Drawing; using System.Media; class me : Form ...
- 纯JS实现俄罗斯方块，打造属于你的游戏帝国
纯JS俄罗斯方块,打造属于你的游戏帝国. 本文原始作者博客 http://www.cnblogs.com/toutou 俄罗斯方块(Tetris, 俄文:Тетрис)是一款电视游戏机和掌上游戏机游戏 ...
- 用纯JS做俄罗斯方块 - 简要思路介绍（1）
大家都知道俄罗斯方块是一款大众化的游戏了,我很小的时候就玩过,今年已经25岁了,可以说俄罗斯方块确实是历史悠久,做俄罗斯方块是我上个星期开始的想法.也许是由于自己从来没有写过这种东西吧,所以有生疏.代 ...
- 趣味python编程之经典俄罗斯方块
国庆期间闲不住,用python把经典俄罗斯方块实现了一遍,找到了些儿时的乐趣.因此突发奇想,打算用python写点经典又确实有趣的小程序形成系列.正统编程之余也给自己找点儿乐趣,换个角度写程序. 原计 ...
- javascript俄罗斯方块游戏
在线试玩:http://keleyi.com/game/5/ 操作指南:键盘方向键←→控制左右移动,↑键变形,↓键快速下落. 别看这段js代码只有短短的100多行,效果却非常不错,用键盘的方向键操作, ...
- 俄罗斯方块（Win32实现，Codeblocks+GCC编译）
缘起: 在玩Codeblocks自带的俄罗斯方块时觉得不错,然而有时间限制.所以想自己再写一个. 程序效果: 主要内容: 程序中有一个board数组,其中有要显示的部分,也有不显示的部分,不显示的部分 ...
- CCF 201604-2 俄罗斯方块
题目不难,但是感觉很有意思.一开始忘了把调试信息注释掉,WA了两次... 试题编号: 201604-2 试题名称: 俄罗斯方块 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 ...
随机推荐
- Java 和 数据库两种方式进行加锁
java方式: publicstatic synchronized int generate(StringtableName){ Stringsql = "select value from ...
- Microsoft SQL Server 2008 R2
1概述 Microsoft SQL Server 2008 R2 提供完整的企业级技术与工具,帮助您以最低的总拥有成本获得最有价值的信息.您可以充分享受高性能,高可用性,高安全性,使用更多的高效管理与 ...
- 全面了解linux服务器
一.查看linux服务器CPU详细情况 判断linux服务器CPU情况的依据如下 具有相同core id的CPU是同一个core的超线程 具有相同physical id的CPU是同一个CPU封装的线程 ...
- shell--管道命令（pipe）
管道命令使用的是“|”这个界定符号 管道命令“|”仅能处理经由前面一个命令传来的正确信息,也就是standard output的信息,对于standard error并没有直接处理的能力 每个管道后面 ...
- Unity3D之高级渲染－Shader Forge增强版
笔者介绍:姜雪伟,IT公司技术合伙人,IT高级讲师,CSDN社区专家.特邀编辑.畅销书作者,国家专利发明人;已出版书籍:<手把手教你架构3D游戏引擎>电子工业出版社和<Unity3D ...
- 本地搭建ELK系统
ELK系统主要由三部分组成,各自是elasticsearch.logstash.kibana. ELK系统收到推送过来的日志后.首先由logstash解析日志中的字段,分解成一个一个的关键字. ela ...
- 谋哥：玩App怎么赚钱（三）
谋哥每天坚持写文章,如今写作速度是越来越快了,当然这样也能节省点时间.只是坚持每天写,确实须要极大的耐力和毅力,由于偶然事件会影响你心情和灵感.只是我一直相信秦刚老师(微信/QQ1111884 )说的 ...
- arduino小车入门教学——第三天（arduino基础）
大家好,我是小编, 记上一节内容点击打开链接 我们今天讲arduino基础. 首先在arduino官网上下载程序. Windows解压版 苹果系统的版本号 好,下载过编程软件.我们就来讲编程. 这是类 ...
- HDU 2191悼念512汶川大地震遇难同胞——珍惜如今，感恩生活(多重背包)
HDU 2191悼念512汶川大地震遇难同胞--珍惜如今.感恩生活(多重背包) http://acm.hdu.edu.cn/showproblem.php?pid=2191 题意: 如果你有资金n元, ...
- ios app在itunesConnect里面的几种状态
原地址:http://blog.csdn.net/dean19900504/article/details/8164734 Waiting for Upload (Yellow) Appears wh ...