仿flash的html5網頁躲避游戲

2024-09-05 12:21:04

字體：大中小

來源：轉載

供稿：網友

html5 躲避游戲，仿一個flash的avoid game，小小的網頁游戲代碼，不這HTML5不支持目前主流的IE8，請使用IE9或火狐、Chrome或Opera等瀏覽器查看效果。游戲玩法，用鍵盤控制下邊的藍色方塊來躲避快速落下的方塊，如果不小心被碰上則游戲結束，考察反應能力。

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>仿flash的html5躲避游戲，avoid game代碼</title></head><body><canvas id="cv"></canvas><script>var cv = document.getElementById('cv'),	ctx = cv.getContext('2d');	w = 1000;	h = 800;		cv.width = w;	cv.height = h;		var paintCv = function(){	ctx.fillStyle = 'black';	ctx.fillRect(0, 0, w, h)	}				var size = 20,				playerX = w/size/2,				playerY = h/size -1,				speed = 30,				gameLoop = null,				elemyArr = [],				elemyNum = 50,				score = 0;						var paintPlayer = function(){				ctx.fillStyle = 'blue';				ctx.fillRect(playerX * size, playerY * size, size, size);			}						var update = function(){				if(playerX >= w/size-1){					playerX = w/size-1;				} else if(playerX <= 0){					playerX = 0;				} else if(playerY >= h/size-1){					playerY = h/size-1;				} else if(playerY <= 0){					playerY = 0;				}								for(var i=0; i<elemyNum; i++){					elemyArr[i].y++;					if(elemyArr[i].y >= h/size){						elemyArr.splice(i, 1);						var x = Math.round(Math.random() * w/size);						var y = Math.round(Math.random() * -h/size);						elemyArr.push({'x':x,'y':y});						score++;					}										if(elemyArr[i].x == playerX && elemyArr[i].y == playerY){						alert('GAME OVER! Score:' + score)						score = 0;					}				}			}						var paintElemy = function(){				for(var i=0; i<elemyNum; i++){					ctx.fillStyle = 'white';					ctx.fillRect(elemyArr[i].x * size, elemyArr[i].y * size, size, size);				}			}						var draw = function(){				paintCv();				paintPlayer();				paintElemy();				update();			}						var init = function(){				document.onkeydown = function(e){					var code = e.keyCode;					if(code == 37)playerX -= 1;					if(code == 38)playerY -= 1;					if(code == 39)playerX += 1;					if(code == 40)playerY += 1;				}								for(var i=0; i<elemyNum; i++){					var x = Math.round(Math.random() * w/size);					var y = Math.round(Math.random() * -h/size);					elemyArr.push({'x':x,'y':y})				}								gameLoop = setInterval(draw, 1000/speed)			}						init();					</script>	</body></html>

上一篇：走迷宮游戲，網頁游戲代碼

下一篇：JavaScript網頁游戲代碼-掃雷

學習交流

如何查找有故障的配件

如何查找有故障的配件...

熱門圖片

猜你喜歡的新聞

猜你喜歡的關注