新鲜出炉的v0.2版本…………
1,html代码,增加了积分器的div~~为了布局,在外面套了个壳·~就是#gameBox
<div id="gameBox">
<canvas id="canvas" width="350" height="430"></canvas>
<div id="score">0</div>
</div>
2,css部分,没什么好说的,大概的放了个布局。
body{margin:0;}
#gameBox{margin:20px auto;width:600px;background:#e0e0e0;position:relative;padding:20px;}
canvas{background:#0FC;border:4px solid #333;-webkit-border-radius:10px;-moz-border-radius:10px;display:block;}
#score{background:#ccc;font:42px Georgia, serif;width:120px;height:60px;position:absolute;right:60px;top:40px;text-align:center;}
3,JS部分的代码。
v0.2计划实现canvas整个擦除重绘。并重新梳理的v0.1的代码~将碰撞检测,一部分绘制原件的功能从主函数中提取出一部分,使代码可读性更高,并且增加了一些必要的注释。
其中,主函数部分如下,主要是创建绘图环境,设置了一些公共参数及函数调用。
/*主函数*/
//创建画布
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
document.title = document.getElementById("gameBox").offsetLeft;
//头像的属性
var headImg = new Image();
headImg.src = 'http://tp1.sinaimg.cn/1409181652/50/1290411958/0';
var headW = 50; //头像宽度
var headH = 50; //头像高度
var headX = 40; //头像横坐标
var headY = 0; //头像纵坐标
var headStatus = true; //是否到达底部的布尔变量
//筐的属性
var boxW = 120; //筐的宽度
var boxH = 30; //筐的高度
//筐的横坐标
var boxX = (canvas.width - boxW)/2 ;
var boxY = canvas.height - boxH; //筐的纵坐标
ctx.fillRect(boxY, boxY, boxW, boxH);
//鼠标事件
canvas.onmousemove = function(event){
msX = event.clientX - document.getElementById("gameBox").offsetLeft;
msY = event.clientY;
ctx.clearRect( boxX, boxY, boxX + boxW, boxY + boxH);
drawBox();
};
setInterval(animateCanvas, 60);
接下来的代码是每次画布擦除重绘的函数~~这次每次都是擦掉整个画布并重绘掉落的头像及在当前鼠标坐标下的“筐”。并在每次执行函数后调用碰撞检测函数~~并通过碰撞函数返回的布尔变量执行碰撞后的函数。这里为碰撞后积分器数值 +20。
function animateCanvas(){
ctx.clearRect( 0, 0, canvas.width, canvas.height);
//绘制头像
headY = headY + 5; //每次头像向下移动8像素
ctx.drawImage (headImg, headX, headY);
//在筐的当前位置重绘筐
drawBox();
//碰撞检测
var isCollision = collision();
if (isCollision == true){
collSuccess();
}
}
下面这个是用来做碰撞检测的。。逻辑与v0.1基本相同。只是生成一个函数,最后返回布尔变量判断是否碰撞成功。
//判断碰撞
function collision(){
if(headStatus){
if( headY + headH < canvas.height - boxH){
return false;
}
else {
if (headX >= boxX && headX + 50 <= boxX + 150){
headStatus = false;
return true;
}
else {
headStatus = false;
return false;
}
}
}
}
下面两个小小的function
碰撞成功后的执行函数(计数器)
//碰撞后的函数调用
function collSuccess(){
var score = document.getElementById("score");
score.innerHTML = parseInt(score.innerHTML) + 20;
}
画筐的函数
//重绘筐
function drawBox(){
boxX = msX - canvas.offsetLeft - boxW/2;
ctx.fillRect(boxX, boxY, boxW, boxY);
}
v0.2遇到问题及日后改进~~~~
1,我本来以为擦除画布一次就够了呢~结果擦除了一次大的。。鼠标移动时候又小范围擦除一次,郁闷。难道思路又错了?据说传说中的双缓冲区可以解决问题。。。但是双缓冲区神马玩意~~~
2,碰撞函数的具体规则。。今天没空了~~~判断重心~~啊啊啊
3,多头像随机 x 值 掉落~~~这个会补充~~或许做成prototype~~~如我这种初学者~还没入门的。看prototype好高级啊~~~~表被嘲笑~~~
4,倒计时~~1分钟。。。。
5,设计啊设计啊。。。。懒得开ps了~~勾了个筐的路径,ps还死了,没保存,奔泪~~~·~
啊~~睡觉了~~~~~~~~~
啊~~还是晚上自己写代码的时光最欢乐了~~~~~
分享到:
相关推荐
NULL 博文链接:https://alivoa.iteye.com/blog/968647
类似下红包雨,接红包的小游戏,使用html js canvas开发
canvas拼图小游戏
H5 canvas 实现小游戏 H5 canvas 实现小游戏 H5 canvas 实现小游戏 H5 canvas 实现小游戏
canvas-弹珠游戏
html5 canvas躲避小游戏是男人就撑过20秒躲避游戏源码
canvas拼图游戏,基于html + canvas画布实现
canvas端午节吃粽子小游戏,兼容移动端
web版本的24点游戏。。 牌使用canvas代码自绘。。
HTML5之纯canvas实现转盘游戏,用到了canvas的旋转,平移,叠加,清除
Canvas画布图片文字拼接合成,生成图片,输入内容,填写到图片上
基于html5 canvas实现聚宝盆接金币游戏特效源码.zip
canvas端午节小游戏
html5 开发技术 游戏.很好玩的html5+canvas技术实现的拼图游戏
html5 canvas五彩连珠游戏_五彩连珠小游戏源码下载 html5 canvas五彩连珠游戏_五彩连珠小游戏源码下载
canvas 飞机大战小游戏
HTML5 Canvas贪吃蛇网页游戏是一款网页在线小游戏试玩特效。
canvas打砖块小游戏
一个经典的游戏,左右箭头可以控制垫子的移动
html5 canvas填色画游戏代码是一款适合儿童玩的益智类填色游戏,通过选中色块,来给模型填充颜色。支持多种模型选择填色效果。