javaScript实现网页版的弹球游戏
更新时间：2021年07月28日 11:32:31 作者：晚安小点点
这篇文章主要为大家详细介绍了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了详解JSON和JSONP劫持以及解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
这篇文章主要为大家详细介绍了js实现开关灯效果,文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-10-10
这篇文章主要介绍了一文看懂JSONP原理和应用，对JSONP感兴趣的同学，可以参考下2021-04-04
这篇文章主要介绍了如何手动实现一个 JavaScript 模块执行器，帮助大家更好的理解和使用JavaScript，感兴趣的朋友可以了解下2020-10-10
这篇文章主要介绍了微信小程序缓存时效性，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
微信小程序中没有select下拉选项框，所以只有自定义。这篇文章主要介绍了微信小程序自定义select下拉选项框组件,需要的朋友可以参考下2018-08-08
Javascript 的addEventListener()及attachEvent()区别分析
大家都知道事件的用法就是当某个事件(状况)被触发了之后就会去执行某个Function, 尤其是Javascript, 在当红AJAX的催化下, 了解Javascript的Event用法更加重要, 在这里就大概介绍一下avascript的Event用法.2009-05-05
本篇文章主要介绍了JavaScript作用域和闭包，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
下面小编就为大家带来一篇js纯数字逐一停止显示效果的实现代码。小编觉得非常不错。现在分享给大家。给大家一个参考2016-03-03
本文介绍了js生成一个不重复的ID的函数的进化之路，具有一定的参考价值，需要的朋友一起来看下吧2016-12-12
最新评论