<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>.</title>
</head>
<style type="text/css">
#stage{
display:block;
float:left;
width:400px;
height:300px;
box-shadow:
-2px -2px 4px rgba(0, 0, 0, 0.3),
2px 2px 4px rgba(0, 0, 0, 0.6);
}
#hitck{
display:block;
float:left;
width:400px;
height:300px;
box-shadow:
-2px -2px 4px rgba(0, 0, 0, 0.3),
2px 2px 4px rgba(0, 0, 0, 0.6);
}
#plane{
display:block;
float:left;
width:48px;
height:48px;
box-shadow:
-2px -2px 4px rgba(0, 0, 0, 0.3),
2px 2px 4px rgba(0, 0, 0, 0.6);
}
#ammo{
display:block;
float:left;
width:12px;
height:12px;
box-shadow:
-2px -2px 4px rgba(0, 0, 0, 0.3),
2px 2px 4px rgba(0, 0, 0, 0.6);
}
</style>
<body>
<canvas id="stage"></canvas>
<canvas id="hitck"></canvas>
<canvas id="plane"></canvas>
<canvas id="ammo"></canvas>
</body>
<script type="text/javascript">
/*
* 碰撞检测 & 弹幕实例
* lxrmido@lxrmido.com
* 2013-8-26
*/
/**
* 键盘状态
* @type {Object}
*/
var Keyboard = {
UP : 87,
DOWN : 83,
LEFT : 65,
RIGHT : 68,
up : false,
down : false,
left : false,
right : false
}
/**
* 鼠标状态
* @type {Object}
*/
var Mouse = {
downX : 0,
downY : 0
}
/**
* 游戏状态
* @type {Object}
*/
var Game = {
playing : true
}
/**
* 工具库
* @type {Object}
*/
var Util = {
/**
* 是否在画板范围内
* @param {canvas} canvas
* @param {float} x
* @param {float} y
* @return {bool}
*/
canvasInScope : function(canvas, x, y){
x = x || Mouse.downX;
y = y || Mouse.downY;
return (
x > canvas.offsetLeft &&
x < canvas.offsetLeft + canvas.clientWidth &&
y > canvas.offsetTop &&
y < canvas.offsetTop + canvas.clientHeight
);
},
/**
* 位置在画板上的坐标偏移
* @param {canvas} canvas
* @param {float} x
* @param {float} y
* @return {Vect}
*/
offsetOnCanvas : function(canvas, x, y){
x = x || Mouse.downX;
y = y || Mouse.downY;
var ratioX = canvas.width / canvas.clientWidth;
var ratioY = canvas.height / canvas.clientHeight;
var offsetX = (x - canvas.offsetLeft) * ratioX;
var offsetY = (y - canvas.offsetTop) * ratioY;
return new Vect(offsetX, offsetY);
}
}
/**
* 自机
* @type {Object}
*/
var plane = {
x : 0,
y : 0,
speed : 2,
map_data : []
}
/**
* 绘制队列
* @type {Object}
*/
var Queue = {
ammo : [],
initAmmo : function(maxAmmoCount){
maxAmmoCount = maxAmmoCount || 512;
for(var i = 0; i < maxAmmoCount; i ++){
Queue.ammo[i] = null;
}
},
init : function(){
Queue.initAmmo();
}
}
Queue.init();
/**
* 碰撞检测矩阵
* @type {Object}
*/
var Matrix = {
螺旋效果
最新推荐文章于 2023-07-07 12:00:00 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)