java学习分享：js实现简单的板球游戏
大家好，本次我们来使用js来实现一个简单的板球游戏。截图如下：
首先，设计页面代码，页面代码很简单，因为整个几乎是使用js编写的，页面几乎没有代码，如下：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<title></title>
<styletype="text/css">
body{
margin:0px;
}
</style>
<scriptsrc="js/common.js"type="text/javascript"charset="utf-8"></script>
</head>
<body>
</body>
</html>
接下来就是主要的js代码common.js，如下：
// 画布的宽高
varcanvasWidth;
varcanvasHeight;
// 方块的背景图片
varbg;
// 球
varball;
// 板
varboard;
// 背景方块的宽度
varbreakWidth;
// 球的坐标和速度
varballX=100;
varballY;
varxVal=5;
varyVal= -5;
// 板的坐标
varboardX=0;
varboardY;
// 方块数组
varbreakers=[];
// 板的原始长度
varboardWidth=242;
// 计时变量
vartime=0;
// 记录是否改变状态
varbreakerChanged=false;
varcol=10;
window.onload=function(){
// 创建并设置canvas
varcanvas=document.createElement("canvas");
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
canvasWidth=canvas.width;
canvasHeight=canvas.height;
breakWidth=(canvasWidth-10)/col;
// 将画布添加到body中
document.body.appendChild(canvas);
varcontext=canvas.getContext("2d");
// 球的初始Y值
ballY=canvasHeight-80;
// 板的初始Y值
boardY=canvasHeight-20;
// 加载所有的图片
loadAllImage();
// 定义键盘响应事件
document.onkeydown=boardMove;
// 开始启动程序
setInterval(run,20);
functionrun(){
// 清空画布
context.clearRect(0,0,canvasWidth, canvasHeight);
// 绘制背景、小球、板
context.drawImage(bg,0,-50, canvasWidth, canvasHeight+50);
context.drawImage(ball, ballX, ballY);
context.drawImage(board, boardX, boardY, board.width, board.height);
// 如果处于变长的过程中
if(breakerChanged){
// 继续计时
time++;
// 当时间达到5秒钟
if(time>=250){
// 还原
breakerChanged=false;
time=0;
board.width=boardWidth;
}
}
// 绘制方块
updateBreakers();
// 更新小球的位置
updateBall();
// 球与方块的碰撞
ballHitBreakers();
// 球与板的碰撞
ballHitBoard();
}
functionboardMove(){
// 向左移动
if(event.keyCode==37){
boardX-=30;
if(boardX<=0){
boardX=0;
}
}
// 向右移动
else if(event.keyCode==39){
boardX+=30;
if(boardX>=canvasWidth-board.width){
boardX=canvasWidth-board.width;
}
}
}
// 简单判断球和板的碰撞
functionballHitBoard(){
if(hit(boardX, boardY-60, board.width, board.height, ballX, ballY)){
yVal= -yVal;
}
}
// 简单判断球和方块的碰撞
functionballHitBreakers(){
// 从后面开始循环
for (vari=breakers.length-1; i>=0; i--) {
varbreaker=breakers[i];// 3个属性,item, x, y
// 如果碰撞
if(hit(breaker.x, breaker.y, breakWidth,30, ballX, ballY)){
// 变长的状态
if(breaker.state==1){
// 判断是否已经处于变长状态
if(breakerChanged){
// 如果已经变长，应该刷新时间
board.width=boardWidth*1.5;
time=0;
}else{
// 如果开始变长，就改变状态
board.width=boardWidth*1.5;
breakerChanged=true;
}
}else if(breaker.state==2){
// 判断是否已经处于变长状态
if(breakerChanged){
// 如果已经变长，应该刷新时间
board.width=boardWidth*0.5;
time=0;
}else{
// 如果开始变长，就改变状态
board.width=boardWidth*0.5;
breakerChanged=true;
}
}
// 方块消失(数组删除一个元素)
breakers.splice(i,1);
// 球返回
yVal= -yVal;
}
}
}
// 简单碰撞函数
functionhit(bx,by,bw,bh,x,y){
if(x>=bx&&x<=bx+bw&&y>=by&&y<=by+bh){
returntrue;
}else{
returnfalse;
}
}
// 球的运动
functionupdateBall(){
ballX+=xVal;
ballY+=yVal;
// 靠近左边的边距
if(ballX<=0){
xVal= -xVal;
}
// 靠近顶部的边距
if(ballY<=30){
yVal= -yVal;
}
// 测试代码，让球永远不掉落
//if(ballY >= canvasHeight - 80){
//yVal = -yVal;
//}
// 靠近右边的边距
if(ballX>=canvasWidth-60){
xVal= -xVal;
}
}
// 加载所有的方块
functioncreateBreakers(){
// 循环行
for(vari=0; i<col; i++) {
// 循环列
for(varj=0; j<col; j++) {
// 得到一个4~9的随机数
varnum=Math.floor(Math.random()*6)+4;
// 创建一个图片
varitem=loadImage("img/ball/"+num+".png");
varx=breakWidth*j+j*2;
vary=30*i+30;
// 键值对(key-value)
// {"item":item, "x":x, "y":y}
// 如果是绿色的方块，让板变长
if(num==9){
breakers.push({"item":item,"x":x,"y":y,"state":1});
}
else if(num==4){
breakers.push({"item":item,"x":x,"y":y,"state":2});
}
else{
breakers.push({"item":item,"x":x,"y":y,"state":0});
}
}
}
}
// 绘制所有的方块
functionupdateBreakers(){
for(vari=0; i<breakers.length; i++) {
context.drawImage(breakers[i].item, breakers[i].x, breakers[i].y, breakWidth,30);
}
}
functionloadAllImage(){
bg=loadImage("img/ball/bg.png");
ball=loadImage("img/ball/ball.png");
board=loadImage("img/ball/board.png");
// 创建方块
createBreakers();
}
// 加载单张图片
functionloadImage(url){
varimg= newImage();
img.src=url;
returnimg;
}
};
大家可以试试，具体的代码和资源见附件。
相关文章
了解千锋动态
关注千锋教育服务号
扫一扫快速进入
千锋移动端页面
扫码匿名提建议
直达CEO信箱
Copyright 2011-2020
北京千锋互联科技有限公司
京ICP备12003911号-3
京公网安备 11010802030320号
HTML5
Java
Python
全链路设计
云计算
软件测试
大数据
智能物联网
Unity游戏开发
网络安全
短视频+直播电商
影视剪辑包装
游戏原画
区块链
从0到1学开发
