javascript implements web version of pinball game
|
The web pinball game implemented using javeScript objects and methods is for your reference. The specific content is as follows
<!DOCTYPE html>
<html>
<head>
<tilie>Huhuhahei's Web Pinball</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");
//Create a ball object var ball={
x: 100,
y: 100,
xSpeed: -5,
ySpeed: -5
};
//Define the method for drawing the ball ball.draw=function(){
ctx.beginPath();
ctx.arc(this.x,this.y,10,0,Math.PI*2,false);
ctx.fill();
};
//Define the method of ball movement ball.move=function(){
this.x =this.x+this.xSpeed;
this.y =this.y+this.ySpeed;
};
//Boundary judgment 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;
}
}
};
//The timing function makes the ball move 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); // Timing function, execute the code in the curly brackets every 30ms;
//Create the baffle object;
var panel = {
x:200,
y:390,
xSize: 50,
ySize: 5
};
//Baffle movement method panel.draw=function(){
ctx.fillRect(this.x,this.y,this.xSize,this.ySize);
};
//Use jQuery to implement key interaction;
$("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>
The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: Detailed tutorial on replacing mysql8.0.17 in windows10
>>: Understand the implementation of Nginx location matching in one article
Recommend
JavaScript to implement simple tab bar switching content bar
This article shares the specific code of JavaScri...
VMware Workstation installation and installation of WIN10 operating system to connect to the external network step by step guide (super detailed tutorial)
First download VMware Workstation 15.1 version. I...
Detailed explanation of React event binding
1. What is In react applications, event names are...
Detailed explanation of the conflict between flex layout and position:absolute/fixed
I encountered this problem before when developing...
MySQL implements multi-table association statistics (subquery statistics) example
This article uses an example to describe how to i...
Docker Modify Docker storage location Modify container image size limit operation
This seems to be no longer possible with the new ...
Vue storage contains a solution for Boolean values
Vue stores storage with Boolean values I encounte...
Graphic tutorial on configuring log server in Linux
Preface This article mainly introduces the releva...
Implementation of code optimization for Vue2.x project performance optimization
Table of contents 1 Use of v-if and v-show 2. Dif...
Detailed explanation of JavaScript upload file limit parameter case
Project scenario: 1. Upload file restrictions Fun...
A simple example of MySQL joint table query
MySql uses joined table queries, which may be dif...
JavaScript implements asynchronous submission of form data
This article example shares the specific code of ...
The implementation principle of Tomcat correcting the JDK native thread pool bug
To improve processing power and concurrency, Web ...
CSS achieves footer "bottom absorption" effect
We often encounter this problem: how to use CSS t...
IE6/7 is going to be a mess: empty text node height issue
Preface: Use debugbar to view document code in iet...