• 售前

  • 售后

热门帖子
入门百科

javaScript实现网页版的弹球游戏

[复制链接]
知足常乐77 显示全部楼层 发表于 2021-8-14 14:15:53 |阅读模式 打印 上一主题 下一主题
使用javeScript对象以及方法实现的网页弹球游戏,供各人参考,具体内容如下
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <tilie>呼呼哈嘿的网页弹球</title>
  5. </head>
  6. <body>
  7. <canvas id="canvas"width="400"height="400"></canvas>
  8. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  9. <script>
  10. var canv=document.getElementById("canvas");
  11. var ctx=canv.getContext("2d");
  12. //创建一个小球对象
  13. var ball={
  14. x: 100,
  15. y: 100,
  16. xSpeed: -5,
  17. ySpeed: -5
  18. };
  19. //定义绘制小球的方法
  20. ball.draw=function(){
  21.   ctx.beginPath();
  22.   ctx.arc(this.x,this.y,10,0,Math.PI*2,false);
  23.   ctx.fill();
  24. };
  25. //定义小球运动的方法
  26. ball.move=function(){
  27. this.x =this.x+this.xSpeed;
  28. this.y =this.y+this.ySpeed;
  29. };
  30. //边界判断
  31. ball.checkCanvas=function(panelStart,panelEnd)
  32. {
  33. if(this.x<0||this.x>400)
  34. this.xSpeed=-this.xSpeed;
  35. if(this.y<0)
  36. this.ySpeed=-this.ySpeed;
  37. if(this.y>390){
  38. if(this.x>panelStart && this.x<panelEnd)
  39.    this.ySpeed=-this.ySpeed;
  40. else{
  41.   alert("GAME OVER!!!");
  42.   this.x= 50;
  43. this.y=100;
  44. }
  45. }
  46. };
  47. //定时功能使得小球动起来
  48. setInterval(function()
  49. {
  50.   ctx.clearRect(0,0,400,400);
  51.   ball.draw();
  52.   panel.draw();
  53.   ball.move();
  54.   ball.checkCanvas(panel.x,panel.x+panel.xSize);
  55.   ctx.strokeRect(0,0,400,400);
  56. },30);  //定时函数,每30ms执行一次大括号中的代码;
  57. //创建挡板的对象;
  58. var panel ={
  59. x:200,
  60. y:390,
  61. xSize: 50,
  62. ySize: 5
  63. };
  64. //挡板移动方法
  65. panel.draw=function(){
  66.     ctx.fillRect(this.x,this.y,this.xSize,this.ySize);
  67. };
  68. //利用jquery实现按键交互;
  69. $("body").keydown(function(event)
  70. {
  71. console.log(event.keyCode);
  72. if(event.keyCode==37){
  73.   panel.x=panel.x-5;
  74. if(panel.x<0){
  75. panel.x=0;
  76.    }
  77.   }
  78. if(event.keyCode==39){
  79. panel.x=panel.x+5;
  80. if(panel.x>400-50){
  81. panel.x=350;
  82.     }
  83.   }
  84. }
  85. );
  86. </script>
  87. </body>
  88. </html>
复制代码

以上就是本文的全部内容,希望对各人的学习有所帮助,也希望各人多多支持脚本之家。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作