千锋教育-做有情怀、有良心、有品质的职业教育机构

编程硬核资料库,
随查随看随问答!

当前位置:首页  >  学员空间  >  学员感言  >  正文

java学习分享:js实现简单的板球游戏

时间:2019-06-04 16:41     来源: 作者:
分享: 更多

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;

}

};

大家可以试试,具体的代码和资源见附件。

相关文章

  • 北京总部地址:北京市海淀区宝盛北里西区28号中关村智诚科创大厦4层
    北京沙河校区:北京市昌平区沙阳路18号北京科技职业技术学院广场服务楼
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、Linux云计算+网络安全培训、互联网营销培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 深圳校区地址:深圳市宝安区宝安大道5010号西部硅谷B座A区6层A605/B座C区1层108
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、Linux云计算+网络安全培训、互联网营销培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 上海校区地址:上海市宝山区同济支路199号智慧七立方3号楼2-4层
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、Linux云计算+网络安全培训、互联网营销培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 广州校区地址:广州市天河区元岗路200号慧通产业园B9三层
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 郑州二七区校区地址:郑州市二七区航海中路60号海为科技园C区10层
    郑州高新区校区地址:郑州市高新区金梭路与银杏路交叉口教育科技产业园南门D座4层
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 大连校区地址:辽宁省大连市高新园区爱贤街10号大连设计城A座901
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 武汉金融港校区地址:武汉市东湖高新技术开发区光谷大道77号金融港B18栋3楼
    武汉智慧园校区地址:武汉市东湖高新技术开发区光谷大道61号智慧园21栋2楼
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 成都校区地址:成都市高新区肖家河沿街138号肖家河大厦三楼
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 西安校区地址:西安市雁塔区高新六路52号立人科技C座西区4楼
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 杭州旺田校区:浙江省杭州市江干区九堡旺田书画城A座4层
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 青岛校区地址:青岛市市北区龙城路31号卓越世纪中心4号楼5层
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 重庆校区地址:重庆市高新区科园一路2号大西洋国际12-1
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 长沙校区地址:湖南省长沙市岳麓区麓谷企业广场A2栋三单元306号
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 哈尔滨校区地址:哈尔滨市松北区世泽路689号 科技创新城4号楼1101
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 南京校区地址:南京市建邺区应天大街780号弘辉产业园1栋2层
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 太原校区地址:太原市小店区长治路230号能源互联网大厦6层
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 沈阳校区地址:辽宁省沈阳市浑南区世纪路16号东大软件园B园B1座A201
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 合肥校区地址:合肥市包河区徽州大道396号东方广场B座12A
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 千锋教育服务号

    了解千锋动态
    关注千锋教育服务号

  • 千锋教育移动站

    扫一扫快速进入
    千锋移动端页面

  • 千锋互联服务号

    扫码匿名提建议
    直达CEO信箱

[an error occurred while processing the directive]