話不多說HTML5 圖畫板寫的一個小游戲,原形為是男人就撐過30秒。
下載地址:
免費下載地址在 http://linux.linuxidc.com/
用戶名與密碼都是www.linuxidc.com
具體下載目錄在 /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>