アットウィキロゴ

html5

<!DOCTYPE HTML>
<HTML>
<HEAD>
   <TITLE>30秒</TITLE>
</HEAD>

<BODY>
<div style="margin: 0 auto;width: 500px;">
    <P>
       Press W, A, S, D keys to move
   </P>

   <SECTION style="border-style: solid; border-width: 2px; width: 500px;">
       <CANVAS WIDTH="500" HEIGHT="500" ID="canvas_1" tabindex="0">
           Canvas tag not supported
       </CANVAS>
   </SECTION>
   <div id = "ptx">
       x
   </div>
   <div id = "pty">
       y
   </div>
   <div id = "result">
       result
   </div>
</div>

<SCRIPT>
var canvas = document.getElementById("canvas_1");
canvas.addEventListener('keydown', doKeyDown, true);
canvas.addEventListener('keyup', doKeyUp, true);

canvas_context = canvas.getContext("2d");
var seconds = 0; //记数时间
var handle; //事件柄
handle = setInterval("timer()",1000);

canvas.focus();

var keybuf = {};
var x = 250.0;
var y = 250.0;
var bulletList = new Array(60);
for (var i=0; i<bulletList.length ; i++) {
   var tempBullet;
   if((tempBullet=createBullet())!=null ){
       bulletList[i] = null;
       bulletList[i] =tempBullet;
   }
}
setInterval("reflash()", 1000 / 60);

function reflash() {
   clearCanvas();
   canvas_context.fillStyle = "orange";
   //canvas_context.fillRect(x, y, 10, 10);
   canvas_context.beginPath();
   canvas_context.arc(x,y,5,0,2*Math.PI,true);
   canvas_context.stroke();
   canvas_context.fill();

   // draw bullet
   doKeyEvent();
   for (var i=0; i<bulletList.length ; i++) {
       bulletList[i].move();
       bulletList[i].draw();
   }


   // hit bullet
   for (var k=0; k<bulletList.length ; k++) {
       //if(Math.abs(x-bulletList[k].bx)<10.0 && Math.abs(y-bulletList[k].by)<10.0){
       if( Math.sqrt(Math.pow((x-bulletList[k].bx),2)+ Math.pow((y-bulletList[k].by),2))  < 10 )  {
           if(seconds <= 10){
               alert("you lost" + "\n"+seconds+"\n"+"你弱爆了!!");
           }else if (seconds < 20 ){
               alert("you lost" + "\n"+seconds+"\n"+"再接再厉!!");
           }else if (seconds < 30 ){
               alert("you lost" + "\n"+seconds+"\n"+"你是男人!");
           }else if (seconds < 40 ){
               alert("you lost" + "\n"+seconds+"\n"+"你是男人!");
           }else if (seconds < 50 ){
               alert("you lost" + "\n"+seconds+"\n"+"你是男人!!");
           }else if (seconds < 60 ){
               alert("you lost" + "\n"+seconds+"\n"+"你是男人!!!");
           }else if (seconds >= 70 ){
               alert("you lost" + "\n"+seconds+"\n"+"春哥附体拉!");
           }
           window.location.reload();
           //document.getElementById("result").innerHTML = "you failed";
       }
   }

   // bullet number
   for (var j=0; j<bulletList.length ; j++) {
       if (bulletList[j].bx < 0 || bulletList[j].bx > 500 || bulletList[j].by < 0 || bulletList[j].by > 500) {
           var tempBullet;
           if((tempBullet=createBullet()) != null )  {
               bulletList[j] = null;
               bulletList[j] = tempBullet;
           }  else{
               i--;
           }
       }
   }
   document.getElementById("ptx").innerHTML = x;
   document.getElementById("pty").innerHTML = y;
}

function timer () {
   seconds ++;
}

function createBullet(){
   var dir = Math.ceil(Math.random()*4);
   var s_x ;
   var s_y ;
   var s_cos ;
   var s_sin ;
   if(dir == 1){
       s_x = Math.ceil(Math.random()*490);
       s_y = 0;
       s_cos = Math.random() * 2.0-1.0;
       s_sin = Math.sqrt(1-s_cos * s_cos);
   } else if (dir == 2){
       s_x = 0;
       s_y = Math.ceil(Math.random()*490);
       s_sin = Math.random() * 2.0-1.0 ;
       s_cos = Math.sqrt(1-s_sin * s_sin);
   } else if (dir == 3){
       s_x = Math.ceil(Math.random()*490) ;
       s_y = 490;
       s_cos = Math.random() * 2.0-1.0;
       s_sin = -Math.sqrt(1-s_cos * s_cos);
   } else if (dir == 4){
       s_x = 490;
       s_y = Math.ceil(Math.random()*490);
       s_sin = Math.random() * 2.0-1.0 ;
       s_cos = -Math.sqrt(1-s_sin * s_sin);
   } else if (dir ==0 ){
       return null;
   }
   return new bullet(s_x,s_y,s_cos,s_sin);
}

function doKeyUp(e) {
   var evt = e || window.event;
   keybuf[evt.keyCode] = false;
   //doKeyEvent();
}
function doKeyPress(e) {
   doKeyEvent();
}
function doKeyDown(e) {
   var evt = e || window.event;
   keybuf[evt.keyCode] = true;
   //doKeyEvent();
}
function doKeyEvent() {
   var speed = 1.5 ;
   //	THE w KEY
   if (keybuf[87] == true && judge_frontier()) {
       y = y - speed;
       if (!judge_frontier()) {
           y = y + speed;
       }
   }
   //	THE s KEY
   if (keybuf[83] == true && judge_frontier()) {
       y = y + speed;
       if (!judge_frontier()) {
           y = y - speed;
       }
   }
   //	THE a KEY
   if (keybuf[65] == true && judge_frontier()) {
       x = x - speed;
       if (!judge_frontier()) {
           x = x + speed;
       }
   }
   //	THE d KEY
   if (keybuf[68] == true && judge_frontier()) {
       x = x + speed;
       if (!judge_frontier()) {
           x = x - speed;
       }
   }
}


function judge_frontier() {
   if (x < 5 || x > 475 || y < 5 || y > 475) {
       return false;
   } else {
       return true;
   }
}

function bullet(startx , starty, cos , sin) {
   this.bx = startx;
   this.by = starty;
   this.speed = 1.0;
   //this.startx = startx;
   //this.starty = starty;
   this.cos  = cos;
   this.sin  = sin;

   this.draw = function() {
       canvas_context.fillStyle = "brown";
       //canvas_context.fillRect(this.bx, this.by, 10, 10);
       canvas_context.beginPath();
       canvas_context.arc(this.bx, this.by,5,0,2*Math.PI,true);
       canvas_context.stroke();
       canvas_context.fill();
   }

   this.move = function() {
       this.bx = this.bx + this.speed * this.cos;
       this.by = this.by + this.speed * this.sin;
   }

}

function clearCanvas() {
   canvas.width = canvas.width;
}
</SCRIPT>
</BODY>
</HTML>

タグ:

+ タグ編集
  • タグ:
最終更新:2013年06月17日 11:26