html5弹球游戏的实现,html5版弹球游戏

按住鼠标左键拖动方块，避免小球撞到你

1.[代码][HTML]代码

//var stage = new createjs.Stage("canvas");

$(function(){

var game = new Game("canvas");

game.setOverHandler(function(t){

$("#hint").html("游戏结束");

});

});

您坚持了 0秒

您的浏览器不支持HTML5

2.[代码][JavaScript]代码

var Enemy = (function(){

var Enemy = function(stage){

createjs.Ticker.setFPS(25);

this.createColor();

this.createxy();

this.shape = new createjs.Shape();

stage.addChild(this.shape);

}

var p = Enemy.prototype;

p.SPEEDX = 6;

p.SPEEDY = 4;

p.redraw = function(stage){

if(this.x < this.R || this.x > 500 - this.R){

this.SPEEDX = -this.SPEEDX;

}

if(this.y < this.R || this.y > 500 - this.R){

this.SPEEDY = -this.SPEEDY;

}

this.x += this.SPEEDX;

this.y += this.SPEEDY;

this.shape.graphics.c().ss(3).s("#ffffff").f(this.color).dc(this.x,this.y,this.R);

stage.update();

}

p.R= 15;

p.contains = function(x,y){

return this.shape.hitTest(x,y);

}

p.createxy = function(){

this.x = Math.random() * (500-this.R*2) + this.R;

this.y = Math.random() * (500-this.R*2) + this.R;

}

p.createColor = function(){

var red = Math.round(Math.random() * 255);

var green = Math.round(Math.random() * 255);

var blue = Math.round(Math.random() * 255);

var r = to16(red);

var g = to16(green);

var b = to16(blue);

this.color = "#" + r + g + b;

}

function _to16(num){ //十六进制单位转换

switch(num){

case 0 : return "0"

case 1 : return "1"

case 2 : return "2"

case 3 : return "3"

case 4 : return "4"

case 5 : return "5"

case 6 : return "6"

case 7 : return "7"

case 8 : return "8"

case 9 : return "9"

case 10 : return "A"

case 11 : return "B"

case 12 : return "C"

case 13 : return "D"

case 14 : return "E"

case 15 : return "F"

}

}

function to16(num){ //十进制 转十六进制

num=num;

if(!isNaN(num)){

var result="";

while(num>=16){ //循环求余后反向连接字符串

result=_to16(num%16)+result;

num=parseInt(num/16);

}

result=_to16(num%16)+result;

return result;

}

else

return "It's Not A Number!"

}

return Enemy;

})()

var Ball = (function(){

var Ball = function(stage){

this.shape = new createjs.Shape();

stage.addChild(this.shape);

this.x = 250;

this.y = 250;

this.shape.graphics.c().f("#ff0000").r(this.x,this.y,this.WIDTH,this.WIDTH);

stage.update();

var $this = this;

this.shape.addEventListener("mousedown",function(evt){

var offsetX = evt.stageX - $this.x;

var offsetY = evt.stageY - $this.y;

evt.addEventListener("mousemove",function(e){

$this.x = e.stageX - offsetX;

$this.y = e.stageY - offsetY;

$this.shape.graphics.c().f("#ff0000").r($this.x,$this.y,$this.WIDTH,$this.WIDTH);

stage.update();

});

});

for(var i = 0; i < 1;i ++){

var e1 = new Enemy(stage,this);

}

}

var p = Ball.prototype;

p.WIDTH = 30;

return Ball;

})()

var Game = (function(){

Number.prototype.fix = function(n){

var pn = Math.pow(10,n);

return Math.round(this*pn) / pn;

}

var Game = function(canvasId){

var stage = new createjs.Stage(canvasId);

var ball = new Ball(stage);

var enemyArr = [];

var t = 0;

var gameOver;

var interval = setInterval(function(){

t += 0.01;

t = t.fix(3);

$("#timer").html(t);

},10);

for(var i = 0; i < 5; i ++){

var e = new Enemy(stage);

enemyArr.push(e);

}

var $this = this;

var tickHandler = function(){

for(var i = 0; i < enemyArr.length; i ++){

var e = enemyArr[i];

e.redraw(stage);

if(e.contains(ball.x,ball.y) || e.contains(ball.x + ball.WIDTH,ball.y) || e.contains(ball.x,ball.y + ball.WIDTH) || e.contains(ball.x + ball.WIDTH,ball.y + ball.WIDTH)){

createjs.Ticker.removeEventListener("tick",tickHandler);

clearInterval(interval);

if(t < 600000){

alert("游戏结束,时间很短");

}else if(t < 30 * 60000){

alert("游戏结束");

}else{

alert("非常强大");

}

gameOver(t);

return;

}

}

}

createjs.Ticker.setFPS(25);

createjs.Ticker.addEventListener("tick",tickHandler);

this.setOverHandler = function(over){

gameOver = over;

}

}

return Game;

})()

3.[图片] 未命名.jpg