HTML5 小游戏：是男人就撑过30秒

纯屌丝程序猿

2012-01-30

关注关注

话不多说HTML5 图画板写的一个小游戏，原形为是男人就撑过30秒。

下载地址：

具体下载目录在 /2012年资料/1月/30日/HTML5 小游戏：是男人就撑过30秒/

演示地址：http://www.muu.cc/html5/nanren30/index.html

说明：

上下左右控制 ctrl键可加速

player是小球

star是怪物

请用支持canvas的浏览器访问推荐用 firefox 或chrome

代码

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML5游戏:是男人就撑过30秒 || www.88181.com</title>
<script language="javascript" type="text/javascript">
//定义键盘值
var KEY = { D: 68, W: 87, A: 65, S:83, RIGHT:39, UP:38, LEFT:37, DOWN:40, QUICK:17};
//定义输入对象
var input = {
right : false,
up : false,
left : false,
down : false,
quick : false
};
//小球对象
var player = {
speed : 1,
qspeed : 2,
left : 0,
top : 0,
xleft : 0,
dleft : 0,
xtop : 0,
dtop : 0,
r : 5
}
player.init = function(){
thisthis.xleft = this.r;
thisthis.xtop = this.r;
this.dleft = $("myCanvas").width-this.r;
this.dtop = $("myCanvas").height-this.r;
this.left = $("myCanvas").width/2;
this.top = $("myCanvas").height/2;
}
player.getSpeed = function(){
return (input.quick?this.qspeed:this.speed);
}
player.update = function(){
if (input.right) player.left+=player.getSpeed();
if (input.left) playerplayer.left-=player.getSpeed();
if (input.down) player.top+=player.getSpeed();
if (input.up) playerplayer.top-=player.getSpeed();
if (player.left>player.dleft) playerplayer.left=player.dleft;
if (player.left<player.xleft) playerplayer.left=player.xleft;
if (player.top>player.dtop) playerplayer.top=player.dtop;
if (player.top<player.xtop) playerplayer.top=player.xtop;
var c=$("myCanvas");
var ccxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(player.left,player.top,player.r,0,Math.PI * 2,true);
cxt.closePath();
cxt.fill();
}
//星星
var star = function(){
this.x = 0;
this.y = 0;
this.r = 5;
this.c = "#00FF00";
this.ax = 0;
this.ay = 0;
this.a = 0;
this.rAngle = 0;
this.speed = 0;
this.isAddX = true;
this.isAddY = true;
this.init = function(){
var lon = ($("myCanvas").width+$("myCanvas").height)*2;
var rlon = Math.floor(Math.random()*(lon+1));
this.rAngle = Math.floor(Math.random()*91);
if(rlon<$("myCanvas").width){//上
this.x = rlon;
this.y = 0;
}else if(rlon<$("myCanvas").width+$("myCanvas").height){//右
this.x = $("myCanvas").width;
this.y = rlon-$("myCanvas").width;
}else if(rlon<$("myCanvas").width*2+$("myCanvas").height){//下
this.x = $("myCanvas").width - (rlon-$("myCanvas").width-$("myCanvas").height);
this.y = $("myCanvas").height;
}else{//左
this.x = 0;
this.y = $("myCanvas").height-(rlon-$("myCanvas").width*2-$("myCanvas").height);
}
if(rlon<$("myCanvas").width/2 || rlon>$("myCanvas").width*2+$("myCanvas").height+$("myCanvas").height/2){//左上
this.isAddX = true;
this.isAddY = true;
}else if(rlon<$("myCanvas").width+$("myCanvas").height/2){//右上
this.isAddX = false;
this.isAddY = true;
}else if(rlon<$("myCanvas").width+$("myCanvas").height+$("myCanvas").width/2){//右下
this.isAddX = false;
this.isAddY = false;
}else{//左下
this.isAddX = true;
this.sAddY = false;
}
this.ax = Math.sin(Math.PI/180*this.rAngle)*star.speed;
thisthis.ax = this.isAddX?this.ax:0-this.ax;
this.ay = Math.cos(Math.PI/180*this.rAngle)*star.speed;
thisthis.ay = this.isAddY?this.ay:0-this.ay;
}
this.update = function(){//更新
thisthis.x=this.x+this.ax;
thisthis.y=this.y+this.ay;
if((this.isAddX && this.x>$("myCanvas").width) || (!this.isAddX && this.x<0) || (this.isAddY && this.y>$("myCanvas").height) || (!this.isAddY && this.y<0)){
this.init();
return;
}
//$("message").innerHTML = $("message").innerHTML+"<br> x="+this.x+";y="+this.y;
//$("message").innerHTML = $("message").innerHTML+"<br>cxt.arc("+Math.round(this.x)+","+Math.round(this.y)+","+this.r+",0,Math.PI * 2,true)";
var c=$("myCanvas");
var ccxt=c.getContext("2d");
cxt.fillStyle=this.c;
cxt.beginPath();
cxt.arc(this.x,this.y,this.r,0,Math.PI * 2,true);
cxt.closePath();
cxt.fill();
}
this.iscollide = function(){//判断是否被撞到
var x = Math.abs(player.left-this.x);
var y = Math.abs(player.top-this.y);
var R = this.r+player.r;
if(R*R < x*x+y*y){
return true;
}
return false;
}
}
star.speed = 1;
var press = function(event){
var code = event.keyCode || window.event;
switch(code) {
case KEY.RIGHT:
case KEY.D: input.right = true; break;
case KEY.UP:
case KEY.W: input.up = true; break;
case KEY.LEFT:
case KEY.A: input.left = true; break;
case KEY.DOWN:
case KEY.S: input.down = true; break;
case KEY.QUICK: input.quick = true; break;
}
}
var release = function(event) {
var code = event.keyCode || window.event;
switch(code) {
case KEY.RIGHT:
case KEY.D: input.right = false; break;
case KEY.UP:
case KEY.W: input.up = false; break;
case KEY.LEFT:
case KEY.A: input.left = false; break;
case KEY.DOWN:
case KEY.S: input.down = false; break;
case KEY.QUICK: input.quick = false; break;
}
}
var stars = new Array();
var myInter;
var begin;
var time = 0;
//加载事件
var load = function(){
player.init();
for(i=0;i<20;i++){
var s = new star();
s.init();
stars[i] = s;
}
begin = new Date();
myInter = setInterval(function(){update();},20);
}
var $ = function(id){
return document.getElementById(id);
}
//更新方法
var update = function(){
var c=$("myCanvas");
cc.width = c.width; // Clears the canvas
player.update();
for(i=0;i<stars.length;i++){
stars[i].update();
}
updatetime();
isDead();
}
//更新时间
var updatetime = function(){
var end = new Date();
var time = Math.round((end-begin)/1000);
star.speed = Math.round(time/10);
$("time").innerHTML = time;
}
//判断是否死了
var isDead = function(){
for(i=0;i<stars.length;i++){
var flag = stars[i].iscollide();
if(flag==false){
clearInterval(myInter);
alert("失败了");
return;
}
}
}
</script>
</head>
<body onLoad="load();" onkeydown="press(event);" onkeyup="release(event);" >
<canvas id="myCanvas" width="400" height="400" style=" border:2px solid #F00; left:30%; position:absolute; ">
<h1>换个好浏览器吧，ie太垃圾了</h1>
</canvas>
<div id="message">
兼容 wasd 和 ↑←↓→<br>
ctrl 键加速<br>
<span id="time"></span>秒
</div>
</body>
</html>