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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- vscode react jsx语法 开发环境(React-vscode使用jsx语法的问题及解决方法)
- js中parent和opener的区别
- phpstudy 目录浏览宽度(JspStudy如何设置PHP根目录可编辑)
- pjs计算方式(JS代码编译器Monaco使用方法)
- js三级联动列表(基于JavaScript实现年月日三级联动)
- mysql 查询json(MySQL处理JSON常见函数的使用)
- nodejs请求页面(node.js+postman实现模拟HTTP服务器与客户端交互)
- 创建jsp时如何默认生成的是utf-8(js判断文件是否为utf-8编码的方法)
- js轮播图片(JS实现简单图片轮播效果)
- element-ui 菜单悬停样式(js如何构造elementUI树状菜单的数据结构详解)
- js扫雷小游戏源代码(原生js实现简单贪吃蛇小游戏)
- 火狐查看json数据
- extjs中treegrid
- Js操作cookie
- js限制用户(如何用JS追踪用户)
- threejs 三维可视化(three.js模拟实现太阳系行星体系功能)
- 赢麻了 富士公布2021年度财报 营利同比增长240(富士公布2021年度财报)
- 医事文化谈屑 | 古人的名 字 号(医事文化谈屑古人的名)
- ()
- 网友很惭愧,自己写了很多年的字,到头来还不如一名小学生写的好(自己写了很多年的字)
- 中华第一楷 张瑞龄 86岁高龄,苦练楷书71年,一幅字卖593万(中华第一楷张瑞龄)
- 冯骥才 年意(冯骥才年意)
热门推荐
- vue 访问后台接口(vue轮询请求解决方案的完整实例)
- 阿里云的补丁更新应该怎么打(阿里云安骑士企业版有什么作用?)
- String.Empty,NULL和""的区别
- dedecms参数不显示(织梦DedeCms中出现Safe Alert: Request Error step 1/2 的解决方法)
- python 装饰器模式(python重试装饰器的简单实现方法)
- mysql数据库三种模式(MySQL数据库是如何实现XA规范的)
- 用docker搭建在线开发平台(docker部署蜗牛影院系统详细流程分析)
- nginx文件夹限制ip访问(基于Nginx实现限制某IP短时间访问次数)
- ASP.NET中获取匿名对象的属性值
- dedecms标签长度(dedecms使用SQL命令批量替换指定字符串的方法)