html
html
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div class="wrapper">
<canvas width="300" height="200"></canvas>
</div>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
* {
margin: 0;
padding: 0;
overflow: hidden;
}
canvas {
/*cursor: pointer;*/
background: #F8F8F8;
border-style: groove;
}
.wrapper{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: auto;
}
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
window.onload=function(){
var c;
var canvas = document.querySelector("canvas");
c=document.querySelector("canvas");
c=c.getContext("2d");
c.width=300;
c.height=200;
var ballX=c.width/2; //x axis start postition
var ballY=c.height/2;//y axis start postition
var ballRadius=4;
var dx=1; //x velocity
var dy=1; //y velocity
var paddle1X=0, paddle1Y=80, paddle1WIDTH=3, paddle1HEIGHT=35;
var paddle2X=297, paddle2Y=80, paddle2WIDTH=3, paddle2HEIGHT=35;
var score1=0;
var score2=0;
var AI=.9; // AI= 0 for multiplayer
//mousemove eventListener controls
window.addEventListener("mousemove",function(event) {paddle1Y=event.clientY-innerHeight/2-paddle1HEIGHT/2+c.height/2; event.preventDefault();});
//touchmove eventListener controls
canvas.addEventListener("touchmove", function(e){
var rect = canvas.getBoundingClientRect();
var root = document.documentElement;
var touch = e.changedTouches[0];
var touchY = parseInt(touch.clientY) - rect.top - root.scrollTop ;
e.preventDefault();
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Laufen