javascript怎么编写游戏(javaScript实现网页版的弹球游戏)
类别:编程学习 浏览量:2832
时间:2021-10-05 00:20:52 javascript怎么编写游戏
javaScript实现网页版的弹球游戏利用javeScript对象以及方法实现的网页弹球游戏,供大家参考,具体内容如下
<!DOCTYPE html> <html> <head> <tilie>呼呼哈嘿的网页弹球</title> </head> <body> <canvas id="canvas"width="400"height="400"></canvas> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> <script> var canv=document.getElementById("canvas"); var ctx=canv.getContext("2d"); //创建一个小球对象 var ball={ x: 100, y: 100, xSpeed: -5, ySpeed: -5 }; //定义绘制小球的方法 ball.draw=function(){ ctx.beginPath(); ctx.arc(this.x,this.y,10,0,Math.PI*2,false); ctx.fill(); }; //定义小球运动的方法 ball.move=function(){ this.x =this.x+this.xSpeed; this.y =this.y+this.ySpeed; }; //边界判断 ball.checkCanvas=function(panelStart,panelEnd) { if(this.x<0||this.x>400) this.xSpeed=-this.xSpeed; if(this.y<0) this.ySpeed=-this.ySpeed; if(this.y>390){ if(this.x>panelStart && this.x<panelEnd) this.ySpeed=-this.ySpeed; else{ alert("GAME OVER!!!"); this.x= 50; this.y=100; } } }; //定时功能使得小球动起来 setInterval(function() { ctx.clearRect(0,0,400,400); ball.draw(); panel.draw(); ball.move(); ball.checkCanvas(panel.x,panel.x+panel.xSize); ctx.strokeRect(0,0,400,400); },30); //定时函数,每30ms执行一次大括号中的代码; //创建挡板的对象; var panel ={ x:200, y:390, xSize: 50, ySize: 5 }; //挡板移动方法 panel.draw=function(){ ctx.fillRect(this.x,this.y,this.xSize,this.ySize); }; //利用jquery实现按键交互; $("body").keydown(function(event) { console.log(event.keyCode); if(event.keyCode==37){ panel.x=panel.x-5; if(panel.x<0){ panel.x=0; } } if(event.keyCode==39){ panel.x=panel.x+5; if(panel.x>400-50){ panel.x=350; } } } ); </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- js tab栏案例(JavaScript实现Tab栏切换特效)
- js日历图片(js实现简单日历效果)
- 如何查找JS错误
- vue购物车怎么实现(Vue.js框架实现购物车功能)
- JS中Location
- js右下角提示框
- js操作iframe
- js竖屏切换程序(js判断移动端横竖屏视口检测实现的几种方法)
- laravel-admin代码执行流程(解决laravel-admin 自己新建页面里 js 需要刷新一次的问题)
- extjs中Toolbar工具栏
- sqlserver如何生成xml文件(实现SQL Server 原生数据从XML生成JSON数据的实例代码)
- html5音频处理(recorder.js 基于Html5录音功能的实现)
- js数字时钟编程(JavaScript实现动态数字时钟)
- ExtJs中XTemplate使用
- python提取json数据(Python爬取数据保存为Json格式的代码示例)
- js中toFixed() 的使用
- 深度 倒牛奶 这一幕为何又在美国上演(深度倒牛奶)
- 美国数十万加仑牛奶倒下水道怎么回事 原因曝光令人心痛(美国数十万加仑牛奶倒下水道怎么回事)
- 探索中国神秘文字(探索中国神秘文字)
- 重温《蜗居》 宋思明选中海藻为红颜知己,纯属巧合,与爱无关(宋思明选中海藻为红颜知己)
- 越南旅游攻略(越南旅游攻略自由行)
- 成都旅游攻略(成都旅游攻略自由行最佳线路)
热门推荐
- vueassets文件路径(vue如何根据url下载非同源文件)
- 最新版dedecms安全策略(DedeCMS站点高级安全策略Linux篇)
- php中变量定义规则(PHP中__set实例用法和基础讲解)
- dedecms标签路径修改问题(解决织梦DEDE5.7 tags系列bug图解步骤)
- python零基础实战项目(十个Python练手的实战项目,学会这些Python就基本没问题了推荐)
- python表白神器教程(python浪漫表白源码)
- sql语句groupby分组后怎么显示(SQL group by去重复且按照其他字段排序的操作)
- python函数操作大全(Python的高阶函数用法实例分析)
- dedecms专用环境搭建简单工具(dedecms 搜索时出现“SphinxClient类找不到”解决方法)
- 用php调用函数的换行(php中关于换行的实例写法)