前端简易小demo-弹球游戏

实现简易弹球游戏：
有得分项有速度设置项
先点击速度项再点击开始游戏（若不选择速度则默认为x1.0）

在做这个东西时，有个logo漂浮的遇到边界反弹的小玩意可以让你参考一下了解计时器的用法，也让你对做这个游戏有点小feel。
https://blog.csdn.net/qq_42664066/article/details/108529828

先上效果图：

点击结束游戏：

接不到结束：

涉及主要知识点：计时器的设置、键盘监听
css代码如下：

     #score{width: 40%;height: 40px;margin: 5px auto;font-size: 40px;position: absolute;left: 470px;}#num{width: 15%;height: 40px;text-align: center;line-height: 40px;float: left;position: absolute;left: 150px;font-size: 40px;top: 5px;border: none;}#container{position: absolute;width: 1000px;height: 480px;border:1px solid red;top: 80px;left: 110px;}#ball{border-radius: 50%;width: 100px;height: 100px;position: absolute;left: 0px;top: 0px;background-color: skyblue;}#show{width: 60%;height: 100px;position: absolute;top: 30%;left: 20%;font-size: 60px;text-align: center;line-height: 100px;}#ban{/*border: 1px solid brown;*/width: 180px;height: 20px;background-color: brown;position: absolute;left: 0px;bottom: 0px;}button,#start,#over{width: 120px;height: 30px;margin: 0px 10px 0 10px;position: relative;top: 570px;left: 220px;}

html代码如下：

 <div id="score">Score：<input id="num" value="0" type="text" /></div><div id="container"><div id="ball"></div><div id="show">Game Over!</div><div id="ban"></div></div><input type="button" id="start" name="" value="开始游戏" onclick="start();"><button value="10">x1.0</button><button value="20">x2.0</button><button value="30">x3.0</button><input type="button" id="over" name="" value="结束游戏" onclick="over();">

jquery代码如下：（jquery3.0）
虽说我用的jquery但对初学javascript的伙伴来说主要理解内部逻辑即可，然后再敲一遍也是一样的。代码这种东西主要是理解想法和借鉴思路。

//相关参数设置$("#show").hide();//初始设置gameover隐藏var score=0;//设置初始化分数var t=0;var speed=10;//numbervar ballwidth = $("#ball").width();//获取球的宽度var ballheight = $("#ball").height();//获取球的高度var ballgox=true;//设置球的行动：true表示沿x正方向走即右走，flase反之var ballgoy=true;//y轴同上var banx;//板在x轴的起始点var bany = $("#ban").offset().top;//板在y轴的起始点var banwidth = $("#ban").width();//板的宽度var banheight = $("#ban").height();//板的高度var bangox=true;//设置板的行动var winwidth = $("#container").width();//游戏界面的宽度var winheight = $("#container").height();//游戏界面的高度var winx = $("#container").offset().left;//游戏界面的左上角x位置var winy = $("#container").offset().top;//游戏界面左上角y位置//设置得分function set_score(score){$("#num").val(score);}//获取游戏速度function getspeed(){$("button").click(function(){speed = $(this).val();//string类型speed = parseInt(speed);//转换为numberl类型})return speed;   }speed = getspeed();//游戏结束函数function over(){$("#show").show();clearTimeout(t);//使得球和板暂停移动}//游戏开始function start(){score=0;set_score(score);//每次开始游戏板和球的初始化位置$("#ball").css('left',0);$("#ban").css('left',0);$("#ball").css('top',0);ballx = $("#ball").offset().left;bally = $("#ball").offset().top;banx = $("#ban").offset().left;//球的移动$("#show").hide();//设置gameover隐藏t=setInterval(function(){if(ballgox==true){$("#ball").css('left',ballx=ballx+speed);//球向右移动}else{$("#ball").css('left',ballx=ballx-speed);}if(ballx>=(winwidth-ballwidth)){//当球撞击游戏右边界ballgox=false;}if(ballx<=0){//球撞击左边界ballgox=true;}if(ballgoy==true){$("#ball").css('top',bally=bally+speed);//球向下移动}else{$("#ball").css('top',bally=bally-speed);}if((bally+ballheight)>=(winheight-banheight)){//当球到达板的位置//没接到if(ballx<banx||ballx>(banx+banwidth)){over();}//接到else{ballgoy=false;//向上弹score=score+speed;//计分set_score(score);}}if(bally<=0){     //球弹到游戏上边界ballgoy=true;}//},100)controleban();}//控制板：键盘监听function controleban(){$(document).keydown(function(event){if(event.keyCode == 39){//键盘右键if(banx>=(winwidth-banwidth-1)){banx=winwidth-banwidth-5;$("#ban").css('left',banx);//当板到达右边界时，设置位置默认在右边界处避免出边界}$("#ban").css('left',banx=banx+40);}if(event.keyCode == 37){//键盘左键if(banx<=0){banx=0;$("#ban").css('left',banx);//当板到达左边界时，设置位置默认在左边界处避免出边界      }$("#ban").css('left',banx=banx-40);}});}

有建议和指正，欢迎指出~表示感谢！！
此至互勉~

前端简易小demo-弹球游戏相关推荐

前端学习小demo：使用HTML+CSS+bootstrap+Vue2.0编写一个简易的音乐播放器（仿网易云）
具体的操作流程(实现步骤): 1.歌曲搜索 2.歌曲播放 3.歌曲评论 4.播放歌曲的MV(有的歌曲没有MV) 代码编写过程: 1.创建一个Vue项目(前提是安装好了node.js.npm.vue) ...
前端精美小Demo之---进制转换器实现
进制转换器实现说明:支持在2~36进制之间进行任意转换,支持浮点型.完全通过HTML.CSS和JavaScript实现2~36进制之间的同步转换,其中部分样式使用bootstrap框架,js实现通过 ...
安卓小游戏：小板弹球
安卓小游戏:小板弹球前言这个是通过自定义View实现小游戏的第三篇,是小时候玩的那种五块钱的游戏机上的,和俄罗斯方块很像,小时候觉得很有意思,就模仿了一下. 需求这里的逻辑就是板能把球弹起来,球 ...
前端实战小案例--canvas实战之FlappyBird小游戏
前端实战小案例--canvas实战之FlappyBird小游戏想练习更多前端案例,请进个人主页,点击前端实战案例->传送门觉得不错的记得点个赞?支持一下我0.0!谢谢了! 不积跬步无以至千里 ...
三星游戏java ball_JavaBallGame 使用语言设计的弹球游戏，可以学习编写小的方法。 Program 238万源代码下载- www.pudn.com...
文件名称: JavaBallGame下载收藏√ [ 5 4 3 2 1 ] 开发工具: Java 文件大小: 55 KB 上传时间: 2014-03-18 下载次数: 0 提供者: p ...
Javascript开发的金山打字简易小游戏
记得以前读书的时候,由于课前都预习过了,所以听课一般都是为了给老师面子很"耐心"的坐在教室里,发着呆走着神.突然,那天上课讲了几天前预习的课题,采用JS可以识别键盘输入,嘿嘿,好玩 ...
弹球小游戏java代码_java实现简单的弹球游戏
弹球游戏实现原理: 隔一定时间(小于1秒)重新绘制图像,因为Graphics类是一个抽象类,创建子类的时候需要把所有涉及的方法都得重写,所以这里使用的是创建Canvas的子类,只需要重写它的paint ...
简易弹球游戏 (2)
简单弹球游戏一.小游戏功能描述功能一:进入小游戏界面,点击play,游戏开始,点击exit可继续上一局游戏. 功能二:小球和球拍分别以圆形区域和矩形区域代替,小球开始以随机速度向下运动,遇到上方的 ...
c语言curses小游戏,基于curses库实现弹球游戏
在网上找到,某人在基于Linux终端,用curses库实现的弹球游戏.本人曾经也做过五子棋游戏,分在其它文章中分享. /* * 基于curses库弹球游戏,编译gcc xxx.c -lcurses * ...

前端简易小demo-弹球游戏

前端简易小demo-弹球游戏相关推荐

最新文章

热门文章