html5 仿"是男人就堅持20s"遊戲

時間  2019-11-13
標籤 html5 html 堅持 20s 遊戲 欄目 HTML5 简体版
原文   原文鏈接 
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
 <head>
 <script type="text/javascript" src="assets/js/jquery-2.0.3.min.js"></script>
  <script type="text/javascript">
    function draw() {
     var Sprite = function(){
     this.speed={
      x:1,
      y:1
     };
    };
    Sprite.prototype={
     draw:function(){
     },
     move:function(){//移動
      if(this.ctr == 1){
       return;
      }
      if((this.x+this.speed.x) >= 800){
       this.preStatus = this.status;
    this.status = 1;
   }else if((this.x-this.speed.x) <= 0){
    this.preStatus = this.status;
    this.status = 3;
   }else if((this.y+this.speed.y) >= 800){
    this.preStatus = this.status;
    this.status = 2;
   }else if((this.y-this.speed.y) <= 0){
    this.preStatus = this.status;
    this.status = 0;
   }
      switch(this.status){
       case 0:
        if(this.preStatus == 1){
          this.x-=this.speed.x;
           this.y+=this.speed.y;
        }else/*  if(this.preStatus == 3) */{
          this.x+=this.speed.x;
          this.y+=this.speed.y;
        }
         break;
        case 1:
         if(this.preStatus == 0){
          this.x-=this.speed.x;
           this.y+=this.speed.y;
        }else /* if(this.preStatus == 2) */{
          this.x-=this.speed.x;
          this.y-=this.speed.y;
        }
         break;
       case 2:
        if(this.preStatus == 1){
          this.x-=this.speed.x;
           this.y-=this.speed.y;
        }else/*  if(this.preStatus == 3) */{
          this.x+=this.speed.x;
          this.y-=this.speed.y;
        }
         break;
       case 3:
         if(this.preStatus == 0){
           this.x+=this.speed.x;
            this.y+=this.speed.y;
         }else /* if(this.preStatus == 2) */{
           this.x+=this.speed.x;
           this.y-=this.speed.y;
         }
         break;
        default:break;
      }
      if(this.childs!=null&&this.childs.length>0){
       for(var i = 0;i<this.childs.length;i++){
        this.childs[i].speed = this.speed;
        this.childs[i].move();
       }
      }
     },
     appendChild:function(sprite){
      if(this.childs == null)this.childs=[];
      this.childs.push(sprite);
     },
     drawChild:function(Sprite){
      if(this.childs != null && this.childs.length > 0){
       for(var i = 0; i<this.childs.length;i++){
        this.childs[i].draw();
       }
      }
     }
    };
    
    var Canvas = function(){
     this.interval = null;
     this.sprites = [];
    };
    
    Canvas.prototype = {
     begin:function(){
      this.interval = setInterval((function(param){
       return function(){param.render();};
      })(this),20);
     },
     render:function(){
      document.getElementById("score").textContent = parseInt(document.getElementById("score").textContent)+1;
      this.ctx.clearRect(-800,-800,1600,1600);
      for(var i in this.sprites){
       if(typeof(this.sprites[i]) == 'function'){
        continue;
       }
       /* this.sprites[i].x = Math.random()*800;
       this.sprites[i].y = Math.random()*800; */
       //this.sprites[i].radius-=0.005;
       /* this.sprites[i].config.strokeStyle = "rgba("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+",0.8)";
       this.sprites[i].config.fillStyle = "rgba("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+",0.8)"; */
       this.sprites[i].draw();
       if(i == 10)continue;
       var move_right = parseInt(this.sprites[10].x)+2.5;
       var move_left = parseInt(this.sprites[10].x)-2.5;
       var move_bottom = parseInt(this.sprites[10].y)+2.5;
       var move_top = parseInt(this.sprites[10].y)-2.5;
       var con_right = parseInt(this.sprites[i].x)+2.5;
       var con_left = parseInt(this.sprites[i].x)-2.5;
       var con_bottom = parseInt(this.sprites[i].y)+2.5;
       var con_top = parseInt(this.sprites[i].y)-2.5;
        if(((move_right > con_left && move_right < con_right) ||
         (move_left < con_right && move_right > con_left))&&
         ((move_bottom > con_top && move_bottom < con_bottom) ||
         (move_top < con_bottom && move_bottom > con_top))){
          this.ctx.clearRect(-800,-800,1600,1600);
          this.ctx.font = "bold 30px Arial";  
          this.ctx.fillText("GAME OVER",320, 400);
          //this.sprites = null;
          this.stop();
        }
      }
     },
     addSprite:function(name,sprite){
      this.sprites[name] = sprite;
     },
     stop:function(){
      clearInterval(this.interval);
     },
     clear:function(){
      for(var i in this.sprites){
       if(typeof(this.sprites[i]) == 'function'){
        continue;
       }
       /* if(this.sprites[i].x>=800&& this.sprites[i].y>=800){
        console.info(this.sprites[i].status); 
        //delete this.Sprites[i];
       } */
      }
     }
    };
    
    var Circle = function(ctx,x,y,radius){
     this.ctx = ctx;
     this.x = x;
     this.y = y;
     this.status = 0;
     this.preStatus = 0;
     this.radius = radius;
     this.ctr = 0;
     this.config = { 
      strokeStyle : "#F00",
      lineWidth : 1,
      fillStyle:"#F00"
     };
     //M.dom.mixin(this.config,config);
    };
    Circle.prototype = new Sprite();
    Circle.prototype.draw = function(){
     this.ctx.beginPath();
     this.ctx.lineWidth = this.config.lineWidth;
     this.ctx.strokeStyle = this.config.strokeStyle;
     this.ctx.fillStyle = this.config.fillStyle;
     this.ctx.arc(this.x,this.y,this.radius,0,Math.PI*2,true);
     this.ctx.stroke();
     this.ctx.fill();
     this.drawChild();
    };
    
     var ctx = document.getElementById("canvas").getContext("2d");
     var can = new Canvas();
     can.ctx = ctx;
     can.begin();
     setInterval(function(){
      for(var i in can.sprites){
       if(typeof(can.sprites[i]) == 'function'){
        continue;
       }
       can.sprites[i].move();
      }
     },20);
     
     for(var i = 0;i<50;i++){
      if(i == 10)continue;
      var circle = new Circle(ctx,Math.random()*400,Math.random()*400,5);
      circle.speed = {x:3+Math.random()*2,y:3+Math.random()*2};
      circle.status = parseInt(Math.random()*3);
      circle.preStatus = circle.status==3?0:parseInt(circle.status)+1;
      circle.config.strokeStyle = "rgba("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+",0.8)";
      circle.config.fillStyle = "rgba("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+",0.8)"; 
      can.addSprite(i,circle);
     }
     
     var circle = new Circle(ctx,750,750,5);
      //circle.speed = {x:3+Math.random()*2,y:3+Math.random()*2};
      //circle.status = parseInt(Math.random()*3);
      //circle.preStatus = circle.status==3?0:parseInt(circle.status)+1;
      circle.ctr  = 1;
      can.addSprite(10,circle);
     var speed = 5;
     document.onkeydown=function(e){
      var e=e||event;
      /* if(e.keyCode == 40 && e.keyCode == 37){//down
       can.sprites[10].y+=speed;
       can.sprites[10].x-=speed;
      }else if(e.keyCode == 40 && e.keyCode == 39){//down
       can.sprites[10].y+=speed;
       can.sprites[10].x+=speed;
      }else if(e.keyCode == 38 && e.keyCode == 37){//down
       can.sprites[10].y-=speed;
       can.sprites[10].x-=speed;
      }else if(e.keyCode == 38 && e.keyCode == 39){//down
       can.sprites[10].y-=speed;
       can.sprites[10].x+=speed;
      }else  */
      if(e.keyCode == 37){//left
       can.sprites[10].x-=speed;
      }else if(e.keyCode == 38){//up
       can.sprites[10].y-=speed;
      }else if(e.keyCode == 39){//right
       can.sprites[10].x+=speed;
      }else if(e.keyCode == 40){//down
       can.sprites[10].y+=speed;
      }
      can.sprites[10].draw();
     };
    }
  </script>
 </head>
 <body onload="draw();">  
  <canvas id="canvas" width="800" height="800" style="border: 1px solid red;"></canvas>
  得分:<span id="score">0</span>
 </body>
</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程