dzk.html 返回列表
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>vking.wang</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="keywords" content="vking.wang"/>
<meta name="description" content="vking.wang"/>
<meta name="format-detection" content="telephone=no"/>
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="white"/>
<style>
.box{
width: 300px;
height: 400px;
position: relative;
background-color: #ccc;
border: 1px solid #000;
}
.box-ball{
width: 30px;
height: 30px;
border-radius: 15px;
background-color: #ff00aa;
position: absolute;
bottom: 30px;
left: 135px;
}
.box-brick{
position: absolute;
width: 60px;
height:30px;
}
.box-footer{
height: 30px;
background-color: #ccc;
border-top: 1px solid #000;
position: absolute;
bottom: 0;
width:100%;
}
.box-footer .box-brick{
left:90px;
bottom: 0;
background-color: #0A246A;
width:120px;
}
</style>
</head>
<body>
<div class="box">
<div class="box-header" id="box-header"></div>
<div class="box-ball" id="box-ball"></div>
<div class="box-footer">
<div class="box-brick" id="box-baffle"></div>
</div>
</div>
</body>
<script>
var width=300,height=400,ball_size=30,brick_width=60,brick_height=30,baffle_width=120;
var $=function(id){return document.getElementById(id);};
/**
* 砖块对象
*/
function brick(x1,y1,x2,y2){
this.pos={
x1:x1,
y1:y1,
x2:x2,
y2:y2
};
this.state=true;
}
brick.prototype.touch=function(x,y,ba){
if(!this.state) return;
var isBaffle=this.pos.y2==height;
var bs2=isBaffle?ball_size/2:0;
//console.log('brick.prototype.touch',this.pos,x,y);
if(x>=this.pos.x1 && x<=this.pos.x2
&& y>=this.pos.y1-bs2 && y<=this.pos.y2){
console.log('brick.prototype.touch'+(isBaffle?'--baffle':''),this.pos,ba);
if(ba.xf>0 && ba.yf>0){
ba.touch({yf:-1});
this.state=isBaffle;
return;
}
if(ba.xf>0 && ba.yf<0){
ba.touch({yf:1});
this.state=isBaffle;
return;
}
if(ba.xf<0 && ba.yf>0){
ba.touch({yf:-1});
this.state=isBaffle;
return;
}
if(ba.xf<0 && ba.yf<0){
ba.touch({yf:1});
this.state=isBaffle;
return;
}
}
}
/**
* 挡板对象
*/
function baffle(){
}
baffle.prototype=new brick((width-baffle_width)/2,height-brick_height,(width-baffle_width)/2+baffle_width,height);
baffle.prototype.initEvent = function () {
var that=this;
if (navigator.userAgent.indexOf("MSIE") > 0) {
//IE
document.onkeydown = function (event) {
//console.log('ie',arguments);
that.move(event.keyCode);
}
} else {
//非IE
window.onkeydown = function (event) {
//console.log('!ie',arguments);
that.move(event.keyCode);
}
}
}
baffle.prototype.move=function(code){
//console.log('baffle.prototype.move',this,code);
var step=brick_width;
if (37 == code) { //left
var x=this.pos.x1-step;
x=x<0?0:x;
}
if (39 == code) { //right
var x=this.pos.x1+step;
x=x>width-brick_width*2?width-brick_width*2:x;
}
this.pos.x1=x;
this.pos.x2=x+baffle_width;
this.draw();
}
baffle.prototype.draw=function(){
$('box-baffle').style.left=this.pos.x1;
}
/**
* 砖块队列
*/
function bricks(){
this.list=[];
for(var i=0;i<15;i++){
var x1=(i%5)*brick_width;
var y1=parseInt(i/5)*brick_height;
this.list.push(new brick(x1,y1,x1+brick_width,y1+brick_height));
}
}
bricks.prototype.touch=function(x,y,ba){
//console.log('bricks.prototype.touch',this.list);
for(var i=0;i<this.list.length;i++){
var b=this.list[i];
if(!b.state) return;
var touch=b.touch(x,y,ba);
if(touch){
return touch;
}
}
}
bricks.prototype.draw=function(){
var tpl='<div class="box-brick" style="background-color: {bgColor};left:{x1}px;top:{y1}px; border: 1px solid #ccc;"></div>',html='';
for(var i=0;i<this.list.length;i++){
var b=this.list[i];
html+=tpl.replace(/\{([^\}]+)\}/g,function($0,$1){
//console.log('brick.prototype.draw',$0,$1);
switch($1){
case 'bgColor':
return b.state?'#ff0000':'#ccc';
case 'x1':
return b.pos.x1;
case 'y1':
return b.pos.y1;
}
});
}
$('box-header').innerHTML=html;
}
/**
* 球对象
*/
function ball(){
//球初始位置
this.x=0;
this.y=0;
this.xf=1; //x轴方向
this.yf=-1; //y轴方向
this.xm=1; //x轴移动步长
this.ym=1; //y轴移动步长
this.state=true;
this.bricks=new bricks();
this.baffle=new baffle();
return this.init();
}
ball.prototype.init=function(){
//球初始位置
this.x=(width-ball_size)/2;
this.y=height-ball_size-20;
this.xf=1; //x轴方向
this.yf=-1; //y轴方向
this.xm=2;//parseInt(Math.random()*5)+1; //x轴移动步长
this.ym=3;//parseInt(Math.random()*5)+1; //y轴移动步长
this.state=true;
this.baffle.initEvent();
return this;
}
ball.prototype.touch=function(obj){
if(typeof obj.xf!='undefined'){
this.xf=obj.xf; //x轴方向
}
if(typeof obj.yf!='undefined'){
this.yf=obj.yf; //x轴方向
}
}
ball.prototype.running=function(){
if(!this.state) return;
var x=this.x+this.xf*this.xm;
var y=this.y+this.yf*this.ym;
//游戏结束
if(y>=height){
this.state=false;
console.log('game over',this);
return;
}
//砖块碰撞
this.bricks.touch(x,y,this);
//挡板碰撞
this.baffle.touch(x,y,this);
//检测边界
if(x>=width-ball_size){
this.touch({xf:-1});
}
if(x<=0){
this.touch({xf:1});
}
if(y<=0){
this.touch({yf:1});
}
this.x=x;
this.y=y;
$('box-ball').style.left=this.x+'px';
$('box-ball').style.top=this.y+'px';
this.bricks.draw();
}
/**
* 游戏定义
*/
function game(){
this.setInterval="";
this.baffle=new baffle();
}
game.prototype.init=function(){
if(!this.setInterval){
var b=new ball();
this.setInterval=setInterval(function () {
b.running();
},10);
}
}
var g=new game();
g.init();
</script>
</html>
Add New Content