<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
.wrap {
width: 320px;
height: 480px;
margin: 30px auto 0;
/*background-color: #ccc;*/
}
</style>
</head>
<body οnlοad="pageOnLoad()">
<div class="wrap">
<canvas id="canvas" width="250" height="400"></canvas>
<script type="text/javascript">
G = function(id) {
return document.getElementById(id);
}
var canvas = '', ctx = '', img = '';
var x = 0, y = 0; //方块的位置
var stepX = 25, stepY =25; //上下，左右移动的步长
var deviceW = 250, deviceH = 500; //舞台的宽和高
var x0 = 10, y0 = 100;
var totalCount = 0//总局数;
var builder = [{x0:1,x1:1,x3:0,x4:0,x5:1,x6:1,x7:1,x8:1,x9:0},{x0:1,x1:1,x3:0,x4:0,x5:1,x6:1,x7:1,x8:1,x9:0}]//建筑物
var push = false//暂停
var point = 0;//总分
var imgDir = ['0', '1', '2', '3'];//方块方向
var curentDir = 0; //当前方向
var type = ['a', 'b', 'c', 'd', 'e','f']; //方块代码//a:条形//b:7字形 //c:闪电形//d:凸形//e:田形//f:闪电形
var currentType = '';
var speed = 300//速度
var stepYInit = 20//初始速度
var position={'a0':[4,0,0,0],'a1':[1,1,1,1],'a2':[4,0,0,0],'a3':[1,1,1,1]}
function init(element) {
canvas = G(element);
ctx = canvas.getContext('2d');
img = new Image();
x = deviceW / 2;
y = 0;
//ctx.fillText('well come !', 150, 80);
}
//绘制图形
function drawCanvas(x, y) {
var ch=400-(builder.length-1)*25;
ctx.clearRect(0, 0, deviceW, ch);
ctx.drawImage(img, x, y);
}
//进行一个回合
function playOne() {
currentType = makeType(type)
selectImg(currentType, 0);
drawWall()
nomal = setInterval(function() {
if(push||y>deviceH)
window.clearInterval(nomal)
//常规速度
else {
doOne(stepY);
}
}, speed)
}
//快速下落
function quickDown() {
drawCanvas(x, y);
}
//方块下降动作一次
function doOne(speed) {
y += speed;
//console.log(y)
drawCanvas(x, y);
if(y > deviceH||hitCheck()) {
window.clearInterval(nomal)
}
}
//画墙
function drawWall(){
var h=builder.length;
for(i=0;i<h;i++){
for(j=0;j<10;j++){
if(builder[i]['x'+j]>0){
//var imgs=new Image();
ctx.drawImage(img, i*25, 400-j*25);
}
}
}
}
//键盘事件
function listenKeyBoard() {
document.body.addEventListener('keydown', keydownEvent, true)
document.body.addEventListener('keyup', keyupEvent, true)
}
//鼠标弹起事件
function keyupEvent(e) {
var events = e || window.event;
var which = events.which;
switch(which) {
case 38:
break;
case 40:
push = false;
nomal = setInterval(function() {
if(!push)
doOne(stepY);
//常规速度
else {
window.clearInterval(nomal)
}
}, speed)
break;
}
}
//鼠标按下的事件
function keydownEvent(e) {
var events = e || window.event;
var which = events.which;
switch(which) {
case 38:
//up-改变方向
curentDir += 1;
curentDir = curentDir > 3 ? 0 : curentDir;
selectImg(currentType, curentDir)
break;
case 40:
//down
push = true;
y += stepY;
move()
break;
case 37:
//left
x -= stepX;
move()
break;
case 39:
//right
x += stepX;
move()
break;
case 32:
//space
break;
}
var h = deviceH - img.height;
var w = deviceW - img.width;
y = y < 0 ? 0 : y;
y = y > h ? h : y;
x = x < 0 ? 0 : x;
x = x > w ? w : x;
left = x;
}
//平移
function move() {
drawCanvas(x, y)
}
//接触时返回真
function hitCheck() {
var h=builder.length;
var squeType=currentType+curentDir;
var y1=0,y2=0,d=0;
p=position[squeType];
var Xn=x/stepX;
for(i=0;i<4;i++){
if(p[i]>0){
y1=p[i]*stepY+y;//方块当前列的最低块高度，总共有四块
for(j=h;j>0;j--){
if(builder[j-1]['x'+(Xn+i)]>0)
{
y2=400-j*stepY;
break;
}
}
d=y2-y1;
}
}
if(d<25)
return true;
else
return false;
//var Ny0=x/stepX;
}
function getFloor() {
}
//随机生成
function makeType(o) {
return "a";
//return o[Math.round(Math.random()*4)]
}
//选图片
//@param type 方块类型,
//@param dir 方块方向
function selectImg(type, dir) {
img.src = type + dir + '.png';
}
//页面加载的时候
function pageOnLoad() {
init('canvas');
listenKeyBoard();
playOne()
}
</script>
</div>
</body>
</html>
<html>
<head>
<style type="text/css">
.wrap {
width: 320px;
height: 480px;
margin: 30px auto 0;
/*background-color: #ccc;*/
}
</style>
</head>
<body οnlοad="pageOnLoad()">
<div class="wrap">
<canvas id="canvas" width="250" height="400"></canvas>
<script type="text/javascript">
G = function(id) {
return document.getElementById(id);
}
var canvas = '', ctx = '', img = '';
var x = 0, y = 0; //方块的位置
var stepX = 25, stepY =25; //上下，左右移动的步长
var deviceW = 250, deviceH = 500; //舞台的宽和高
var x0 = 10, y0 = 100;
var totalCount = 0//总局数;
var builder = [{x0:1,x1:1,x3:0,x4:0,x5:1,x6:1,x7:1,x8:1,x9:0},{x0:1,x1:1,x3:0,x4:0,x5:1,x6:1,x7:1,x8:1,x9:0}]//建筑物
var push = false//暂停
var point = 0;//总分
var imgDir = ['0', '1', '2', '3'];//方块方向
var curentDir = 0; //当前方向
var type = ['a', 'b', 'c', 'd', 'e','f']; //方块代码//a:条形//b:7字形 //c:闪电形//d:凸形//e:田形//f:闪电形
var currentType = '';
var speed = 300//速度
var stepYInit = 20//初始速度
var position={'a0':[4,0,0,0],'a1':[1,1,1,1],'a2':[4,0,0,0],'a3':[1,1,1,1]}
function init(element) {
canvas = G(element);
ctx = canvas.getContext('2d');
img = new Image();
x = deviceW / 2;
y = 0;
//ctx.fillText('well come !', 150, 80);
}
//绘制图形
function drawCanvas(x, y) {
var ch=400-(builder.length-1)*25;
ctx.clearRect(0, 0, deviceW, ch);
ctx.drawImage(img, x, y);
}
//进行一个回合
function playOne() {
currentType = makeType(type)
selectImg(currentType, 0);
drawWall()
nomal = setInterval(function() {
if(push||y>deviceH)
window.clearInterval(nomal)
//常规速度
else {
doOne(stepY);
}
}, speed)
}
//快速下落
function quickDown() {
drawCanvas(x, y);
}
//方块下降动作一次
function doOne(speed) {
y += speed;
//console.log(y)
drawCanvas(x, y);
if(y > deviceH||hitCheck()) {
window.clearInterval(nomal)
}
}
//画墙
function drawWall(){
var h=builder.length;
for(i=0;i<h;i++){
for(j=0;j<10;j++){
if(builder[i]['x'+j]>0){
//var imgs=new Image();
ctx.drawImage(img, i*25, 400-j*25);
}
}
}
}
//键盘事件
function listenKeyBoard() {
document.body.addEventListener('keydown', keydownEvent, true)
document.body.addEventListener('keyup', keyupEvent, true)
}
//鼠标弹起事件
function keyupEvent(e) {
var events = e || window.event;
var which = events.which;
switch(which) {
case 38:
break;
case 40:
push = false;
nomal = setInterval(function() {
if(!push)
doOne(stepY);
//常规速度
else {
window.clearInterval(nomal)
}
}, speed)
break;
}
}
//鼠标按下的事件
function keydownEvent(e) {
var events = e || window.event;
var which = events.which;
switch(which) {
case 38:
//up-改变方向
curentDir += 1;
curentDir = curentDir > 3 ? 0 : curentDir;
selectImg(currentType, curentDir)
break;
case 40:
//down
push = true;
y += stepY;
move()
break;
case 37:
//left
x -= stepX;
move()
break;
case 39:
//right
x += stepX;
move()
break;
case 32:
//space
break;
}
var h = deviceH - img.height;
var w = deviceW - img.width;
y = y < 0 ? 0 : y;
y = y > h ? h : y;
x = x < 0 ? 0 : x;
x = x > w ? w : x;
left = x;
}
//平移
function move() {
drawCanvas(x, y)
}
//接触时返回真
function hitCheck() {
var h=builder.length;
var squeType=currentType+curentDir;
var y1=0,y2=0,d=0;
p=position[squeType];
var Xn=x/stepX;
for(i=0;i<4;i++){
if(p[i]>0){
y1=p[i]*stepY+y;//方块当前列的最低块高度，总共有四块
for(j=h;j>0;j--){
if(builder[j-1]['x'+(Xn+i)]>0)
{
y2=400-j*stepY;
break;
}
}
d=y2-y1;
}
}
if(d<25)
return true;
else
return false;
//var Ny0=x/stepX;
}
function getFloor() {
}
//随机生成
function makeType(o) {
return "a";
//return o[Math.round(Math.random()*4)]
}
//选图片
//@param type 方块类型,
//@param dir 方块方向
function selectImg(type, dir) {
img.src = type + dir + '.png';
}
//页面加载的时候
function pageOnLoad() {
init('canvas');
listenKeyBoard();
playOne()
}
</script>
</div>
</body>
</html>
5972
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
