用canvas作出绚丽的小游戏
2016-04-21 21:35
281 查看
话不多说，直接贴代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body{
overflow:hidden;
margin:0;
padding:0;
}
embed{
position:absolute;
}
</style>
<embed src="q.mp3" hidden="true"></embed>
</head>
<body>
<canvas id="canvas" style="margin:30px auto;display:block;"></canvas>
</body>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
canvas.height = document.documentElement.clientHeight;
canvas.width = document.body.clientWidth;
var ctx = canvas.getContext('2d');
//定义全局变量
var realTime = 0;
//加速度
var g = 0.03;
//小球半径
var r = 14;
//箭头初始位置
var arrowX = canvas.width;
var arrowY = 200;
//定义可以按键盘的位置
var keyDownX1 = canvas.width*0.5-20-400;
var keyDownX2 = canvas.width*0.5+20-400;
//小球数组
var balls = new Array();
//箭头数组
var arrows = new Array();
//创建箭头时间数组
var createArrowTimes = new Array(1,3);
//随机指定什么时候出现箭头
getArrowTimes(createArrowTimes);
//创建获取真实时间的对象
var realDate = new Date();
var startRunningTime = realDate.getTime();
//用来放开始运行时间和当前时间
var trueTime = {startRunningMilliseconds:startRunningTime,runningseconds:0};
//捕获键盘值
document.onkeydown = function(event){
var e = event || window.event || arguments.callee.caller.arguments[0];
//遍历箭头
for(var i = 0; i < arrows.length; i++){
//判断箭头的位置是否为可按的位置
if(e && e.keyCode == arrows[i].key && arrows[i].currentX < keyDownX2 && arrows[i].currentX > keyDownX1){
arrows.splice(i,1);
createBalls(balls,keyDownX1+10,arrowY,r);
}
}
if(e && e.keyCode == 13){
createArrow(arrows);
}
}
//刷新帧
var runningTime = setInterval(function(){
//清空画板
ctx.clearRect(0,0,canvas.width,canvas.height);
//时间滴答滴答
realTime++;
//console.log(new Date().getTime());
//获取已经运行时间的毫秒数
trueTime.runningseconds = Math.floor((new Date().getTime())*0.001 - trueTime.startRunningMilliseconds*0.001);
//trueTime.runningseconds = Math.floor(realTime*0.01);
//console.log(trueTime.runningseconds);
//画标准线
drawKeyLine(keyDownX1,keyDownX2);
//创建箭头
createArrowByTime(trueTime.runningseconds,createArrowTimes,arrows);
//箭头运动
runningArrow(arrows);
//小球运动
runningBall(balls);
},1);
//绘制箭头，参数为箭头中心园的圆心坐标
function drawArrow(x,y,r,key){
//定义圆的尺寸
//半径
var startAngle = 0;
var endAngle = 2*Math.PI;
var ballColor = '#4169E1';
var centerBallColor = '#FFFF00';
ctx.save();
//左
if(key == 37){
ctx.translate(x,y);
ctx.rotate(270*Math.PI/180);
ctx.translate(-x,-y);
centerBallColor = '#A020F0';
}
//上
if(key == 38){
}
//右
if(key == 39){
ctx.translate(x,y);
ctx.rotate(90*Math.PI/180);
ctx.translate(-x,-y);
centerBallColor = '#FF0000';
}
//下
if(key == 40){
ctx.translate(x,y);
ctx.rotate(180*Math.PI/180);
ctx.translate(-x,-y);
centerBallColor = '#00FF00';
}
ctx.beginPath();
drawCircle(x,y,r,centerBallColor);
drawCircle(x+2*r,y,r,ballColor);
drawCircle(x-2*r,y,r,ballColor);
drawCircle(x-r,y-0.5*Math.sqrt(Math.pow(4*r,2)-Math.pow(2*r,2)),r,ballColor);
drawCircle(x+r,y-0.5*Math.sqrt(Math.pow(4*r,2)-Math.pow(2*r,2)),r,ballColor);
drawCircle(x,y-Math.sqrt(Math.pow(4*r,2)-Math.pow(2*r,2)),r,ballColor);
drawCircle(x,y+2*r,r,ballColor);
drawCircle(x,y+4*r,r,ballColor);
ctx.closePath();
ctx.restore();
//返回箭头横坐标
return x;
}
//创建箭头
function createArrow(arrows){
var a = {X:0,initX:canvas.width,currentX:0,key:Math.floor(Math.random()*4+37)};
arrows.push(a);
}
//箭头运动
function runningArrow(Arrows){
//遍历箭头
for(var i = 0; i < Arrows.length; i++){
//Arrows[i].X表示箭头的横坐标的位移,和下面的不一样，这个是移动的距离，下面的是其坐标
//获取当前箭头横坐标
Arrows[i].currentX = Arrows[i].X-- + arrows[i].initX;
//画箭头
drawArrow(Arrows[i].currentX,arrowY,r,Arrows[i].key);
}
}
//创建出一个箭头要弹跳的小球
function createBalls(balls,x,y,r){
//创建八个小球
var b = new Array(8);
var line3Y = y-0.5*Math.sqrt(Math.pow(4*r,2)-Math.pow(2*r,2));
b[0] = {T:0,Sy:0,Sx:0,Ty:0,initVy:Math.random()*6-3,Vy:0,initSx:x,initSy:y,Vx:Math.random()*2-1,color:randomColor()};
b[1] = {T:0,Sy:0,Sx:0,Ty:0,initVy:Math.random()*6-3,Vy:0,initSx:x+2*r,initSy:y,Vx:Math.random()*2-1,color:randomColor()};
b[2] = {T:0,Sy:0,Sx:0,Ty:0,initVy:Math.random()*6-3,Vy:0,initSx:x-2*r,initSy:y,Vx:Math.random()*2-1,color:randomColor()};
b[3] = {T:0,Sy:0,Sx:0,Ty:0,initVy:Math.random()*6-3,Vy:0,initSx:x-r,initSy:line3Y,Vx:Math.random()*2-1,color:randomColor()};
b[4] = {T:0,Sy:0,Sx:0,Ty:0,initVy:Math.random()*6-3,Vy:0,initSx:x+r,initSy:line3Y,Vx:Math.random()*2-1,color:randomColor()};
b[5] = {T:0,Sy:0,Sx:0,Ty:0,initVy:Math.random()*6-3,Vy:0,initSx:x,initSy:line3Y,Vx:Math.random()*2-1,color:randomColor()};
b[6] = {T:0,Sy:0,Sx:0,Ty:0,initVy:Math.random()*6-3,Vy:0,initSx:x,initSy:y+2*r,Vx:Math.random()*2-1,color:randomColor()};
b[7] = {T:0,Sy:0,Sx:0,Ty:0,initVy:Math.random()*6-3,Vy:0,initSx:x,initSy:y+4*r,Vx:Math.random()*2-1,color:randomColor()};
//将小球放入数组
for(var i = 0; i < b.length; i++){
balls.push(b[i]);
}
}
//画圆
function drawCircle(x,y,r,color){
ctx.save();
ctx.beginPath();
ctx.arc(x,y,r,0,2*Math.PI);
ctx.fillStyle = color;
ctx.fill();
ctx.closePath();
ctx.restore();
}
//创建随机颜色
function randomColor(){
return 'rgb('+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+')';
}
//小球弹跳
function runningBall(balls){
//console.log("runningBall run..."+balls.length);
//遍历小球
for(var i = 0; i < balls.length; i++){
balls[i].T++;
balls[i].Ty++;
//获取此刻小球的速度
balls[i].Vy = balls[i].initVy + balls[i].Ty*g;
//小球在该时刻的垂直高度
balls[i].Sy = 0.5*g*Math.pow(balls[i].Ty,2) + balls[i].initVy*balls[i].Ty + balls[i].initSy;
//小球的横坐标
balls[i].Sx = balls[i].Vx*balls[i].T+balls[i].initSx;
//绘制小球
drawCircle(balls[i].Sx,balls[i].Sy,r,balls[i].color);
//判断小球是否触底
if(balls[i].Sy > 500 && balls[i].Vy > 0){
balls[i].initVy = -balls[i].Vy*0.8;
balls[i].initSy = balls[i].Sy;
balls[i].Ty = 0;
}
//判断小球是否已经出了canvas，如果是，则将其移除
if(balls[i].Sx > canvas.width || balls[i].Sx < 0){
balls.splice(i,1);
}
}
}
//画标准线
function drawKeyLine(keyDownX1,keyDownX2){
ctx.save();
ctx.beginPath();
ctx.moveTo(keyDownX1,200);
ctx.lineTo(keyDownX2,200);
ctx.moveTo((keyDownX1+keyDownX2)*0.5,180);
ctx.lineTo((keyDownX1+keyDownX2)*0.5,220);
ctx.stroke();
ctx.closePath();
ctx.restore();
}
//按指定时间创建箭头
function createArrowByTime(runningMillisecond,createArrowTimes,arrows){
for(var i = 0; i < createArrowTimes.length; i++){
if(runningMillisecond == createArrowTimes[i]){
createArrow(arrows);
createArrowTimes.shift();
}
}
}
//获取当前时间的毫秒值
function MyGetAllMilliseconds(){
return new Date().getMilliseconds();
}
//随机指定什么时候出现箭头
function getArrowTimes(createArrowTimes){
for(var i = 0; i < 100; i++){
var t = Math.ceil(Math.random()*3);
createArrowTimes.push(createArrowTimes[createArrowTimes.length-1]+t);
}
}
</script>
</html>游戏截图：
操作方法：箭头到达十字架时按下相应按键会出现绚丽的动画效果
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Fragment使用方法总结
- 用c实现HASH表创建、插入、查找、删除、打印（欢迎高手指点）【转】
- 简单App项目的运行
- Jquery的treeview插件实现树形结构
- 2015 ICPC 沈阳站M题
- Notification版本更替
- 兴趣问题清单
- 课程练习二-1003-pie
- BestCoder Round #80 A B C hdu5667矩阵快速幂
- UIBarButtonSystemItem 样式 和 图片
- nyoj 448 寻找最大数
- 二分查找进阶——循环有序数组查找再进阶——循环有序重复数组查找
- javascript 前端验证 file 上传图片 尺寸 大小
- 第82课：Spark Streaming第一课：案例动手实战并在电光石火间理解其工作原理
- hdu4405(概率dp)
- 周总结
- 最详细的 Android Toolbar 开发实践总结
- Python函数——学习笔记
- 32bit/64bit-Ubuntu14.04+anaconda+CPU版本的Caffe安装教程
- 我的 Mac 清单